AngularJS通過(guò)ng-route實(shí)現(xiàn)基本的路由功能實(shí)例詳解
本文實(shí)例講述了AngularJS通過(guò)ng-route實(shí)現(xiàn)基本的路由功能。分享給大家供大家參考，具體如下：
為什么需要前端路由~
（1）AJAX不會(huì)留下History歷史記錄
（2）用戶無(wú)法通過(guò)URL進(jìn)入應(yīng)用指定的頁(yè)面（書簽或者分享等）
（3）AJAX對(duì)于SEO是一個(gè)災(zāi)難
1.一般情況下，我們?cè)L問(wèn)網(wǎng)頁(yè)的時(shí)候，是通過(guò)url地址。
比如我們?cè)L問(wèn)一個(gè)網(wǎng)頁(yè):https://www.baidu.com/index/fix.html
在AngularJS中通過(guò)“#”來(lái)進(jìn)行不同頁(yè)面的路由，比如：
https://www.baidu.com/#/first，這個(gè)請(qǐng)求在向網(wǎng)頁(yè)端傳輸?shù)臅r(shí)候，服務(wù)器會(huì)自動(dòng)忽略#之后的內(nèi)容，因此可以根據(jù)#+標(biāo)記幫助我們區(qū)分不同的邏輯頁(yè)面并將不同的頁(yè)面綁定到對(duì)應(yīng)的控制器上。
這是一個(gè)簡(jiǎn)單的路由控制界面，根據(jù)鏈接中的#/first和#/second分別對(duì)應(yīng)跳轉(zhuǎn)到不同的頁(yè)面。
2.通過(guò)angularjs中的路由模塊，實(shí)現(xiàn)ng-route的步驟
（1）載入包含ng-route的JS文件
（2）包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊。
（3）使用原生指令ng-view
（4）我們?cè)趆tml中定義鏈接，可以實(shí)現(xiàn)一個(gè)單頁(yè)應(yīng)用，比如鏈接可以這樣定義：
<body> <ul> <li><a href="#/">首頁(yè)</a></li> <li><a href="#/first">第一頁(yè)面</a></li> <li><a href="#/second">第二頁(yè)面</a></li> <li><a href="#/third">第三頁(yè)面</a></li> </ul> <div ng-view></div> </body>
在js中的定義路由代碼為：
angular.module('myapp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{template:'這是首頁(yè)頁(yè)面'})
.when('/first',{template:'這是第一個(gè)頁(yè)面'})
.when('/second',{template:'這是第二個(gè)頁(yè)面'})
.when('/third',{template:'這是第三個(gè)頁(yè)面'})
.otherwise({redirectTo:'/'});
}]);
（6）我們來(lái)看效果，首次當(dāng)未有鏈接切換時(shí)候，默認(rèn)的跳轉(zhuǎn)到首頁(yè)，效果如下：
當(dāng)依次點(diǎn)擊鏈接時(shí)，會(huì)依次切換ng-view中的值，并且實(shí)現(xiàn)了ng-view內(nèi)內(nèi)容的替換~
I）初始效果
II）切換后的效果
我們發(fā)現(xiàn)改變的僅僅是#后的值，并沒(méi)有頁(yè)面的跳轉(zhuǎn)和刷新
3.angularJS中的路由設(shè)置對(duì)象
AngularJS 路由也可以通過(guò)不同的模板來(lái)實(shí)現(xiàn)。
$routeProvider.when 函數(shù)的第一個(gè)參數(shù)是 URL 或者 URL 正則規(guī)則，第二個(gè)參數(shù)為路由配置對(duì)象。
路由配置對(duì)象語(yǔ)法規(guī)則如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
參數(shù)解釋：
（1）template:
使用該概述，可以在template中寫入HTML內(nèi)容，典型的例子是：
when('/',{template:'這是首頁(yè)頁(yè)面'})
（2）templateUrl：
如果現(xiàn)在我們并不是要HTML內(nèi)容，而是需要一個(gè)模板文件來(lái)進(jìn)行整體替換，例子如下：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
（3）controller：function、string或數(shù)組類型，在當(dāng)前模板上執(zhí)行的controller函數(shù)，生成新的scope。
也可以對(duì)應(yīng)的是控制器的名稱。
（4）redirectTo：重定向的地址
（5）resolve：當(dāng)前控制器所依賴的其他模塊~
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
AngularJs解決跨域問(wèn)題案例詳解(簡(jiǎn)單方法)
本文通過(guò)一個(gè)案例給大家介紹angularJs解決跨域問(wèn)題，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
AngularJs Understanding the Controller Component
本文主要介紹AngularJs Understanding the Controller Component的內(nèi)容,這里整理了相關(guān)資料，及簡(jiǎn)單示例代碼，有興趣的小伙伴可以參考下2016-09-09
angularJs中ng-model-options設(shè)置數(shù)據(jù)同步的方法
今天小編就為大家分享一篇angularJs中ng-model-options設(shè)置數(shù)據(jù)同步的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Facade Service暴露commands簡(jiǎn)化代碼邏輯提高可訪問(wèn)性組合性
在 Angular 應(yīng)用開(kāi)發(fā)中,使用 Facade Service 暴露 commands（命令）以及訂閱這些 commands 是一個(gè)常見(jiàn)的設(shè)計(jì)模式,本文將詳細(xì)介紹在 Facade Service 中如何實(shí)現(xiàn)這一目標(biāo),并深入探討相關(guān)細(xì)節(jié),以及通過(guò)實(shí)際示例進(jìn)行說(shuō)明2023-10-10
本文主要介紹了AngularJS ng-if 指令,在這里整理了一些ng-if 指令的基礎(chǔ)資料,并有實(shí)例代碼,有需要的同學(xué)可以參考下2016-08-08
Angular使用$http.jsonp發(fā)送跨站請(qǐng)求的方法
這篇文章主要介紹了Angular使用$http.jsonp發(fā)送跨站請(qǐng)求的方法,結(jié)合實(shí)例形式分析了$http.jsonp發(fā)送跨站請(qǐng)求遇到的問(wèn)題與相應(yīng)的解決方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了angularJs的ng-class切換class,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要介紹了詳解Angular2響應(yīng)式表單，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
深入理解angular2啟動(dòng)項(xiàng)目步驟
本篇文章主要介紹了深入理解angular2啟動(dòng)步驟 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Angular5中調(diào)用第三方庫(kù)及jQuery的添加的方法
這篇文章主要介紹了Angular5中調(diào)用第三方庫(kù)及jQuery的添加的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06