发表于： 2017-06-24 23:24:21
1 905
今天完成的事情：
下载了angular1.6.4,安装angular框架，学习了一下《angular ngRoute》的知识，简单写了3个页面，看能否通过ngRoute实现单页面跳转，目前还没能加载出来。
明天计划的事情：
完善3个页面的内容，通过ngRoute实现单页面跳转。
遇到的问题：
一共有3个页面（mainPage.html; articleList.html; articleDetail.html等所有文件都在同一个文件夹），
mainPage.html文件
<body ng-app="myApp">
<ul class="nav nav-pills nav-stacked sidebar">
<li role="presentation" ng-controller="listCtrl"><a href="#/articleList">信息管理</a></li>
<li role="presentation" ng-controller="detailCtrl"><a href="#/articleDetail">Article管理</a></li>
<li role="presentation" ><a href="#">后台管理</a></li>
</ul>
<div class="view">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</body>
app.js文件
var app = angular.module("myApp",['ngRoute']);
app.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/articleList',{
templateUrl:'articleList.html',
controller:'listCtrl'
})
.when('/articleDetail',{
templateUrl:'articleDetail.html',
controller:'detailCtrl'
})
.otherwise({
redirectTo:'/articleList'
})
}]);
点击“信息管理”和“Article管理”都不会加载页面。
收获：
学习了ngRoute：
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。第二个参数是路由配置对象。
controller //function或string类型。在当前模板上执行的controller函数，生成新的scope
controllerAs //string类型，为controller指定别名
template //string或function类型，视图所用的模板，这部分内容将被ngView引用
templateUrl //string或function类型，当视图模板为单独的html文件或是使用了<script type="text/ng-template">定义模板时使用
resolve //指定当前controller所依赖的其他模块
redirectTo //重定向的地址
ngRoute vs ui.router
在ngRoute中：
1.视图没有名字进行唯一标志，所以它们被同等的处理。
2.路由配置只有一个模板，无法配置多个。
在ui.router中：
1.可以给视图命名，如：ui-view="status"。
2.可以在路由配置中根据视图名字(如：status)，配置不同的模板（其实还有controller等）。
返回列表
评论