微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angular学习之ngRoute路由机制

ngRoute简介

路由是AngularJS很重要的一环,它可以把你项目的页面串联起来,构成一个项目,常用的路由有ngRoute和ui-route,我这里先讲ngRoute。ngRoute是一个Module,提供路由和深层链接所需的服务和指令。

注意一点,和之前的文章不一样,使用ngRoute之前你需要引入另外一个js文件angular-route.js:

rush:js;">

ngRoute包含内容如下:

Box-sizing: border-Box; border-top: rgb(238,238,238) 1px solid; height: 113px; border-right: rgb(238,238) 1px solid; width: 620px; white-space: normal; word-spacing: 0px; border-collapse: collapse; border-bottom: rgb(238,238) 1px solid; text-transform: none; color: rgb(0,0); text-align: left; font: 14px/26px 'microsoft yahei'; border-spacing: 0px; border-left: rgb(238,238) 1px solid; widows: 1; letter-spacing: normal; background-color: rgb(255,255,255); text-indent: 0px; -webkit-text-stroke-width: 0px"> Box-sizing: border-Box"> Box-sizing: border-Box"> 不同模板其实都是插入这个元素里arams

使用ngRoute的基本流程如下:

  1. 在需要路由的地方使用ngView来定义视图模板。
  2. 在module中注入ngRoute模块
  3. 在config中用$routeProvider来对路由进行配置templateUrl,controller,resolve。
  4. 在每个controller中写业务逻辑
  5. 在controller中可以通过注入$routeParams来获得url上的参数

可以看下下面这个例子

color.html

rush:xhtml;"> <Meta charset="uft-8"/> Main

Red
Green

red.html (其他页面类似,就不重复了)

rush:js;">

例子很简单,我们就只讲下路由的配置:

  1. 使用$routeProvider.when来配置路由的关系,方法接受两个参数,第一个参数是url的路径,第二个参数是配置url对应的templateUrl和controller。
  2. $routeProvider.otherwise方法相当于default。

路由模块化

可能你已经注意到了上面的都写在一起,如果项目越来越大,会不会很头疼,那么是不是可以把它模块化,每个模块都有直接的module,controller,config等。模块依赖的技术我们之前的module那篇文章已经讲过,那么就来看下带有路由的情况下,怎么模块化。

color.html:

rush:xhtml;"> <Meta charset="uft-8"/>

可以看到我们的color.html文件是不是很简洁,config的路由配置里只有一行$routeProvider.otherwise方法,但是module却注入了除ngRoute外的三个module:”Module.red”,”Module.main”,”Module.green”,这其实是把path对应的路由提取成模块,使用了专门的js来处理它们,看起来和他们对应的模板相对应,我们来看下red.html对应的模块js:

red.js

rush: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

rush: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

rush:xhtml;"> {{message}}
  • {{color}}

通过ng-repeat循环创建a链接,数组的元素通过链接传入。

colorId.js

rush: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

rush:xhtml;">

最后在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

一个最常见的情景,页面跳转时要加载一些数据。有两种方式可以做到:

  1. 页面跳转后加载,通过controller去控制数据的加载,如果时间较长则显示一个loading的界面,数据请求成功后再替换成数据界面
  2. 页面跳转前加载,通过路由的resolve去配置。

个人更喜欢跳转后加载的方式,因为更为友好,所以对resolve不太感冒,但我们还是讲下resolve。

resolve是一个map对象:

  1. map的key是可以注入到controller的可选的依赖项,如果resolve其中依赖项的返回值是promise,那么在controller初始化之前,路由会一直等待直到所有的promise都已经resolved或者其中的一个被rejected。如果所有的promise都成功resolved,这些依赖项将可以注入到controller中并同时触发$routeChangeSuccess事件,如果其中的一个promise是rejected,那么将会触发$routeChangeError事件,并中止路由切换。
  2. map的value如果是个字符串,那么它会是一个service的别名。如果是一个函数,他的返回值可以被当做依赖注入 到controller中,如果返回值是一个promise,在注入之前必须是resolved的。注意这时候ngRoute.$routeParams还不可用,如果需要使用参数则需要使用$route.current.params。

看下例子:

news.html

rush:xhtml;"> <Meta charset="uft-8"/>
  • {{news.title}}
  • <script src="news.js" charset="UTF-8">
    <script src="newsDetail.js" charset="UTF-8">

    news.js

    rush: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

    rush:xhtml;"> {{message}}

    newsDetails.js

    rush: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;
    }]);

    这里使用$route.current.params来获得参数

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐


    Box-sizing: border-Box; border-top: rgb(238,238) 1px solid; border-right: rgb(238,238) 1px solid; vertical-align: top; border-bottom: rgb(238,238) 1px solid; padding-bottom: 8px; padding-top: 8px; padding-left: 8px; border-left: rgb(238,238) 1px solid; line-height: 20px; padding-right: 8px">名称 Box-sizing: border-Box; border-top: rgb(238,238) 1px solid; line-height: 20px; padding-right: 8px">类型 作用