码迷,mamicode.com
首页 > 其他好文 > 详细

angular中的子路由用法

时间:2017-06-29 10:02:21      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:back   使用   新建   java   .com   conf   type   post   rip   

Angular ui-route的用法

引入angular和使用angular子路由时需要的依赖模块angular-ui-route.js。并且在html中将路由要插入的位置写上。而在js部分中和angular路由一样在控制台外面写

<body>
    <div ui-view></div>
</body>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-ui-route.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var app = angular.module(app,[ui.router]);
    app.config(function($stateProvider,$urlRouterProvider){
        
    });
</script>

这是基本的情况,之后我们应该建立一个新的html来写

<div>
    <a href="javascript:;" style="padding-right: 20px;">page1</a>
    <a href="javascript:;" style="padding-right: 20px;">page2</a>
    <a href="javascript:;" style="padding-right: 20px;">page3</a>
</div>

并且将这新写的html引入到刚开始的网页中

app.config(function($stateProvider,$urlRouterProvider){
        $urlRouterProvider.when(‘‘,‘PageTab‘);
        
        $stateProvider.state(‘PageTab‘,{
            url: ‘/PageTab‘,
            templateUrl: ‘PageTab.html‘//所引入的路径
        })
});

这样就形成了基本的路由了,之后我们还要在新建几个新的html来充当第二级路由。并且把第二个改成

<div>
    <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab1">page1</a>
    <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab2">page2</a>
    <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab3">page3</a>
    <div ui-view></div>
</div>

这样子我们angular的子路由效果就形成了。

不足之处,望大家多多指出

 

angular中的子路由用法

标签:back   使用   新建   java   .com   conf   type   post   rip   

原文地址:http://www.cnblogs.com/Z-Xin/p/7091833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!