Skip to content

Commit 8d9140f

Browse files
WscatsWscats
authored
Create README.md
1 parent b627e94 commit 8d9140f

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

‎README.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1045,3 +1045,133 @@ app.filter("过滤器名字",function("服务")){
10451045
}
10461046
```
10471047
[Angular自定义关键词检索过滤器](https://wscats.github.io/angular-tutorial/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%85%B3%E9%94%AE%E8%AF%8D%E6%A3%80%E7%B4%A2%E8%BF%87%E6%BB%A4%E5%99%A8(%E7%AE%80%E7%89%88).html)
1048+
1049+
## 路由
1050+
1051+
**UI路由**
1052+
### 引入JS文件
1053+
开始引入angular和ui-route的js文件
1054+
```javascript
1055+
<script type="text/javascript" src="angular.js" ></script>
1056+
<script type="text/javascript" src="angular-ui-router.js"></script>
1057+
```
1058+
与原生angular路由不同的是，ui路由用**ui-view**而不是**ng-view**
1059+
```javascript
1060+
<div ui-view></div>
1061+
```
1062+
在angular服务中注入**ui.router**模块
1063+
```javascript
1064+
var app = angular.module('wscats', ['ui.router']);
1065+
```
1066+
### 配置路由
1067+
用到**$stateProvider**和**$urlRouterProvider**两个服务
1068+
```javascript
1069+
/* 注入$stateProvider，$urlRouterProvider */
1070+
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
1071+
/* 使用when来对一些不合法的路由进行重定向 */
1072+
$urlRouterProvider.when('', '/main');
1073+
/* 通过$stateProvider的state()函数来进行路由定义 */
1074+
$stateProvider.state('main', {
1075+
url: '/main',
1076+
templateUrl: 'views/main.html',
1077+
controller: 'mainCtrl'
1078+
}).state('main.a', {
1079+
url: '/pageMain1',
1080+
templateUrl: 'views/pageMain1.html',
1081+
controller: 'pageMain1Ctrl'
1082+
})
1083+
}]);
1084+
```
1085+
主路由，路由地址为_#/main_
1086+
```
1087+
app.controller('mainCtrl', function($scope) {
1088+
$scope.name = 'Wscats';
1089+
})
1090+
```
1091+
1092+
main路由下的子路由，路由地址为_#/main/pageMain1_
1093+
1094+
```
1095+
app.controller('pageMain1Ctrl',function($scope){
1096+
$scope.name = 'Oaoafly'
1097+
})
1098+
```
1099+
### 嵌套路由
1100+
此时我们就可以在_main.html_上放第二个`ui-view`这里比原生好的地方在于可以嵌套路由
1101+
main.html
1102+
```html
1103+
<!--main-->
1104+
{{name}}
1105+
<div ui-view></div>
1106+
```
1107+
pageMain1.html
1108+
```
1109+
<!--pageMain1-->
1110+
{{name}}
1111+
```
1112+
1113+
### 路由传参
1114+
1115+
我们在生成一个新的子控制器
1116+
```
1117+
.state('main.b', {
1118+
url: '/pageMain2/:id',
1119+
templateUrl: 'views/pageMain2.html',
1120+
controller: 'pageMain2Ctrl'
1121+
})
1122+
```
1123+
1124+
留意我们在url定义的路由中多了个`:id`，这样我们就可以在控制器之间传递参数
1125+
```
1126+
url: '/pageMain2/:id'
1127+
```
1128+
在控制器中我们注入$state服务
1129+
1130+
```
1131+
app.controller('pageMain2Ctrl', function($scope, $state) {
1132+
$scope.name = 'Hello Wscats Oaoafly'
1133+
console.log($state.params);
1134+
})
1135+
```
1136+
1137+
用`$state.params`就可以访问到路由上的参数
1138+
例如我们输入#/main/pageMain2/1，就会返回一个对象`Object {id: "1"}`
1139+
1140+
### 一个视图多个ui-view
1141+
1142+
当一个视图拥有多个ui-view,例如下面这样，平时我们一般一个视图只有一个`ui-view`的情况
1143+
```
1144+
<div ui-view name="first"></div>
1145+
<div ui-view name="second"></div>
1146+
```
1147+
1148+
当拥有多个这样的`ui-view`我们就要加上**name**属性，并绑定它到路由配置中的views属性，让子视图决定渲染到哪一个`ui-view`里面
1149+
1150+
```
1151+
.state('main.a', {
1152+
url: '/pageMain1',
1153+
views: {
1154+
"first": {
1155+
templateUrl: 'views/pageMain1.html',
1156+
controller: 'pageMain1Ctrl'
1157+
}
1158+
}
1159+
}).state('main.b', {
1160+
url: '/pageMain2/:id',
1161+
views: {
1162+
"first": {
1163+
templateUrl: 'views/pageMain2.html',
1164+
controller: 'pageMain2Ctrl'
1165+
}
1166+
}
1167+
}).state('main.c', {
1168+
url: '/pageMain3/:id',
1169+
views: {
1170+
"second": {
1171+
templateUrl: 'views/pageMain3.html',
1172+
controller: 'pageMain3Ctrl'
1173+
}
1174+
}
1175+
})
1176+
```
1177+

0 commit comments

Comments
 (0)