首页 > 代码库 > angular路由
angular路由
闲来无事,写一写我们常用的angular中的路由,angular中路由是既简单有好用一种页面切换方式,对于angular而言他有自己的路由模块--ngRoute,
首先需要我们引入,angular.js与angular.route.js,然后配置HTML中的代码,(省略)
下面是js文件中需要写入的代码
以下代码可以直接拿来使用 只需要修改一些参数
<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #289c97 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606; min-height: 23.0px } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #999ea5 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #b58a00 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b7ec3 } span.s1 { color: #4f5d66 } span.s2 { color: #2b7ec3 } span.s3 { color: #d74200 } span.s4 { color: #48565d } span.s5 { color: #000000 } span.s6 { color: #4663cc } span.s7 { color: #698906 } span.s8 { color: #289c97 } span.s9 { color: #060606 } span.s10 { color: #b58a00 } span.Apple-tab-span { white-space: pre }</style><script type="text/javascript">
var app = angular.module("myApp",["ngRoute"]);
app.controller("ctr",function(){
});
//angular 1.6.0以上版本需要配置
//此处需要注意,如果不写此行代码 会显示错误
app.config(["$locationProvider",function($locationProvider){
$locationProvider.hashPrefix("");
}]);
//配置路由信息
app.config(function($routeProvider){
$routeProvider.when("/aaa",{templateUrl:"a.html"});
$routeProvider.when("/bbb",{templateUrl:"b.html"});
$routeProvider.when("/ccc",{templateUrl:"c.html"});
$routeProvider.otherwise({templateUrl:"a.html"});
});
</script>
以上便可以实现简单的路由功能,那么问题来了,此种路由不能进行嵌套,什么意思呢?意思为:在我们的项目中,已经使用了ngRoute路由功能实现页面的跳转切换,那么如果在切换后的页面中嵌套路由功能,ngRoute是无法实现的,此时需要我们引入第三方路由模块,叫做ui.router模块.
UI,router有两个好处,
多视图 嵌套视图
有了ui.router就可以实现多层嵌套路由了
angular路由