深究AngularJS——ui-router详解
蒋丽君发表于 2017-03-27 02:36:24
1.配置使用ui-router
1.1导入js文件
需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"JS/angular.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"JS/angular-ui-router.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
1.2注入angular模块
<span class="hljs-reserved">var</span> app = angular.<span class="hljs-built_in">module</span>(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ui.router'</span>]);
注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图：
1.3定义视图
ui-view替代的是ngroute路由的ng-view。
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
1.4配置路由状态
app.config([<span class="hljs-string">"$stateProvider"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$stateProvider</span>)</span>{</span>
<span class="hljs-variable">$stateProvider</span>
.state(<span class="hljs-string">"home"</span>, { <span class="hljs-comment">//导航用的名字，如<a ui-sref="login">login</a>里的login</span>
url: <span class="hljs-string">'/'</span>, <span class="hljs-comment">//访问路径 </span>
template:<span class="hljs-string">'<div>模板内容......</div>'</span>
})
}]);
2.简单示例
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">title</span>></span>ui-router<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"pragma"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"no-cache"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"cache-control"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"no-cache"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"expires"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"0"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"keywords"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"keyword1,keyword2,keyword3"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"description"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"This is my page"</span>></span>
<span class="hljs-comment"><!-- 导入JS --></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"JS/angular.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"JS/angular-ui-router.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-app</span>=<span class="hljs-value">"myApp"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-comment"><!-- 视图 --></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-comment">//定义模板，并注入ui-router</span>
<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ui.router'</span>]);
<span class="hljs-comment">//对服务进行参数初始化，这里配stateProvider服务的视图控制</span>
app.config([<span class="hljs-string">"$stateProvider"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($stateProvider)</span> {</span>
$stateProvider
.state(<span class="hljs-string">"home"</span>, {
url: <span class="hljs-string">'/'</span>,
template:<span class="hljs-string">'<div>模板内容......</div>'</span>
})
}]);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
3.嵌套路由的实现
通过url参数的设置实现路由的嵌套（父路由与子路由通过”.“连接就形成了子路由）。嵌套路由可实现多层次的ui-view。
<span class="hljs-tag"><<span class="hljs-title">body</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-app</span>=<span class="hljs-value">"myApp"</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"parent"</span>></span>点我显示父view内容<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"parent.child"</span>></span>点我显示父view与子view内容<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-comment"><!-- 父View --></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ui.router'</span>]);
app.config([<span class="hljs-string">"$stateProvider"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($stateProvider)</span> {</span>
$stateProvider
.state(<span class="hljs-string">"parent"</span>, {<span class="hljs-comment">//父路由</span>
url: <span class="hljs-string">'/parent'</span>,
template:<span class="hljs-string">'<div>parent'</span>
+<span class="hljs-string">'<div ui-view><div>'</span><span class="hljs-comment">// 子View</span>
+<span class="hljs-string">'</div>'</span>
})
.state(<span class="hljs-string">"parent.child"</span>, {<span class="hljs-comment">//子路由</span>
url: <span class="hljs-string">'/child'</span>,
template:<span class="hljs-string">'<div>child</div>'</span>
})
}]);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
- 上面的是相对路径方式：
‘parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/parent/child。
若改成绝对路径方式，则需要在子url里加上^:
<span class="hljs-class">.state</span>("<span class="hljs-tag">parent</span><span class="hljs-class">.child</span>", <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">url</span>:<span class="hljs-value"> <span class="hljs-string">'^/child'</span>,
template:<span class="hljs-string">'<div>child</div>'</span>
</span></span></span>})此时，’parent’将匹配…./index.html#/parent； ‘parent.child’将匹配…./index.html#/child。
4. 通过views实现多视图
多个示图时，使用views属性。该属性里包含了哪些ui-view，则对应的template或templateUrl里的内容就会填充该ui-view。
同一个状态下有多个视图示例：
<span class="hljs-tag"><<span class="hljs-title">body</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-app</span>=<span class="hljs-value">"myApp"</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"index"</span>></span>点我显示index内容<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>=<span class="hljs-value">"header"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>=<span class="hljs-value">"nav"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>=<span class="hljs-value">"body"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ui.router'</span>]);
app.config([<span class="hljs-string">"$stateProvider"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($stateProvider)</span> {</span>
$stateProvider
.state(<span class="hljs-string">"index"</span>, {
url: <span class="hljs-string">'/index'</span>,
views:{
<span class="hljs-string">'header'</span>:{template:<span class="hljs-string">"<div>头部内容</div>"</span>},
<span class="hljs-string">'nav'</span>:{template:<span class="hljs-string">"<div>菜单内容</div>"</span>},
<span class="hljs-string">'body'</span>:{template:<span class="hljs-string">"<div>展示内容</div>"</span>}
}
})
}]);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
5.ui-view的定位
@的作用 是用来绝对定位view，即说明该ui-view属于哪个模板。如：’header@index’表示名为header的view属于index模板。绝对和相对路径的效果一样，请看如下代码：
<span class="hljs-tag"><<span class="hljs-title">body</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-app</span>=<span class="hljs-value">"myApp"</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"index"</span>></span>show index<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"index.content1"</span>></span>content111111<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"index.content2"</span>></span>content222222<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>=<span class="hljs-value">"index"</span>></span><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ui.router'</span>]);
app.config([<span class="hljs-string">"$stateProvider"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($stateProvider)</span> {</span>
$stateProvider
.state(<span class="hljs-string">"index"</span>, {
url: <span class="hljs-string">'/index'</span>,
views:{
<span class="hljs-string">'index'</span>:{template:<span class="hljs-string">"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"</span>},
<span class="hljs-comment">//这里必须要绝对定位</span>
<span class="hljs-string">'header@index'</span>:{template:<span class="hljs-string">"<div>头部内容header</div>"</span>},
<span class="hljs-string">'nav@index'</span>:{template:<span class="hljs-string">"<div>菜单内容nav</div>"</span>},
<span class="hljs-string">'body@index'</span>:{template:<span class="hljs-string">"<div>展示内容contents</div>"</span>}
}
})
<span class="hljs-comment">//绝对定位</span>
.state(<span class="hljs-string">"index.content1"</span>, {
url: <span class="hljs-string">'/content1'</span>,
views:{
<span class="hljs-string">'body@index'</span>:{template:<span class="hljs-string">"<div>content11111111111111111</div>"</span>}
<span class="hljs-comment">//'body@index'表时名为body的view使用index模板</span>
}
})
<span class="hljs-comment">//相对定位：该状态的里的名为body的ui-view为相对路径下的（即没有说明具体是哪个模板下的）</span>
.state(<span class="hljs-string">"index.content2"</span>, {
url: <span class="hljs-string">'/content2'</span>,
views:{
<span class="hljs-string">'body'</span>:{template:<span class="hljs-string">"<div>content2222222222222222222</div>"</span>}<span class="hljs-comment">//</span>
}
})
}]);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
- 由上面代码可知，相对定位不能找到的ui-view需要用@来绝对定位。
6.URL路由传参（通过$stateParams服务获取参数）
有url: '/index/:id',和url: '/index/{id}',两种形式传参
<span class="hljs-tag"><<span class="hljs-title">body</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-app</span>=<span class="hljs-value">"myApp"</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"index({id:30})"</span>></span>show index<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"test({username:'peter'})"</span>></span>show test<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ui.router'</span>]);
app.config([<span class="hljs-string">"$stateProvider"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($stateProvider)</span> {</span>
$stateProvider
.state(<span class="hljs-string">"home"</span>, {
url: <span class="hljs-string">'/'</span>,
template:<span class="hljs-string">"<div>homePage</div>"</span>
})
.state(<span class="hljs-string">"index"</span>, {
url: <span class="hljs-string">'/index/:id'</span>,
template:<span class="hljs-string">"<div>indexcontent</div>"</span>,
controller:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($stateParams)</span>{</span>
alert($stateParams.id)
}
})
.state(<span class="hljs-string">"test"</span>, {
url: <span class="hljs-string">'/test/:username'</span>,
template:<span class="hljs-string">"<div>testContent</div>"</span>,
controller:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($stateParams)</span>{</span>
alert($stateParams.username)
}
})
}]);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
7.Resolve（预载入）
参考资料：
使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。
预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。
如果传入的时字符串，angular-route会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。
<span class="hljs-tag"><<span class="hljs-title">body</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ng-app</span>=<span class="hljs-value">"myApp"</span> ></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">ui-sref</span>=<span class="hljs-value">"index"</span>></span>show index<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">ui-view</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ui.router'</span>]);
app.config([<span class="hljs-string">"$stateProvider"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($stateProvider)</span> {</span>
$stateProvider
.state(<span class="hljs-string">"home"</span>, {
url: <span class="hljs-string">'/'</span>,
template:<span class="hljs-string">"<div>homePage</div>"</span>
})
.state(<span class="hljs-string">"index"</span>, {
url: <span class="hljs-string">'/index/{id}'</span>,
template:<span class="hljs-string">"<div>indexcontent</div>"</span>,
resolve: {
<span class="hljs-comment">//这个函数的值会被直接返回，因为它不是数据保证</span>
user: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>
<span class="hljs-keyword">return</span> {
name: <span class="hljs-string">"peter"</span>,
email: <span class="hljs-string">"audiogroup@qq.com"</span>
}
},
<span class="hljs-comment">//这个函数为数据保证, 因此它将在控制器被实例化之前载入。</span>
detail: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($http)</span> {</span>
<span class="hljs-keyword">return</span> $http({
method: <span class="hljs-string">'JSONP'</span>,
url: <span class="hljs-string">'/current_details'</span>
});
},
<span class="hljs-comment">//前一个数据保证也可作为依赖注入到其他数据保证中！（这个非常实用）</span>
myId: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($http, detail)</span> {</span>
$http({
method: <span class="hljs-string">'GET'</span>,
url: <span class="hljs-string">'http://facebook.com/api/current_user'</span>,
params: {
email: currentDetails.data.emails[<span class="hljs-number">0</span>]
}
})
}
},
controller:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(user,detail,myId$scope)</span>{</span>
alert(user.name)
alert(user.email)
console.log(detail)
}
}) </span>
<span class="javascript"> }]); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>