路由就是网络数据或者请求进行分发的一个网络组件。我们可以使用Angular简单优雅地实现这个功能(页面之间的控制跳转...)。
Angular路由的定义和使用
1、安装
使用angular的路由功能需要安装routing模块...(引入angular-route.js就可以了)
2、定义
定义路由非常容易,在我们的应用mian模块里面注入ngRoute依赖就可以了
angular.module('myApp', ['ngRoute']) .config(function($routeProvider) {});
现在,我们就可以给应用定义路由了。在路由模块里面的.config()方法里面注入了$routeProvider,上面的代码给我们演示了两个用于定义路由的方法。
when()
when()方法有两个参数,我们希望匹配的浏览器url和路由操作对象。一般main route经常使用“/”来表示,也可以定义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: '/' }); })
3、使用
定义好了路由需要怎么使用呢?我们要告诉angular页面的哪一个部分是我们希望转换的,这需要使用到ng-view指令
<div class="header">My page</div> <div ng-view></div> <span class="footer">A footer</span>
这样就只有<div ng-view></div>会被更新, header/footer都始终保持不变
以上就是angular中的路由是什么意思的详细内容,更多请关注易知道|edz.cc其它相关文章!