Angular路由的定义和使用
2014-07-26 15:48
316 查看
一、什么是routing(路由)
Almost all non-trivial, non-demo Single Page App (SPA) require multiple pages. A settings page is different from a dashboard view. The login page is different from an accounts page(设置页面不同于控制页面,登录页面不同于账号信息页面。。。。就是说一个应用很多功能不同的页面)我们可以使用Angular简单优雅地实现这个功能(页面之间的控制跳转...)
二、安装
使用angular的路由功能需要安装routing模块...(引入angular-route.js就可以了)三、定义
定义路由非常容易,在我们的应用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: '/' }); })
四、使用
定义好了路由需要怎么使用呢?我们要告诉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.js的路由和模板在asp.net mvc 中的使用
- angular中使用路由和$location切换视图
- angular4 路由实际使用中的应用场景
- Vue——路由定义及基本使用
- angular路由的使用案例
- 在ASP.NET MVC中使用正则表达式定义路由(翻的)
- angular.js的路由和模板在asp.net mvc 中的使用
- 解决使用angular2路由后,页面刷新后报404错误。
- Angular 路由使用整理(一)
- 简单讲解AngularJS的Routing路由的定义与使用
- 写一个最基本的angular路由的使用案例
- angular中的路由简单使用
- [置顶]AngularJS“路由”的定义概念、使用详解——AngularJS学习资料教程
- Angular-1.6 路由 简单使用
- angular中使用路由和$location切换视图
- AngularJS之基础-5 路由(定义路由、使用路由)、自定义指令(Directive)
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
- 使用路由延迟加载 Angular 模块
- 详解Angular6.0使用路由步骤(共7步)
- Angular 2 + 折腾记 :(4)初步了解路由及使用