AngularJS 路由及SPA理解

時間 2019-11-10

原文原文鏈接

1、路由及SPA理解　　javascript

路由容許咱們經過不一樣的 URL 訪問不一樣的內容，可實現多視圖的單頁web應用（SPA）;一般咱們的URL形式爲 http://runoob.com/first/page，但在單頁Web應用(SPA)中 AngularJS 經過 # + 標記實現，例如：html

　　　　http://runoob.com/#/first
　　　　http://runoob.com/#/secondjava

　　以上兩個地址向服務器請求的都是http://runoob.com/ ，而＃號以後的內容在向服務器端請求時會被瀏覽器忽略掉，因此在客戶端要實現#號後面的功能。angularjs

　　簡單來講，路由經過# +標記幫助區分不一樣邏輯頁面，並將其綁定到對應的控制器上。每一個頁面均有一個控制器控制，經過路由，從而將不一樣的頁面展現出來。web

　　路由庫;官方是ngRoute,工程中經常使用的是第三方庫angular-ui-rotuer。瀏覽器

2、例子服務器

一、ngRouteapp

實現路由的大體步驟：ide

第一步：導入ngRoute模塊函數

第二步：在應用模塊中使用ngRoute

angular.module("routeApp", ["ngRoute"])

第三步：使用 ng-view 指令

第四步：配置 $routeProvider 路由規則

config(['$routeProvider', function ($routeProvider){
 $routeProvider
  .when('/home', {
   templateUrl : 'home.tpl.html',
   controller : 'HomeCtrl',
  })
  .when('/computer', {
   templateUrl : 'computer.html',
  })
  .when('/phone', {
   templateUrl : 'phone.html',
  })
  .when('/other', {
   templateUrl : 'other.tpl.html',
   controller : 'OtherCtrl',
  })
}])

第五步：經過超連接使用路由

<ul class="nav nav-tabs">
   <li><a href="#/home">首頁</a></li>
   <li><a href="#/computer">電腦</a></li>
   <li><a href="#/phone">手機</a></li>
   <li><a href="#/other">其餘</a></li>
  </ul>
  <div ng-view class="well" ng-controller='defaultCtrl'></div>

二、angular-ui-router(項目經常使用)

var app=angular.module("myapp",['ui.router']);//聲明angualrjs模塊，並把ui-router傳人angularjs模塊
app.config(function ($stateProvider, $urlRouterProvider) { //聲明把$stateprovider和$urlrouterprovider路由引擎做爲函數參數傳人,爲應用程序配置路由
     $urlRouterProvider.otherwise("/pagetable"); //路由默認跳轉路徑/pageTable
     $stateProvider    
        .state("pagetable", {
            url: "/pagetable",
            templateUrl: "pagetable.html"  //第一個顯示出來的頁面
        })
        .state("pagetable.page1", {
            url:"/page1",
            templateUrl: "page1.html" //
        })
        .state("pagetable.page2", {
            url:"/page2",
            templateUrl: "page2.html"
        })
        .state("pagetable.page3", {
            url:"/page3",
            templateUrl: "page3.html"
        });
});

　　pagetable.html

<!DOCTYPE html>
<div>
     <div>
         <span style="width:100px" ui-sref=".page1"><a href="">首頁</a></span>
         <span style="width:100px" ui-sref=".page2"><a href="">關於我</a></span>
         <span style="width:100px" ui-sref=".page3"><a href="">留言板</a></span>
     </div>
     <div>
          <div ui-view=""></div>  －－展現page1,page2,page3頁面的內容
     </div>
</div>

　　又如：

$stateProvider.state('name',{
    url:'/url',
    templateUrl:'path/to/template.html',
    controller:'SomeCtrl'
});

3、背後原理

　　監聽$locationChangeSuccess事件，它將在每次URL（包括#後邊的hash部分）發生變化時候觸發；

　　在這個事件中，將根據$routeProvider/$stateProvider中註冊的路由表中的url部分查閱路由對象。

　　{
    　　url:'/url',//經過它匹配
    　　templateUrl:'path/to/template.html',
    　　controller:'SomeCtrl'
　　}

　從而獲得兩個關鍵參數：templateUrl/controller。而後按照如下過程進行操做，

　　一、建立一個scope對象。

　　二、加載模板，藉助瀏覽器能力把它解析爲靜態DOM。

　　三、使用Controller對scope進行初始化，添加屬性和方法。

　　四、使用$compile服務把剛纔生成的DOM和scope關聯，變成一個Live DOM。

　　五、用這個Live DOM替換ng-view/ui-view的全部內容。

4、ui-view 定義

　　普通使用template會放在ui-view位置

<div ui-view></div>
$stateProvider.state("home",{
template: "<h1>hi</h1>"
})

　　或

$stateProvider.state("home"{
views: {
"": {
template: "<h1>hi</h1>"
}
}
})

　　帶名字ui-view

<div ui-view="main"></div>
$stateProvider.state("home",{
views: {
"main" : {
template: "<h1>hi</h1>"
}
}
})

　多個帶名字的ui-view

<div ui-view></div>
<div ui-view="data"></div>
$stateProvider.state("home",{
views: {
"":{template: "<h1>hi</h1>"},
"data": {template: "<div>data</div>"}
}
})

5、跳轉 ng-href $state.go ui-sref

一、$state.go

　　$state.go(to, [,toParams],[,options])
　　　　形參to是string類型，必須，使用"^"或"."表示相對路徑；
　　　　形參toParams可空，類型是對象；
　　　　形參options可空，類型是對象，字段包括：location爲bool類型默認true,inherit爲bool類型默認true, relative爲對象默認$state.$current,notify爲bool類型默認爲true, reload爲bool類型默認爲false

　　$state.go('photos.detail')
　　$state.go('^') 到上一級,好比從photo.detail到photo
　　$state.go('^.list') 到相鄰state,好比從photo.detail到photo.list
$state.go('^.detail.comment')到孫子級state，好比從photo.detail到photo.detial.comment

二、例子

　路由以下：

$stateProvider
   .state('page1', {
     url: '/page1',
     templateUrl: 'views/page1.htm',
     controller: 'page1Ctrl'
    })
    .state('page2', {
     url: '/page2/:type',參數
     templateUrl: 'views/page2.htm',
     controller: 'page2Ctrl'
    });

三種跳轉書寫方式

用ng-href跳轉的話，是這麼寫的：

ng-href="#/page1" rel="external nofollow"

ng-href="#/page2/1" rel="external nofollow"

用$state.go跳轉的話，是這麼寫的：

$state.go("page1");
$state.go("page2",{type:1});

用ui-sref跳轉的話，是這麼寫的：

ui-sref="page1"

ui-sref="page2({type:1})"

6、參數的傳遞獲取

一、在目標頁面規定接受的參數

.state('index-result', {  
     url: '/index-result',  
     params: { 'airline': null, 'category': null, 'menuTypes': null },  
     templateUrl: 'templates/index-result.html',  
     controller: 'ProductCtrl',  
})

二、傳參

　　var params = { airline: 1, category: 2, menuTypes: "3" };

　　$state.go("index-result", params);

　　或直接 $state.Go('index-result',{ airline: 1, category: 2, menuTypes: "3" });

三、目標頁面接受參數

　　控制器注入$stateParams來獲取數據

　　var airline = $stateParams.airline;

　　var category = $stateParams.category;

　　var menuTypes = $stateParams.menuTypes;

　　console.log(airline + "," + category + "," + menuTypes);

另外，還有種方式，參數直接定義在url中，如/:foodId

.state('fooddetail', {  
     url: '/fooddetail/:foodId',  
     templateUrl: 'templates/fooddetail.html',  
     controller: 'ProductDetailCtrl',  
})  
  
<li class="col-lg-3 col-md-3 col-sm-4 col-xs-12" ng-repeat="item in productList">  
    <a href="#/fooddetail/1001" class="box">  
    <div class="box-img"></a>  
</li>  
  
console.log($stateParams.foodId);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。