码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS学习之 ui router

时间:2017-05-12 20:19:24      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:stat   也有   erp   function   bower   view   bsp   blog   url   

1.安装

bower install --save angular_ui-router

2.在项目主页面 index.html中添加

<div ui-view=""></ui-view>/*login页面,dashboard.html将会嵌入此处*/

3.在app.js页面设置

.config(function ($stateProvider,$urlRouterProvider) {
  $urlRouterProvider.otherwise(‘/login‘);/*其他找不到的时候默认跳转的页面*/
  $stateProvider

    .state(‘login‘,{
      url:‘/login‘,
      templateUrl:‘/views/login.html‘
    })
    .state(‘dashboard‘,{
      url:‘/dashboard‘,
      templateUrl:‘/views/dashboard.html‘/*这个是一个登陆后的主页面*/
    })
    .state(‘dashboard.articlelist‘,{
      url:‘/articlelist‘,
      templateUrl:‘/views/articlelist.html‘/*这是dashboard里面的一个嵌套页面*/
    })
    .state(‘dashboard.addarticle‘,{
      url:‘/addarticle‘,
      templateUrl:‘/views/addarticle.html‘
    })
});

4.在HTML中设置

这个是在dashboard下的嵌套页面写法:

    <li ui-sref=".articlelist"><a href="" >Article列表</a></li>/*注意其中的dot,href什么也不需要写*/



<div>
<div ui-view=""/>
</div>/*articlelist和addarticle两个页面将会嵌套在dashboard这里*/
 

 

这个是上面页面里有个button点击之后跳转到另外一个嵌套页面,注意 ur-sref添加了父节点 dashboard. href也有内容

<button type="button" class="btn btn-success btn-xs pull-right" ui-sref="dashboard.addarticle" href="/addarticle">+新增</button>

 

AngularJS学习之 ui router

标签:stat   也有   erp   function   bower   view   bsp   blog   url   

原文地址:http://www.cnblogs.com/carriej/p/6846748.html

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