前端開發框架總結之Angular實用技巧（三）

阿新 • • 發佈：2018-11-12

前端開發框架總結之Angular實用技巧（三）

上文講了Angular中頁面重新整理和資料繫結的一些知識點，瞭解了這些之後讓你對頁面和js中的資料同步做到隨心所欲，解決各種頁面重新整理不出來，變數不生效等問題，同時你還可以利用自定義指令讓專案變得更加元件化、智慧化、簡單化。今天我們再來介紹下angular路由相關的知識。

angular路由

angular自帶的路由個人覺得不夠靈活，所有專案中一直使用的是angular-ui-router.js外掛。（外掛可自行去github上下載）

要使用路由外掛，需要在module中注入ui.router模組。

接下來是使用$stateProviderd進行路由的配置。主要包括路由的name，url，templateUrl,controller,params,resolve這幾個屬性。其中：name為路由的名稱，在路由跳轉的時候會用到。

url為路由的地址，這個對應瀏覽器位址列中顯示的url。

templateUrl為路由模板地址。這個是該路由會載入的頁面片段對應的html檔案路徑。

controller為改路由對應的控制器。

params為路由載入是附帶傳遞的引數。

resolve為返回的是一個key-value的物件，value是一個可以依賴注入的函式，函式的返回是一個promise，我們可以利用這個特性對頁面js進行懶載入。

js程式碼片段

      .state('home.detailS.built', {
            url: '/views/detailS/built',//服務管理-編譯管理
            templateUrl: 'views/service/service/built.html',
            controller: 'builtCtrl',
            params: {
                "serviceName": null
        	},
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        'script/controllers/service/service/detailS.js' + '?ver=' + 1508388363809
                    ]);
                }]//使用引數注入方式，避免壓縮後引數有問題
            }
        })

要進行路由的載入還需要在HTML頁面進行相應的配置。

示例程式碼如下：

<body ng-controller="indexCtrl">
    <div id="content" ui-view ></div>
</body>

路由會替換頁面中的ui-view部分的內容。

路由的跳轉方法如下：

$state.go(name, opt);

其中name是路由的名稱，opt是路由中所攜帶的引數。

預設路由的設定方式如下：

$urlRouterProvider.otherwise('/index/login');

路由的攔截方式如下：

app.run(['$transitions','$state',function($transitions,$state){
	$transitions.onBefore({},function(transition){
		var result = 1;
		if(result == 1){
            $state.go('login');
            transition.abort();
		}
		else if(result == 0){
			alert('沒有許可權!');
            transition.abort();
        }
	});
}]);

多級路由的實現方法是通過路由名稱的規則來實現的，舉個例子home.detailS.built的命名方式極為一個三級路由對應的是三個ui-view的巢狀。

多級路由主要是主要scope域的概念就不難理解了。想理解的更深入還需要大家親自動手配置一下才可以。

前端開發框架總結之Angular實用技巧（三）