Ⅲ.AngularJS的点点滴滴-- 路由

路由ngRoute (需要依赖ngRoute模块)

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-route.js"></script>
<div ng-view></div>
<script type="text/ng-template" id="scripttemplae">
  scripttemplae value:{{value}}
</script>
<script>
  angular.module('app.ui', []).run(["$templateCache",
  function($templateCache) {
    $templateCache.put("template/index.html", 
      '<div><input type="text" ng-model="id">\
        <a href="/TEST/{{id}}.html">TEST/{{id}}.html</a>\
        <a href="/test/{{id}}.xml">test/{{id}}.xml</a>\
        <a href="/test/{{id}}.json?a=test">test/{{id}}.json?a=test</a>\
        <a href="/test/{{id}}.css">test/{{id}}.css</a>\
      </div>');
  }]);
  angular.module('app.route', ['ngRoute'])
  .config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider.when('/test/:id.xml', {
      templateUrl: 'scripttemplae',
      controllerAs:'a',
      controller: 'detail',
    }).when('/test/:id.html', {
      template: 'id:{{value}}',
      controller: 'detail',
      resolve: {
        idfilter: function($q, $route) {         
          if ($route.current.params.id.length < 2) {
            document.write('请输入长度大于2的字符串\
            <a href="/a.html">返回</a>');
            return $q.reject('sds');
          }
          $route.current.params.id+="add";
        }
      },
      caseInsensitiveMatch: true,
      reloadOnSearch: true
    }).when('/test/:id.css', {
      template: function(obj) {
        return "id:" + obj.id;
      },
      controller: 'a',
    }).when('/test/:id.json', {
      redirectTo: function(obj, path, search) {
        alert(search.a);
        return '/test/' + obj.id + '.html';
      }
    }).otherwise({
      templateUrl: 'template/index.html',
      controller: function($scope) {
        $scope.id = 2;
      }
    });
    $locationProvider.html5Mode(true);
  }]);
  angular.module('app', ['app.route', 'app.ui'])
  .controller('detail',
  function($scope, $route, $routeParams) {
    if ($routeParams.id == $route.current.params.id) {
      $scope.value = $routeParams.id;
    }
  });
  angular.bootstrap(document, ['app']);
</script>
</html>

上面基本上已经包含设置路由的全部写法，页面上面必须有个ng-view指令,否则失效

$locationProvider.html5Mode(true)是用来开启html5模式因为只有在html5的情况下才支持js改url地址,否则只能在后面加上#/test/a却不能改变地址

templateUrl可以是url的地址,或者是$templateCache的key,或者是script标签的id, 如果是方法返回的也是地址字符串

controller可以是一个控制器名称或者一个方法

controllerAs设置控制器的别名

template可以是是模板字符串,或者一个方法返回模板字符串,方法的参数为$routeParams

redirectTo这个参数是跳转到其他的路由

resolve可以在进入控制器前对参数进行修改或者判断(当调用$q.reject时就不会进入控制器)

caseInsensitiveMatch设置路由的是否大小写不敏感，默认为敏感

reloadOnSearch 判断当前location.hash和location.search改变是否重新更新路由,即地址栏上面是否有#test或者?a=test的改变，默认是重新更新路由

在控制器中可以或者$route和$routeParams,其中$route.current.params和$routeParams一样,$route还包含很多当前路由的信息

otherwise是当没有匹配的路由时候成立

其中路由的地址的匹配有三种/:id,/:id**,/:id?规则?和也就是正则的规范

posted @ 2013-11-26 17:49 cnljli 阅读(485) 评论(0) 编辑收藏举报

刷新页面返回顶部

cnljli

Ⅲ.AngularJS的点点滴滴-- 路由

路由ngRoute (需要依赖ngRoute模块)

公告