码迷,mamicode.com
首页 > 其他好文 > 详细

angular 路由的简单使用

时间:2017-06-21 21:14:00      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:text   请求   路由   ngroute   angular   使用   模块   csdn   ase   

html结构:

<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>
<!-- 引入angular包 -->
<script src=‘bower_components/angular/angular.js‘></script>
<!-- 引入angular-route包 -->
<script src=‘bower_components/angular-route/angular-route.js‘></script>
<!-- 下面是渲染模板 -->
<script id=‘tmpl‘ type=‘text/ng-template‘>
  <h1>{{placeholder}}</h1>
</script>

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: ‘/‘
      });
  }]);

angular 路由的简单使用

标签:text   请求   路由   ngroute   angular   使用   模块   csdn   ase   

原文地址:http://www.cnblogs.com/liangxiaoli/p/7061369.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!