angular中的路由简单使用

程序员文章站 2022-04-04 15:20:40

...

　　在单页面应用程序中比如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>
  <!-- ng-view 渲染站位 -->
  <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#/，显示“当前为主页”。

angular中的路由简单使用

博客分类： AngularJS AngularJSroute
　　输入file:///C:/Users/bijian/Desktop/Angular%20route/app.html#/floor1/1，显示“当前为1楼”。