@@ -1045,3 +1045,133 @@ app.filter("过滤器名字",function("服务")){
1045
1045
}
1046
1046
` ` `
1047
1047
[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