angularJS-----路由的概念及用法

在開講之前，首先談談APP應用。平時我們用的app都是多頁面，通過大量的頁面之間的跳轉，來實現不同的功能的業務處理，切換起來就沒那麼流暢了。

在angular裏面，我們可以用路由進行切換。因爲在angular裏面，我們用戶一般在加載這樣的應用時，會整個的緩存在手機上。我們用路由進行切換時，不用再發起HTTP請求了。體驗比原來好。

什麼是路由？

1. 路由，就是網絡數據或者請求進行分發的一個網絡組件。
2. 路由就是一個用於請求URL分發和跳轉的一個應用組件，Angular中通過$routeProvider路由服務提供者進行核心的配置處理。
3. 路由是AngularJS構建單頁面應用的基礎。
   單頁面應用，也稱爲SPA，是singleton page application的縮寫。

SPA是什麼？

SPA通過路由功能，讓我們的WEB應用，在運行過程中，依託於某一個頁面模板進行業務處理，在SPA應用中，我們可以通過一個模板頁面和其他的業務頁面進行不同的路由組合來完成複雜和龐大的頁面邏輯和業務的處理！

ng路由

1. ng路由是AngularJS官方提供的一種簡單的路由操作。
2. ng路由主要分三個組成部分：路由指令、路由服務、路由服務提供者。

路由指令:ng-view

ngView指令主要用於將路由指向的頁面渲染到當前頁面的佈局中。

路由提供者:$routeProvider

1. 內置服務對象$routeProvider主要用於進行路由配置。
2. 該服務的使用必須依賴ngRoute模塊，也就是項目中必須添加animate-route.js。

var app=angular.module("myApp",["ngRoute"]);

內置服務<路由服務>:$route & $routeParams

1. $route服務被用於進行深層超鏈接信息的描述，它會監聽$location.url()地址並進行url地址和指定的路由視圖之間的映射關係。
2. $routeParams服務允許開發人員可以進行路由中參數的處理。

一般我們的路由結構是這樣的。

var app=angular.module("myApp",["ngRoute"]);
        app.config(["$routeProvider",function($routeProvider){
    $routeProvider
        .when("/",{
             templateUrl:"template/main.html"
        }).when("/login",{
             templateUrl:"template/login.html"
        }).when("/regist",{
             templateUrl:"template/regist.html" 
        }).otherwise("/");  
    }]);

在上述代碼中：

config()函數主要用於進行（配置信息）的添加。

$routeProvider：angularJS提供用於進行路由配置的內置服務。

when(path, route);用於在訪問path路徑時，跳轉到route指定的視圖。
　　path：路由跳轉的路徑
　　route：路由對象<組件對象>，一個JSON對象

ontherwise 就是當你路徑訪問錯誤時，找不到。最後跳到這個默認的 頁面。

一般在我們的index.html會有這麼的一段代碼：

<ul>
    <li><a href="#!/">主頁面</a></li>
    <li><a href="#!/login">登錄頁</a></li>
    <li><a href="#!/regist">註冊頁</a></li>
</ul>
<div ng-view></div>  //我們注入的某個模板

在AngularJS1.5之前，錨點連接用#/開頭，從Angular1.5開始，錨點連接用#！/開始。

$location 服務
AngularJS提供了一個服務用以解析地址欄中的URL，並讓你可以訪問應用當前路徑所對應的路由。它同樣提供了修改路徑和處理各種形式導航的能力。

　path() 用來獲取頁面當前的路徑：
　　$location.path(); // 返回當前路徑
　　
　　修改當前路徑並跳轉到應用中的另一個URL：
　　$location.path('/'); // 把路徑修改爲 ‘/’ 路由