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 。
具体的代码可以如下：
<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>
<div ui-view>div>
<a ui-sref="state1">State 1a>
<a ui-sref="state2">State 2a>
body>3，可以观察到ui-sref用在ui-sref除了能够实现state的改变，如果某个state有与之对应的URL,那么ui-sref还会自动给href属性。接下来我们会定义一些模板，它们会被插入到ui-view的位置。应该注意的是它们也会有自己的ui-view。
<h1>State 1h1>
<hr/>
<a ui-sref="state1.list">Show Lista>
<div ui-view>div>
<h1>State 2h1>
<hr/>
<a ui-sref="state2.list">Show Lista>
<div ui-view>div>4 , 接着继续添加子模版，它们会被插入到其父状态的ui-view之中。
<h3>List of State 1 Itemsh3>
<ul>
<li ng-repeat="item in items">{{ item }}li>
ul>
<h3>List of State 2 Thingsh3>
<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。
<body>
<div ui-view="viewA">div>
<div ui-view="viewB">div>
<a ui-sref="route1">Route 1a>
<a ui-sref="route2">Route 2a>
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
参考资料：
github上的ui-router文档