angular学习之ngRoute路由机制
ngRoute简介
路由是AngularJS很重要的一环,它可以把你项目的页面串联起来,构成一个项目,常用的路由有ngRoute和ui-route,我这里先讲ngRoute。ngRoute是一个Module,提供路由和深层链接所需的服务和指令。
注意一点,和之前的文章不一样,使用ngRoute之前你需要引入另外一个js文件angular-route.js:
ngRoute包含内容如下:
作用
ngView
Directive
路由的不同模板其实都是插入这个元素里
$routeProvider
Provider
路由配置
$route
Service
各个路由的url,view,controller
$routeParams
Service
路由参数
使用ngRoute的基本流程如下:
- 在需要路由的地方使用ngView来定义视图模板。
- 在module中注入ngRoute模块
- 在config中用$routeProvider来对路由进行配置templateUrl,controller,resolve。
- 在每个controller中写业务逻辑
- 在controller中可以通过注入$routeParams来获得url上的参数
可以看下下面这个例子
color.html
Main Red Green