AngularJS中路由總結
概述
先談談APP應用。平時我們用的app總是多頁面,如果用原生安卓或者蘋果,那當然很流暢啦。但是當我們用一般的html頁面做移動端,簡單時候我們可以用這樣的標籤去鏈接頁面時,速度還是可以的。
但是當我們的應用越來越多時,切換起來沒那麼流暢。又是礙於網速,頁面加載進來有點慢。但是在angular裏面,我們可以用路由進行切換。因爲在angular裏面,我們用戶一般在加載這樣的應用時,會整個的緩存在手機上。我們用路由進行切換時,不用再發起HTTP請求了。體驗比原來好。
爲什麼需要前端路由?
- ajax請求無法留下歷史記錄。
- 用戶無法直接通過url進入應用中的指定頁面(無法保存書籤、無法分享給好友)。
- ajax對seo是個災難(無法進行搜索引擎優化)。
前端路由的基本原理
- 哈希
- html5中新的history api
- 路由的核心是給應用定義“狀態”
- 使用路由機制會影響到應用的整體編碼方式(需要預先定義好狀態)
- 考慮兼容性與“優雅降級”
路由的主要功能
$routeProvider服務和ng-view實現
ng-view實現原理:根據路由的切換,動態編譯html模板
路由的結構1
angular.module('myApp', ['ngRoute'])
/*配置函數*/
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/day/:id', {
templateUrl: 'views/day.html',
controller: 'DayCtrl'
})
.otherwise({
redirectTo: '/'
});
})
config函數是一個配置函數,在使用$routeProvider這樣的一個服務。
when:代表當你訪問“/”根目錄的時候,去訪問templeteUrl中的那個模板
Controller:應用於根目錄這個模板時的controller
otherwise:當路徑訪問錯誤,找不到,默認跳轉到這個頁面。
路由的結構2(ui-router)
angular.module('app',[ui.router])
/*配置函數*/
.config(function($interpolateProvider,$stateProvider,$urlRouterProvider)){
$interpolateProvider.startSymbol('[:');
$interpolateProvider.startSymbol(':]');
/*配置路由*/
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url:'/home',
templeteUrl:'home.tpl'
})
/*當訪問“/”根目錄的時候,去訪問templeteUrl中的那個模板*/
.state('login',{
url:'/login',
templeteUrl:'login.tpl'
})
}
路由在html中的使用
方式1:引入單個
<header><h1>Header</h1></header>
<div class="content">
<div ng-view="home.tpl"></div>
</div>
<footer><h5>Footer</h5></footer
方式2:路由切換
<div class=page>
<div ng-view="home.tpl"></div>
</div>
<div class="tab">
<a ui-sref="home">首頁</a>
<a ui-sref="login">登錄</a>
</div>
注:可如下方式在html頁面中,創建templeteUrl模板
<script type="text/ng-template" id="login.tpl">
<div ng-controller="LoginController"></div>
</script>
<div ng-view></div>
這裏面呢。就是我們注入的某個模板(template) 例如:<div ng-view="tpl/abc.html”></div>
就相當於注入叫做abc.html的模板。ng-view這個指令優先級是1000的終極指令。就是說權限很高。
在注入這個abc.html的模板的時候。我們一般都用了路由設置,路由相當於一個遙控器。這個ng-view就是一部電視機。如果某個模板同當前的路由相關聯:
1 創建一個新的作用域;(用路由(遙控器)打開某個電視臺)
2 移除上一個視圖,同時上一個作用域也會被清除;(換臺,什麼都沒了)
3 將新的作用域同當前模板關聯在一起;(電視機播放新的電視臺)
4 如果路由中有相關的定義,那麼就把對應的控制器同當前作用域關聯起來;
5 觸發$viewContentLoaded事件;
6 如果提供了onload屬性,調用該屬性所指定的函數。
$location 服務
AngularJS提供了一個服務用以解析地址欄中的URL,並讓你可以訪問應用當前路徑所對應的路由。它同樣提供了修改路徑和處理各種形式導航的能力。我們一般比較常用的:
1.path()
path() 用來獲取頁面當前的路徑:
$location.path();
// 返回當前路徑
修改當前路徑並跳轉到應用中的另一個URL:
$location.path('/');
// 把路徑修改爲 ‘/’ 路由
2.replace()
如果你希望跳轉後用戶不能點擊後退按鈕(對於登錄之後的跳轉這種發生在某個跳轉之後的
再次跳轉很有用), AngularJS提供了replace() 方法來實現這個功能:
$location.path('/home');
$location.replace();
// 或者
$location.path('/home').replace();