路由是 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 包含内容如下:
名称 | 类型 | 作用 |
---|---|---|
|
Directive | 路由的不同模板其实都是插入这个元素里 |
|
Provider | 路由配置 |
|
Service | 各个路由的 url,view,controller |
|
Service | 路由参数 |
使用 ngRoute 的基本流程如下:
来定义视图模板。
- ngView
来对路由进行配置 templateUrl,controller,resolve。
- $routeProvider
来获得 url 上的参数
- $routeParams
可以看下下面这个例子
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', ['$scope',
- function mainController($scope) {
- $scope.message = 'this is red page';
- }]);
- app.controller('greenController', ['$scope',
- function mainController($scope) {
- $scope.message = 'this is green page';
- }]);
- </script>
- </html>
red.html (其他页面类似,就不重复了)
- <div style="background: red">
- {{message}}
- </div>
例子很简单,我们就只讲下路由的配置:
来配置路由的关系,方法接受两个参数,第一个参数是 url 的路径,第二个参数是配置 url 对应的 templateUrl 和 controller。
- $routeProvider.when
方法相当于 default。
- $routeProvider.otherwise
可能你已经注意到了上面的都写在一起,如果项目越来越大,会不会很头疼,那么是不是可以把它模块化,每个模块都有直接的 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 的路由配置里只有一行
方法, 但是 module 却注入了除 ngRoute 外的三个 module:"Module.red","Module.main","Module.green",这其实是把 path 对应的路由提取成模块,使用了专门的 js 来处理它们,看起来和他们对应的模板相对应,我们来看下 red.html 对应的模块 js:
- $routeProvider.otherwise
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', ['ngRoute'])
- .config([
- '$routeProvider',
- function ($routeProvider) {
- $routeProvider
- .when('/', {
- templateUrl: 'main.html',
- controller: 'mainController'
- });
- }
- ])
- .controller('mainController', [
- '$scope',
- 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', ['ngRoute'])
- .config([
- '$routeProvider',
- function ($routeProvider) {
- $routeProvider
- .when('/color/:colorId', {
- templateUrl: 'colorId.html',
- controller: 'colorIdController'
- });
- }
- ])
- .controller('colorIdController', [
- '$scope','$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。
/color/:color/largecode/:largecode?/edit 可以匹配匹配 / color/brown/largecode/edit,largecode 将会匹配到空值。
一个最常见的情景,页面跳转时要加载一些数据。有两种方式可以做到:
个人更喜欢跳转后加载的方式,因为更为友好,所以对 resolve 不太感冒,但我们还是讲下 resolve。
resolve 是一个 map 对象:
事件,如果其中的一个 promise 是 rejected,那么将会触发
- $routeChangeSuccess
事件, 并中止路由切换。
- $routeChangeError
还不可用,如果需要使用参数则需要使用
- ngRoute.$routeParams
。
- $route.current.params
看下例子:
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", ['$scope', 'content',
- function($scope, content) {
- $scope.message = content;
- }]);
这里使用
来获得参数
- $route.current.params
来源: http://www.bubuko.com/infodetail-1982451.html