angular学习（十六）——ngRoute
|
转载请写明来源地址：http://www.52php.cn/article/p-ulgukfer-bph.html ngRoute简介路由是angularjs很重要的一环，它可以把你项目的页面串联起来，构成一个项目，常用的路由有ngRoute和ui-route，我这里先讲ngRoute。ngRoute是一个Module，提供路由和深层链接所需的服务和指令。 注意一点，和之前的文章不一样，使用ngRoute之前你需要引入另外一个js文件angular-route.js： <script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
ngRoute包含内容如下：
使用ngRoute的基本流程如下：
可以看下下面这个例子 color.html <!DOCTYPE html>
<html>
<head>
<meta charset="uft-8"/>
<title></title>
</head>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<body ng-app="color">
<p><a href="#/">Main</a></p>
<a href="#red">Red</a>
<a href="#green">Green</a>
<div ng-view></div>
</body>
<script> var app = angular.module("color",["ngRoute"]); app.config(function ($routeProvider) { $routeProvider .when("/",{ templateUrl: "main.html",controller: 'mainController' }) .when("/red",{ templateUrl: "red.html",controller: 'redController' }) .when("/green",{ templateUrl: "green.html",controller: 'greenController' }) .otherwise('/'); }); app.controller('mainController',['$scope',function mainController($scope){ $scope.message='this is main page'; }]); app.controller('redController',function mainController($scope){ $scope.message='this is red page'; }]); app.controller('greenController',function mainController($scope){ $scope.message='this is green page'; }]); </script>
</html>
red.html (其他页面类似，就不重复了) <div style="background: red"> {{message}} </div>
例子很简单，我们就只讲下路由的配置：
路由模块化可能你已经注意到了上面的都写在一起，如果项目越来越大，会不会很头疼，那么是不是可以把它模块化，每个模块都有直接的module，controller，config等。模块依赖的技术我们之前的module那篇文章已经讲过，那么就来看下带有路由的情况下，怎么模块化。 color.html: <!DOCTYPE html>
<html>
<head>
<meta charset="uft-8"/>
<title></title>
</head>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<script src="red.js"></script>
<script src="green.js"></script>
<script src="main.js"></script>
<body ng-app="color">
<p><a href="#/">Main</a></p>
<a href="#red">Red</a>
<a href="#green">Green</a>
<div ng-view></div>
</body>
<script> var app = angular.module("color",["ngRoute","Module.red","Module.main","Module.green"]); app.config(function ($routeProvider) { $routeProvider.otherwise('/'); }); </script>
</html>
可以看到我们的color.html文件是不是很简洁，config的路由配置里只有一行 red.js angular.module('Module.red',['ngRoute'])
.config([
'$routeProvider',function ($routeProvider) {
$routeProvider.when('/red',{
templateUrl: 'red.html',controller: 'redController'
});
}
])
.controller('redController',[
'$scope',function ($scope) {
$scope.color='red';
$scope.message = 'This is red page';
}
]);
路由的参数那么路由怎么将参数传入到模板页呢？我们把上面的例子改造一下，通过例子来讲解： main.js angular.module('Module.main',function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'main.html',controller: 'mainController'
});
}
])
.controller('mainController',function ($scope) {
$scope.message = 'This is main page';
$scope.colors=['blue','yellow','pink'];
}
]);
这里初始化了一个colors的数组，作为要传递的数据。 main.html {{message}} <br> <ul> <li ng-repeat="color in colors"> <a href="#/color/{{color}}">{{color}}</a> </li> </ul>
通过ng-repeat循环创建a链接，数组的元素通过链接传入。 colorId.js angular.module('Module.colorId',function ($routeProvider) {
$routeProvider
.when('/color/:colorId',{
templateUrl: 'colorId.html',controller: 'colorIdController'
});
}
])
.controller('colorIdController','$routeParams',function ($scope,$routeParams) {
$scope.color = $routeParams.colorId;
$scope.message = 'This is ' +$routeParams.colorId +' page';
}
]);
这里定义了一个colorId的模块，通过:colorId来匹配传入的参数，这里匹配到的是数组中的元素。例如/color/blue，那么匹配到的就是blue。 colorId.html <div style="background: {{color}}"> {{message}} </div>
最后在colorId上呈现出来。 如果是多个参数可以直接一一接到后面比如/color/:colorId/:year/:month/:day,和后面的参数也一一匹配，如/color/pink/2017/3/13。 支持*号：/color/:color/largecode/:largecode*/edit匹配/color/brown/largecode/code/with/slashes/edit的话，color将会匹配到brown，largecode将匹配到code/with/slashes。 支持?号：/color/:color/largecode/:largecode?/edit可以匹配匹配/color/brown/largecode/code/edit，largecode将会匹配到code。 路由中的resolve一个最常见的情景，页面跳转时要加载一些数据。有两种方式可以做到：
个人更喜欢跳转后加载的方式，因为更为友好，所以对resolve不太感冒，但我们还是讲下resolve。 resolve是一个map对象:
看下例子： news.html <html> <head> <meta charset="uft-8"/> <title></title> </head> <script src="script/angular.min.js"></script> <script src="script/angular-route.min.js"></script> <body ng-app="ngst-news"> <div ng-controller="MainController"> <ul> <li ng-repeat="news in newsAarry"> <a href="#/newsDetail/{{news.id}}">{{news.title}}</a> </li> </ul> <div ng-view></div> </div> </body> <script src="news.js" charset="UTF-8"></script> <script src="newsDetail.js" charset="UTF-8"></script> </html>
news.js var news = angular.module("ngst-news",["ngst-newsDetail"]);
news.controller("MainController",["$scope",function ($scope) {
$scope.newsAarry = [{"id": "1","title": "辽宁人大副主任王阳 浙江宁波市长卢子跃被免职"},{"id": "2","title": "今冬小雨缤纷，荔枝园地湿润壮旺荔枝果树，下刀环剥最狠"},{"id": "3","title": "百度任原搜索渠道总经理顾国栋为市场执行总监"}];
}]);
news页面是一个新闻列表，在列表下面有个ng-view，点击新闻列表链接下面的ng-view进行路由切换。 newsDetails.html {{message}}
newsDetails.js var news = angular.module("ngst-newsDetail",['ngRoute']);
news.config(["$routeProvider",function ($routeProvider) {
$routeProvider.when("/newsDetail/:newsId",{
templateUrl: 'newsDetail.html',controller: 'newsDetailController',resolve: {
content: ['$q','$timeout',"$route",function ($q,$timeout,$route) {
var deferred = $q.defer();
$timeout(function () {
deferred.resolve('新闻详情 id=' + $route.current.params.newsId);
},1000);
return deferred.promise;
}]
}
});
}])
.controller("newsDetailController",'content',content) {
$scope.message = content;
}]);
这里使用 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |