Angular路由（三）

AngularJs ng-route路由詳解

其實主要是$routeProvider搭配ng-view實現。

ng-view的實現原理，基本就是根據路由的切換，動態編譯html模板。

前提

首先必須在頁面引入angular.js和angular-route，注意在angular-route以前引入angular

<script type="text/javascript" src="js/angular.min.js" ></script>

<script type="text/javascript" src="js/angular-route.js" ></script>

 

講解

route和ng-view要搭配使用。ng-view至關於提供了頁面模板的掛載點，當切換URL進行跳轉時，不一樣的頁面模板會放在ng-view所在的位置，而後須要routeProvider配置路由的映射。

通常經過兩個方法：

when（）:配置路徑和參數；

otherwise：配置其餘的路徑跳轉，能夠想成default。

說明一下when（）的第二個參數：{

controller:對應路徑的控制器函數，或者名稱。

template:對應路徑的頁面模板，會出如今ng-view處，好比「<div>###</div>」

templateUrl:對應模板的路徑，好比「src/xxxx.html」

}

說明一下otherwise的參數:

redirectTo:重定向地址

具體代碼以下：

控制器的代碼:

var app = angular.module("app",["ngRoute"]);

app.controller("ctrl",function($scope){
})

})

路由的代碼：

app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/aa",{ templateUrl:"view/aa.html", controller:"ctrl" }) .when("/bb",{ templateUrl:"view/bb.html" }) .otherwise({ redirectTo:"/aa" })}])