简单讲解AngularJS的Routing路由的定义与使用
在单页面应用中,视图之间的跳转就显尤为重要的,随着应用越来越复杂,我们需要用一种方法来精确控制什么时候该呈现怎样的页面给用户。
咱们可以通过在主页面中引入不同的模板来支持不同页面的切换,但是这么做的缺点就是,越来越多的内嵌代码导致最后难以管理。
通过ng-include指令我们可以把很多的模板整合在视图中,但是我们有更好的方法来处理这种情况,我们可以把视图打散成layout和模板视图,然后根据用户访问的特定的URL来显示需要的视图
我们可以将这些“碎片”在一个布局模板中拼接起来
AngularJS通过在$routeProvider($route服务的提供者)上声明routes来实现上面的构想
使用$routeProvider,我们可以更好的利用浏览历史的API并且可以让用户可以把当前路径存成书签以方便以后的使用
在我们的应用中设定路由,我们需要做两件事情:第一,我们需要指出我们存放将要存放新页面内容的布局模板在哪里。比如,如果我们想在所有页面都配上header和footer,我们可以这样设计布局模板:
<header> <h1>Header</h1> </header> <divclass="content"> <divng-view></div> </div> <footer> <h5>Footer</h5> </footer>
ng-view指令将高速$routeProvider在哪里渲染模板
第二,我们需要配置我们的路由信息,我们将在应用中配置$routeProvider
$routeProvider提供了两种方法处理路由:when和otherwise。方法when接收两个参数,第一个设置$location.path().(直接用“//”也没有问题)
定义
定义路由非常容易,在我们的应用mian模块里面注入ngRoute依赖就可以了
angular.module('myApp',['ngRoute']) .config(function($routeProvider){});
现在,我们就可以给应用定义路由了。在路由模块里面的.config()方法里面注入了$routeProvider,上面的代码给我们演示了两个用于定义路由的方法。
when()
when()方法有两个参数,我们希望匹配的浏览器url和路由操作对象。一般mainroute经常使用“/”来表示,也可以定义URL参数,在controller里面就使用$routeParams获取url参数。
templateUrl:表示路由跳转的view模板
controller:控制器
angular.module('myApp',['ngRoute']) .config(function($routeProvider){ $routeProvider .when('/',{ templateUrl:'views/main.html', controller:'MainCtrl' }) .when('/day/:id',{ templateUrl:'views/day.html', controller:'DayCtrl' })
otherwise()
otherwise()定义了当应用找不到指定路由的时候跳转的路由
angular.module('myApp',['ngRoute']) .config(function($routeProvider){ $routeProvider .when('/',{ templateUrl:'views/main.html', controller:'MainCtrl' }) .when('/day/:id',{ templateUrl:'views/day.html', controller:'DayCtrl' }) .otherwise({ redirectTo:'/' }); })
使用
定义好了路由需要怎么使用呢?我们要告诉angular页面的哪一个部分是我们希望转换的,这需要使用到ng-view指令
<divclass="header">Mypage</div> <divng-view></div> <spanclass="footer">Afooter</span>
这样就只有<divng-view></div>会被更新,header/footer都始终保持不变