angular中的路由简单使用

小灰灰 2022-04-06 10:54 240阅读 0赞

在单页面应用程序中比如angular应用，我们需要根据url的变化(即：不同的请求)，来分配不同的资源。根据请求的URL来决定执行哪个模块，这个过程叫路由，同时，我们需要设计路由规则。

下面给出一个简单的小demo：

<!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="UTF-8">  
        <title>angularJS路由</title>  
    </head>  
    <body ng-app='rootApp'>
      <ul>
        <li><a href='#/'>主页</a></li>
        <li><a href='#/floor1'>一楼</a></li>
        <li><a href='#/floor2'>二楼</a></li>
      </ul>
      
      <div ng-view></div>
    </body>
    
    <script id='tmpl' type='text/ng-template'>
      <h1>{
        {placeholder}}</h1>
    </script>
        <script src="jquery-1.8.3.js"></script> 
    	<script src="angular1.2.9.js"></script>
    	<script src='angular-route.min.js'></script>
        <script src="app.js"></script>
    </body>
    </html>

app.js

/* 此处定义模块，由于需要设定路由，所以要注入ngRoute */
    var rootApp = angular.module('rootApp', ['ngRoute']);
    /* 定义路由表（路由规则）*/
    rootApp.config(['$routeProvider', function($routeProvider) {
      /* $routeProvider 就相当于交通警察，根据when和otherwise指挥路由走向 */
      $routeProvider
        .when('/', {
          // 当请求的“URL” / , 找当前定义控制器和视图
          controller: 'DefaultController',
          /* template: '<h1>{
       {hello}}</h1>' */
          templateUrl: 'tmpl'
        })
        .when('/floor1/1', {
          controller: 'Floor1',
          templateUrl: 'tmpl'
        })
        /* 这里用:id这种形式来保存路由参数，以便后来用$routeParams可以取到 */
        .when('/floor2/:id/:name/:age', {
          controller: 'Floor2',
          templateUrl: 'tmpl'
        })
        .otherwise({
          /* 都不匹配，定向到根目录 */
          redirectTo: '/'
        });
    }]);
    
    // 定义相关控制器
    rootApp.controller('DefaultController', ['$scope', function($scope) {
      $scope.placeholder= '当前为主页';
    }]);
    rootApp.controller('Floor1', ['$scope', function($scope) {
      $scope.placeholder = '当前为1楼';
    }]);
    rootApp.controller('Floor2', ['$scope', '$routeParams', function($scope, $routeParams) {
      /* $routeParams 用于解析请求参数 */
      console.log($routeParams);
      $scope.placeholder= '当前为2楼';
    }]);

运行效果：

输入file:///C:/Users/bijian/Desktop/Angular%20route/app.html\#/，显示“当前为主页”。

![878711a5-e9da-3dc7-8d8b-6fc001d2bece.png][]  
　　输入file:///C:/Users/bijian/Desktop/Angular%20route/app.html\#/floor1/1，显示“当前为1楼”。

![528e8c1f-b3c4-3656-80ac-7c1db8d4f5f9.png][]  
　　输入file:///C:/Users/bijian/Desktop/Angular%20route/app.html\#/floor2/2/lisi/18，显示“当前为2楼”。

![2d279c47-3ee7-3daa-998d-e0a9a6597f75.png][]

**总结 **

angular中的路由需要使用它的ngRoute模块，具体使用方法如上所示，其中路由表的设计是通过模块配置$routeProvider的when和otherwise来处理不同的请求参数。

其中ng-view用于占坑，when中的template或者是templateUrl用于渲染控制层定义的数据，去填这个坑，其中路由参数是根据:parmName 来指定，通过$routeParams来解析参数。

文章来源：[http://blog.csdn.net/Tyro\_java/article/details/51532135][http_blog.csdn.net_Tyro_java_article_details_51532135]

[878711a5-e9da-3dc7-8d8b-6fc001d2bece.png]: /images/20220406/c4834f20a58f444ab86cb46384cf72d6.png
[528e8c1f-b3c4-3656-80ac-7c1db8d4f5f9.png]: /images/20220406/8ec5971fc805407da9b421df52b8e123.png
[2d279c47-3ee7-3daa-998d-e0a9a6597f75.png]: /images/20220406/2bff159fc579400f8fb65090477c366e.png
[http_blog.csdn.net_Tyro_java_article_details_51532135]: http://blog.csdn.net/Tyro_java/article/details/51532135