咱們可以通過在主頁面中引入不同的模板來支持不同頁面的切換,但是這么做的缺點就是,越來越多的內嵌代碼導致最后難以管理。
通過ng-include指令我們可以把很多的模板整合在視圖中,但是我們有更好的方法來處理這種情況,我們可以把視圖打散成layout和模板視圖,然后根據用戶訪問的特定的URL來顯示需要的視圖
我們可以將這些“碎片”在一個布局模板中拼接起來
AngularJS通過在$routeProvider($route服務的提供者)上聲明routes來實現上面的構想
使用$routeProvider,我們可以更好的利用瀏覽歷史的API并且可以讓用戶可以把當前路徑存成書簽以方便以后的使用
在我們的應用中設定路由,我們需要做兩件事情:第一,我們需要指出我們存放將要存放新頁面內容的布局模板在哪里。比如,如果我們想在所有頁面都配上header和footer,我們可以這樣設計布局模板:
ng-view指令將高速$routeProvider在哪里渲染模板
第二,我們需要配置我們的路由信息,我們將在應用中配置$routeProvider
$routeProvider提供了兩種方法處理路由:when和otherwise。 方法when接收兩個參數,第一個設置$location.path(). (直接用“//”也沒有問題)
定義
定義路由非常容易,在我們的應用mian模塊里面注入ngRoute依賴就可以了
現在,我們就可以給應用定義路由了。在路由模塊里面的.config()方法里面注入了$routeProvider,上面的代碼給我們演示了兩個用于定義路由的方法。
when()
when()方法有兩個參數,我們希望匹配的瀏覽器url和路由操作對象。一般main route經常使用“/”來表示,也可以定義URL參數,在controller里面就使用$routeParams獲取url參數。
templateUrl: 表示路由跳轉的view模板
controller: 控制器
otherwise()
otherwise()定義了當應用找不到指定路由的時候跳轉的路由
使用
定義好了路由需要怎么使用呢?我們要告訴angular頁面的哪一個部分是我們希望轉換的,這需要使用到ng-view指令
這樣就只有會被更新, header/footer都始終保持不變
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com