首页 > 代码库 > 路由模块angular-route

路由模块angular-route

2024-08-20 19:49:00   221人阅读

下载模块包
cnpm install angular-route --save

导包
<script src="http://www.mamicode.com/node_modules/angular-route/angular-route.js"></script>

基本使用
项目放到wamp www目录
http://localhost/automation/src/index.html#

 

路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。

 

  • 服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射
  • 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : ‘tom‘}

 

效果：

技术分享技术分享

<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>

 

某一类地址的情况

技术分享

//某一类地址 :匹配后面的值 ?这个位置可以省略
    $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：这个事件会在路由跳转前触发

$routeChangeSuccess：这个事件在路由跳转成功后触发

$routeChangeError：这个事件在路由跳转失败后触发

.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!");
        });
    })

 

路由模块angular-route


联系
我们