路由模塊angular-route

時間 2019-11-09

原文原文鏈接

下載模塊包
cnpm install angular-route --savehtml

導包
<script src="../node_modules/angular-route/angular-route.js"></script>node

基本使用
項目放到wamp www目錄
http://localhost/automation/src/index.html#npm

路由功能是由 routeProvider服務和 ng-view 搭配實現，ng-view至關於提供了頁面模板的掛載點，當切換URL進行跳轉時，不一樣的頁面模板會放在ng-view所在的位置; 而後經過 routeProvider 配置路由的映射。app

服務$routeProvider用來定義一個路由表，即地址欄與視圖模板的映射
服務$routeParams保存了地址欄中的參數，例如{id : 1, name : 'tom'}

效果：ide

<body ng-app="myApp">
  
    <ul>
     <li><a href="#/a">a頁面</a></li>
     <li><a href="#/b">b頁面</a></li>
   </ul>
   <!-- 將操做結果放到這裏 -->
   <div ng-view></div>
 
<script>
    //在本身的模塊添加模塊依賴
    var app = angular.module('myApp', ['ngRoute']);
    
  //路由配置：
  //規則指的是 什麼樣的請求 找什麼控制器
  //[{templateUrl: '/', controller: 'appController'}]
  app.config(['$routeProvider',function($routeProvider) {
   
    $routeProvider
    .when('/a', {
      controller: 'aController',
      templateUrl: './views/a.html'
    })
    .when('/b', {
      controller: 'bController',
      templateUrl: './views/b.html'
    });

  }]);


  app.controller('aController', ['$scope', function($scope){
    $scope.title = "A控制器";
  }]);
  app.controller('bController', ['$scope', function($scope){
    $scope.title = "B控制器";
  }]);

</script>
</body>

 <!-- 模板 -->
<script id="template" type="text/ng-template">
  {{title}}
</script> 
<script>
  //在本身的模塊添加模塊依賴
  var app = angular.module('myApp', ['ngRoute']);
    
  //路由配置：
  //規則指的是 什麼樣的請求 找什麼控制器
  //[{templateUrl: '/', controller: 'appController'}]
  app.config(['$routeProvider',function($routeProvider) {
   
    $routeProvider
    .when('/a', {
      controller: 'aController',
      templateUrl: 'template'
    })
    .when('/b', {
      controller: 'bController',
      templateUrl: 'template'
    })
    //默認作什麼
    .otherwise({
      //跳轉默認頁
      redirectTo:'/a'
    });

  }]);


  app.controller('aController', ['$scope', function($scope){
    $scope.title = "A控制器";
  }]);
  app.controller('bController', ['$scope', function($scope){
    $scope.title = "B控制器";
  }]);

</script>
</body>

某一類地址的狀況url

//某一類地址 :匹配後面的值 ?這個位置能夠省略
    $routeProvider
    .when('/views/:name?', {
      controller: 'aController',
      templateUrl: 'template'
    })
    .when('/a', {
      controller: 'aController',
      templateUrl: 'template'
    })
    .when('/b', {
      controller: 'bController',
      templateUrl: 'template'
    })
    //默認作什麼
    .otherwise({
      //跳轉默認頁
      redirectTo:'/a'
    });

//路由配置：
  //規則指的是 什麼樣的請求 找什麼控制器
  //[{templateUrl: '/', controller: 'appController'}]
  app.config(['$routeProvider',function($routeProvider) {
   
   //某一類地址 :匹配後面的值 ?這個位置能夠省略
    $routeProvider
    .when('/views/:name?', {
      controller: 'aController',
      templateUrl: 'template'
    })
    .when('/a', {
      controller: 'aController',
      templateUrl: 'template'
    })
    .when('/b', {
      controller: 'bController',
      templateUrl: 'template'
    })
    //默認作什麼
    .otherwise({
      //跳轉默認頁
      redirectTo:'/a'
    });

  }]);

  //注入新對象 $routeParams
  app.controller('aController', ['$scope','$routeParams', function($scope, $routeParams){
    $scope.title = "我是"+$routeParams.name+"A控制器";
  }]);
  app.controller('bController', ['$scope', function($scope){
    $scope.title = "B控制器";
  }]);

路由有幾個經常使用的事件：

$routeChangeStart：這個事件會在路由跳轉前觸發spa

$routeChangeSuccess：這個事件在路由跳轉成功後觸發code

$routeChangeError：這個事件在路由跳轉失敗後觸發htm

.controller("myCtrl",function($scope,$location){

        $scope.$on("$viewContentLoaded",function(){
            console.log("ng-view content loaded!");
        });

        $scope.$on("$routeChangeStart",function(event,next,current){
            //event.preventDefault(); //cancel url change
            console.log("route change start!");
        });
    })