路由模块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!");
        });
    })