簡(jiǎn)介
? ? ? ? angularJs自身提供路由ng-router,但是ng-router不是很好用,配置項(xiàng)零散，好比Vue提供的組件傳值一樣，雖然提供給你了用法，但是開(kāi)發(fā)過(guò)程中邏輯一多用著萌萌的，所以我們拋開(kāi)ng-router來(lái)看ui-router。
引入ui-router
? ? ? ? 我們可以去bootCDN搜索ui-router,本地創(chuàng)建js文件，將代碼copy進(jìn)去使用，這樣就可以打入本地使用了，但是要注意的是，Angular的main.js一定要在ui-router之前引用，注意一下先后順序問(wèn)題。
? ? ? ? 例如：
? ? ? ? ?<script src="angular.main.js"></script>?
? ? ? ? <script?src="angular-ui-router.js"></script>
配置ui-router
? ? //angular.module("moduleName",dep); 定義模塊依賴（兩個(gè)參數(shù)）
? ? //angular.module("moduleName"); 獲取模塊 （一個(gè)參數(shù)）
? ? var app = angular.module("myApp",["ui-router"]);
? ? app.config(["$stateProvider","$urlRouterProvider",function($stateProvider){
? ? ? ? ? ? //app.config配置項(xiàng)
? ? ? ? ? ? //$stateProvider 狀態(tài)供應(yīng)商，（名字可以看出關(guān)于路由的一系列配置需要由$stateProvider完成）
????????????//$urlRouterProvider 路由重定向
? ??????????$stateProvider.state("home",{
? ? ? ? ? ? ? ? url: "/home"
? ? ? ? ? ? ? ? template: "<h1>首頁(yè)</h1>"
????????????}) .state("about",{
? ??????????????????url: "/about"
? ? ? ? ? ? ? ? ????template: "關(guān)于我們"
????????????});
? ??????????$urlRouterProvider.otherwise("home")
????}])
頁(yè)面配置
? ? <div ui-view></div> ? ?//相當(dāng)于Vue中的插槽，單頁(yè)面應(yīng)用切換路由用來(lái)顯示當(dāng)前路由界面
? ? <a ui-sref="home">首頁(yè)</a> //Angular默認(rèn)會(huì)轉(zhuǎn)換為href
? ? <a ui-sref="about">關(guān)于我們</a>?//Angular默認(rèn)會(huì)轉(zhuǎn)換為href
路由激活狀態(tài)樣式
? ? ? ? ui-sref-active="active"
完整代碼
? ? <html ng-app="myApp">
? ? ? ? <head>
? ? ? ? ? ? ? ? <style>
? ? ? ? ? ? ? ? ? ? .active{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: red
????????????????????}
????????????????</style>
? ? ? ? ? ? ? ? <script src="angular.main.js"></script>
? ? ? ? ? ? ? ? <script?src="angular-ui-router.js"></script>
? ? ? ? </head>
? ? ? ? <body>
? ? ? ? ? ? <div ui-view></div>
? ? ? ? ? ? <footer>
? ? ? ? ? ? ? ? ? ? <a ui-sref="home" ?ui-sref-active="active">首頁(yè)</a>
? ? ? ? ? ? ? ? ? ? <a ui-sref="about" ?ui-sref-active="active">關(guān)于</a>
? ? ? ? ? ? ? ? ? ? <a ui-sref="items">商品</a>
????????????</footer>
????????</body>
? ? ? ? <script>
? ? ? ? ? ? ? ? var app = angular.module("myApp", [ui-router]); ? ? ? ? ? ? ? ? ? ? ? ?app.config(["$stateProvider","$urlRouterProvider",function($stateProvider){
? ??????$stateProvider.state("home",{
? ? ? ? ? ? ? ? url: "/home"
? ? ? ? ? ? ? ? template: "首頁(yè)"
????????????}) .state("about",{
? ??????????????????url: "/about"
? ? ? ? ? ? ? ? ????template: "關(guān)于我們"
????????????}).state("items",{//牛逼的潛逃路由
? ? ? ? ? ? ? ? ? ? url: "/items",
? ? ? ? ? ? ? ? ? ? templateUrl: "./items.html",
????????????????????controller:["$scope",$state,function($scope,$state){
? ? ? ? ? ? ? ? ? ? ? ? ? ? $scope.jump = function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $state.go("home");
????????????????????????????}
? ? ? ? ? ? ? ? ? ? ? ? ? ? $scope.jumpOther = function() {
? ??????????????????????????????$state.go("items.phone",{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? id: "phone"
????????????????????????????????????});
????????????????????????????}
????????????????????}]
????????????}).state("items.comp",{
? ? ? ? ? ? ? ? ? ? url: "/comp",
? ? ? ? ? ? ? ? ? ? template: "<h1>電腦商品</h1>"
????????????}).state("item.phone",{
? ? ? ? ? ? ? ? ? ? ? ? url:"phone/:id",
? ? ? ? ? ? ? ? ? ? ? ? template:"<h1>手機(jī)商品</h1>",
? ? ? ? ? ? ? ? ? ? ? ? controller:["$scope","$stateParams",function($scope,$stateParams){
? ? ? ? ? ? ? ? ? ? console.log($stateParams);
????????????????????????}]
????????????});
? ??????????$urlRouterProvider.otherwise("home")
? ?}
????????</script>
????</html>
嵌套路由頁(yè)面
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h1>商品展示</h1>
? ? ? ? ? ? ? ? ? ? <button ng-click="jump()">點(diǎn)擊跳轉(zhuǎn)首頁(yè)</button>
? ? ? ? ? ? ? ? ? ? <a ui-sref="about">跳轉(zhuǎn)至關(guān)于我們</a>
? ? ? ? ? ? ? ? ? ? <button ng-click="jumpOther()">穿參數(shù)</button>
? ? ? ? ? ? ? ? ? ? <a ui-sref="items.other({id:"sref"})"></a>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ?//因?yàn)槲覀兺饷娓讣?jí)路由是items所以自路由用items為前綴
? ? ? ? ? ? ? ? ? ? ? ? <li><a ui-sref="items.comp">電腦</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a ui-sref="items.phone">手機(jī)</a></li>
????????????????????</ul>
? ? ? ? ? ? ? ? ? ? <div ui-view></div>
????????????</div> ? ? ? ?
路由花費(fèi)了不少時(shí)間，有不對(duì)的地方希望大家多多提意見(jiàn)，博主會(huì)虛心學(xué)習(xí)，我相信技術(shù)會(huì)飛速成長(zhǎng)，謝謝各位
? ??????????????????????????????????????????????????不積跬步無(wú)以至千里,不積小流無(wú)以成江海?
