路由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指令,否则失效

  1. $locationProvider.html5Mode(true)是用来开启html5模式因为只有在html5的情况下
    才支持js改url地址,否则只能在后面加上#/test/a却不能改变地址
  2. templateUrl可以是url的地址,或者是$templateCache的key,或者是script标签的id,
    如果是方法返回的也是地址字符串
  3. controller可以是一个控制器名称或者一个方法
  4. controllerAs设置控制器的别名
  5. template可以是是模板字符串,或者一个方法返回模板字符串,方法的参数为$routeParams
  6. redirectTo这个参数是跳转到其他的路由
  7. resolve可以在进入控制器前对参数进行修改或者判断(当调用$q.reject时就不会进入控制器)
  8. caseInsensitiveMatch设置路由的是否大小写不敏感，默认为敏感
  9. reloadOnSearch 判断当前location.hash和location.search改变是否重新更新路由,即地址栏上面是否有#test或者?a=test的改变，默认是重新更新路由
  10. 在控制器中可以或者$route和$routeParams,其中$route.current.params和$routeParams一样,$route还包含很多当前路由的信息
  11. otherwise是当没有匹配的路由时候成立

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

Ⅲ.AngularJS的点点滴滴-- 路由的更多相关文章

  1. Ⅳ.AngularJS的点点滴滴-- 服务

    服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...

  2. Ⅱ.AngularJS的点点滴滴--缓存

    模板缓存-$templateCache and 缓存工厂 $cacheFactory 1.使用script标签 <html ng-app> <script src="htt ...

  3. Ⅶ.AngularJS的点点滴滴-- 事件

    事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...

  4. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  5. AngularJS 的嵌套路由 UI-Router

    AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...

  6. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  7. 关于AngularJs中的路由学习总结

    AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由  通常我们的URL形式为http://jtjds ...

  8. [Angularjs]视图和路由（四）

    写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...

  9. [Angularjs]视图和路由（二）

    写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...

随机推荐

  1. Codeforces Round #198 (Div. 2) —— B

    B题是一个计算几何的题,虽然以前看过计算几何的ppt,但一直都没有写过: 昨晚比赛的时候本来想写的,但是怕不熟练浪费时间,太可惜了! 其实没必要选出一个最大的矩形: 以矩形的一条对角线为轴,向上或者向 ...

  2. IAR Embedded Workbench 破解方法+工具+授权文件

    转自IAR Embedded Workbench 破解方法+工具+授权文件 本文重点阐述了如何手动爆破 IAR EWARM 6.x以及生成License,目的一是和大家分享下,二是自己记录下过程,以便 ...

  3. Word Puzzles

    poj1204:http://poj.org/problem?id=1204 题意:给你n*m的字符串矩阵,然后p个查询,每个查询会给出一个字符串,然后问你在矩阵中能否通过8个方向搜索到这个字符串,输 ...

  4. [wikioi]奇怪的梦境

    http://wikioi.com/problem/2833/ 拓扑排序,居然1A,哈哈. #include <cstdio> #include <iostream> #inc ...

  5. 使用GO语言灵活批量ssh登录服务器执行操作

    摘要: 在工作中时常需要登录服务器做一系列操作,每次输入ssh xxx总是很麻烦.这时候为什么不考虑写一个通用的小脚本呢? go语言是一门新兴语言,能够在很多地方发挥总用.初学go语言,做了这么一个小 ...

  6. 关于在WIN32调用一些Zw系列的文件操作函数

    转自:http://blog.csdn.net/cooblily/archive/2007/10/27/1848037.aspx 都好久沒上來写文章了,都不知道做什么好,結果还是学写了一下用Nativ ...

  7. 《鸟哥的Linux私房菜》读书笔记三

    1.在Linux系统中,每个设备都被当成一个文件来对待,每个设备都会有设备文件名.比如 IDE接口的硬盘文件名为/dev/hd[a-d] 括号内的字母为a-d当中任意一个,即/dev/hda,/dev ...

  8. 17.1.2 Replication Formats

    17.1.2 Replication Formats 复制格式 17.1.2.1 Advantages and Disadvantages of Statement-Based and Row-Bas ...

  9. centos 6.4 大容量磁盘分区步骤

    首先安装分区工具 yum install parted 假设需要分区的设备为/dev/sdb 运行如下命令 parted /dev/sdb (parted) mklabel gpt #大于2TB的磁盘 ...

  10. HDU-1335 Basically Speaking

    http://acm.hdu.edu.cn/showproblem.php?pid=1335 Basically Speaking Time Limit: 2000/1000 MS (Java/Oth ...