AngularUI Router学习笔记
晏正豪
AngularUI Router
一，准备ui-router。
1，使用npm包管理器install 该服务。（使用npm只是其中一种途径）在当前项目的命令行中输入 npm install angular-ui-router ；
2 , 在index.html中包含 angular-ui-router.js ;
3，在主模型的依赖关系列表中加入 ui.router 。
具体的代码可以如下：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ui.router']);
...
</script>
...
</head>
<body>
...
</body>
</html>二，Nested States & Views。
1，首先，完成上一步的操作。
2，添加 ui-view指令到<body>中。
<!-- index.html -->
<body>
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body>3，可以观察到ui-sref用在<a>标签之中。ui-sref除了能够实现state的改变，如果某个state有与之对应的URL,那么ui-sref还会自动给<a>标签添加href属性。接下来我们会定义一些模板，它们会被插入到ui-view的位置。应该注意的是它们也会有自己的ui-view。
<!-- partials/state1.html -->
<h1>State 1</h1>
<hr/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div><!-- partials/state2.html -->
<h1>State 2</h1>
<hr/>
<a ui-sref="state2.list">Show List</a>
<div ui-view></div>4 , 接着继续添加子模版，它们会被插入到其父状态的ui-view之中。
<!-- partials/state1.list.html -->
<h3>List of State 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul><!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{ thing }}</li>
</ul>5，最后通过$stateProvider服务将所有的状态都连接起来。
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
});
});6，以下链接可以看到实现的效果。
Go to Quick Start Plunker for Nested States & Views
三，Multiple & Named Views。
意思就是每一个state有多个view与之相对应。
1，添加多个ui-view。
<!-- index.html -->
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">Route 1</a>
<a ui-sref="route2">Route 2</a>
</body>2，然后使用config对模块进行修饰。
myApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"viewA": { template: "index.viewA" },
"viewB": { template: "index.viewB" }
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
});3，以下链接可以看到实现的效果。
Go to Quick Start Plunker for Multiple & Named Views
参考资料：
类似资料：