AngularJS学习之 ui router
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS学习之 ui router相关的知识,希望对你有一定的参考价值。
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的主要内容,如果未能解决你的问题,请参考以下文章
Angularjs-ui-router,ui-view 不工作。
为啥这个 angularjs ui-router 代码会使我的浏览器崩溃?
AngularJS:ui-router解析后无法访问控制器中的变量
angularJS中的ui-router和ng-grid模块