<强> ngRoute简介
路由是AngularJS很重要的一环,它可以把你项目的页面串联起来,构成一个项目,常用的路由有ngRoute和ui-route,我这里先讲ngRoute.ngRoute是一个模块,提供路由和深层链接所需的服务和指令。
注意一点,和之前的文章不一样,使用ngRoute之前你需要引入另外一个js文件angular-route.js:
& lt;脚本src=" https://www.yisu.com/zixun/script/angular.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/script/angular-route.min.js "祝辞& lt;/script>
ngRoute包含内容如下:
名称
类型
作用
ngView
指令
路由的不同模板其实都是插入这个元素里
routeProvider美元
提供者
路由配置
美元的路线
服务
各个路由的url、视图控制器
routeParams美元
服务
路由参数
使用ngRoute的基本流程如下:
<李>在需要路由的地方使用ngView来定义视图模板。
<李>在模块中注入ngRoute模块李
<李>在配置中用美元routeProvider来对路由进行配置templateUrl,控制器,解决。
<李>在每个控制器中写业务逻辑李
<李>在控制器中可以通过注入routeParams美元来获得url上的参数
李
可以看下下面这个例子
color.html
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍ft-8”/比;
& lt; title> & lt;/title>
& lt;/head>
& lt;脚本src=" https://www.yisu.com/zixun/script/angular.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/script/angular-route.min.js "祝辞& lt;/script>
& lt;身体ng-app=把丈北?
& lt; p> & lt; a href=" https://www.yisu.com/zixun//眗el=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞Main & lt;/p>
& lt; a href=" https://www.yisu.com/zixun/红”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞Red
& lt; a href=" https://www.yisu.com/zixun/绿色”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞Green
& lt; div ng-view> & lt;/div>
& lt;/body>
& lt; script>
应用var=角。模块(“颜色”,[" ngRoute "]);
app.config(函数(routeProvider美元){
routeProvider美元
当("/",{
templateUrl:“main.html”,
控制器:“mainController”
})
当(“红色”,{
templateUrl:“red.html”,
控制器:“redController”
})
当(“/绿”,{
templateUrl:“green.html”,
控制器:“greenController”
})
.otherwise (“/?;
});
app.controller (“mainController”,[美元范围,功能mainController(范围美元){
美元的范围。消息=罢馐侵饕场?
}));
app.controller (“redController”,[美元范围,功能mainController(范围美元){
美元的范围。消息='这是红色页面”;
}));
app.controller (“greenController”,[美元范围,功能mainController(范围美元){
美元的范围。消息='这是绿色页面”;
}));
& lt;/script>
& lt;/html>
之前
红。html(其他页面类似,就不重复了)
& lt; div比;
{{消息}}
& lt;/div>
例子很简单,我们就只讲下路由的配置:
<李>使用美元routeProvider.when来配置路由的关系,方法接受两个参数,第一个参数是url的路径,第二个参数是配置url对应的templateUrl和控制器。
<李> routeProvider.otherwise美元方法相当于违约。
<>强路由模块化
可能你已经注意到了上面的都写在一起,如果项目越来越大,会不会很头疼,那么是不是可以把它模块化,每个模块都有直接的模块、控制器、配置等。模块依赖的技术我们之前的模块那篇文章已经讲过,那么就来看下带有路由的情况下,怎么模块化。
color.html:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍ft-8”/比;
& lt; title> & lt;/title>
& lt;/head>
& lt;脚本src=" https://www.yisu.com/zixun/script/angular.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/script/angular-route.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/red.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/green.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/main.js "祝辞& lt;/script>
& lt;身体ng-app=把丈北?
& lt; p> & lt; a href=" https://www.yisu.com/zixun//眗el=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞Main
