AngularJS通過ng-route實現(xiàn)基本的路由功能實例詳解
本文實例講述了AngularJS通過ng-route實現(xiàn)基本的路由功能。分享給大家供大家參考，具體如下：
為什么需要前端路由~
（1）AJAX不會留下History歷史記錄
（2）用戶無法通過URL進入應用指定的頁面（書簽或者分享等）
（3）AJAX對于SEO是一個災難
1.一般情況下，我們訪問網(wǎng)頁的時候，是通過url地址。
比如我們訪問一個網(wǎng)頁:https://www.baidu.com/index/fix.html
在AngularJS中通過“#”來進行不同頁面的路由，比如：
https://www.baidu.com/#/first，這個請求在向網(wǎng)頁端傳輸?shù)臅r候，服務器會自動忽略#之后的內(nèi)容，因此可以根據(jù)#+標記幫助我們區(qū)分不同的邏輯頁面并將不同的頁面綁定到對應的控制器上。
這是一個簡單的路由控制界面，根據(jù)鏈接中的#/first和#/second分別對應跳轉(zhuǎn)到不同的頁面。
2.通過angularjs中的路由模塊，實現(xiàn)ng-route的步驟
（1）載入包含ng-route的JS文件
（2）包含了 ngRoute 模塊作為主應用模塊的依賴模塊。
（3）使用原生指令ng-view
（4）我們在html中定義鏈接，可以實現(xiàn)一個單頁應用，比如鏈接可以這樣定義：
<body> <ul> <li><a href="#/">首頁</a></li> <li><a href="#/first">第一頁面</a></li> <li><a href="#/second">第二頁面</a></li> <li><a href="#/third">第三頁面</a></li> </ul> <div ng-view></div> </body>
在js中的定義路由代碼為：
angular.module('myapp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{template:'這是首頁頁面'})
.when('/first',{template:'這是第一個頁面'})
.when('/second',{template:'這是第二個頁面'})
.when('/third',{template:'這是第三個頁面'})
.otherwise({redirectTo:'/'});
}]);
（6）我們來看效果，首次當未有鏈接切換時候，默認的跳轉(zhuǎn)到首頁，效果如下：
當依次點擊鏈接時，會依次切換ng-view中的值，并且實現(xiàn)了ng-view內(nèi)內(nèi)容的替換~
I）初始效果
II）切換后的效果
我們發(fā)現(xiàn)改變的僅僅是#后的值，并沒有頁面的跳轉(zhuǎn)和刷新
3.angularJS中的路由設置對象
AngularJS 路由也可以通過不同的模板來實現(xiàn)。
$routeProvider.when 函數(shù)的第一個參數(shù)是 URL 或者 URL 正則規(guī)則，第二個參數(shù)為路由配置對象。
路由配置對象語法規(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:'這是首頁頁面'})
（2）templateUrl：
如果現(xiàn)在我們并不是要HTML內(nèi)容，而是需要一個模板文件來進行整體替換，例子如下：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
（3）controller：function、string或數(shù)組類型，在當前模板上執(zhí)行的controller函數(shù)，生成新的scope。
也可以對應的是控制器的名稱。
（4）redirectTo：重定向的地址
（5）resolve：當前控制器所依賴的其他模塊~
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
這篇文章主要介紹了Angular HttpClient的源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了詳解AngularJS中的表格使用,作為熱門的JavaScript框架,AngularJS中提供的表格功能十分強大,需要的朋友可以參考下2015-06-06
本文通過一個案例給大家介紹angularJs解決跨域問題，非常具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
這篇文章主要介紹了Angularjs CURD 詳解及實例代碼的相關資料,需要的朋友可以參考下2016-09-09
本文主要介紹AngularJS簡單應用程序,這里提供了詳細的流程和代碼程序，有需要的小伙伴可以參考下2016-08-08
Angular入口組件（entry component）與聲明式組件的區(qū)別詳解
這篇文章主要給大家介紹了關于Angular入口組件（entry component）與聲明式組件的區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-04-04
這篇文章主要介紹了AngularJS入門教程之學習環(huán)境搭建,本教程將指導您完成一個簡單的應用程序創(chuàng)建過程,包括編寫和運行單元測試、不斷地測試應用,需要的朋友可以參考下2014-12-12
本文主要介紹AngularJs concepts，這里整理了詳細資料及簡單示例代碼來講解相關知識，有學習這部分知識的朋友可以參考下2016-09-09
本文主要介紹AngularJS ng-cut 指令,這里對ng-cut指令的基礎資料進行了整理,和詳細介紹,并附上代碼示例和實現(xiàn)效果圖,學習AngularJS 指令的朋友可以參考下2016-08-08
這篇文章主要介紹了Angular8 Http攔截器簡單使用教程，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08