ngRoute包括的內容

?

ng的路由機制是靠ngRoute提供的，通過hash和history兩種方式實現了路由，可以檢測瀏覽器是否支持history來靈活調用相應的方式。ng的路由(ngRoute)是一個單獨的模塊，包含以下內容：

$routeProvider?服務用來定義一個路由表，即地址欄與視圖模板的映射

$routeParams?服務保存了地址欄中的參數，例如{id : 1, name : ‘tom’}

$route?服務完成路由匹配，并且提供路由相關的屬性訪問及事件，如訪問當前路由對應的controller

指令ngView用來在主視圖中指定加載子視圖的區域

以上內容再加上$location服務，我們就可以實現一個單頁面應用了。下面來看一下具體如何使用這些內容。

?

使用ng的路由機制

?

第一步：引入文件和依賴

ngRoute模塊包含在一個單獨的文件中，所以第一步需要在頁面上引入這個文件，如下：

?

<script src="http://only.showtop.com/js/1.2.5/angular.min.js"></script> <script src="http://only.showtp.com/js/1.2.5/angular-route.min.js"></script>

光引入還不夠，我們還需在模塊聲明中注入對ngRoute的依賴，如下：

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

?

完成了這些，我們就可以在模板或是controller中使用上面的服務和指令了。下面我們需要定義一個路由表。

第二步：定義路由表

$routeProvider 提供了定義路由表的服務，它有兩個核心方法，when(path,route) 和 otherwise(params)，先看一下核心中的核心 when(path,route) 方法。

when(path,route) 方法接收兩個參數，path 是一個string類型，表示該條路由規則所匹配的路徑，它將與地址欄的內容($location.path)值進行匹配。如果需要匹配參數，可以在path中使用冒號加名稱的方式，如：path為/show/:name，如果地址欄是/show/tom，那么參數name和所對應的值tom便會被保存在$routeParams中，像這樣：{name : tom}。我們也可以用*進行模糊匹配，如：/show*/:name將匹配/showInfo/tom。

route參數是一個object，用來指定當path匹配后所需的一系列配置項，包括以下內容：

?

controller?//function或string類型。在當前模板上執行的controller函數，生成新的scope
controllerAs?//string類型，為controller指定別名
template?//string或function類型，視圖所用的模板，這部分內容將被ngView引用
templateUrl?//string或function類型，當視圖模板為單獨的html文件或是使用了<script type=”text/ng-template”>定義模板時使用
resolve?//指定當前controller所依賴的其他模塊
redirectTo?//重定向的地址

最簡單情況，我們定義一個html文件為模板，并初始化一個指定的controller：

?

function emailRouteConfig($routeProvider){$routeProvider.when('/show', {controller: ShowController,templateUrl: 'show.html'}).when('/put/:name',{controller: PutController,templateUrl: 'put.html'}); };

?

?

otherwise(params)方法對應路徑匹配不到時的情況，這時候我們可以配置一個redirectTo參數，讓它重定向到404頁面或者是首頁。

第三步：在主視圖模板中指定加載子視圖的位置

我們的單頁面程序都是局部刷新的，那這個“局部”是哪里呢，這就輪到ngView出馬了，只需在模板中簡單的使用此指令，在哪里用，哪里就是“局部”。例如：

?

<div ng-view></div>

?

或者：

?

<ng-view></ng-view>

?

轉載于:https://www.cnblogs.com/leigood/p/5790588.html

總結

以上是生活随笔為你收集整理的夺命雷公狗—angularjs—19—angular-route的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。