Ⅲ.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?规则?和也就是正则的规范

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

Ⅳ&period;AngularJS的点点滴滴-- 服务
服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...
Ⅱ&period;AngularJS的点点滴滴--缓存
模板缓存-$templateCache and 缓存工厂 $cacheFactory 1.使用script标签 <html ng-app> <script src="htt ...
Ⅶ&period;AngularJS的点点滴滴-- 事件
事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...
Ⅵ&period;AngularJS的点点滴滴-- 指令
指令基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...
AngularJS 的嵌套路由 UI-Router
AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...
AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
关于AngularJs中的路由学习总结
AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由通常我们的URL形式为http://jtjds ...
[Angularjs]视图和路由（四）
写在前面关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
[Angularjs]视图和路由（二）
写在前面上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...

随机推荐

SVG 2D入门10 - 滤镜
滤镜称得上是SVG最强大的功能了,它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效.这样你就很容易在客户端生成和修改图像了.而且滤镜并没有破坏原有文档的结构,所以维护性也很好. ...
CentOs6&period;5中安装和配置vsftp
一.vsftp安装篇复制代码代码如下: # 安装vsftpdyum -y install vsftpd# 启动service vsftpd start# 开启启动chkconfig vsftpd o ...
XtraForm默认皮肤的显示
1.新建一个XtraForm窗体 2.运行显示这个窗体,会发现没有任何变化,显示的还是winform的样式 3.在Program.cs文件的Main函数中添加 DevExpress.Skins.Ski ...
再次探讨C++的动态绑定和静态绑定
以前在学习C++的时候,对动态绑定和静态绑定的理解是:静态绑定是编译时决定的,非虚函数基本都是静态绑定:而动态绑定用于虚函数,是为了实现多态.这样理解没什么大的问题,但我一直疑惑的是,既然静态绑定可以 ...
NYOJ 16 矩形嵌套（动态规划）
矩形嵌套时间限制: 3000 ms | 内存限制: 65535 KB 难度: 4 描述有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅 ...
[2015-10-11]常用git命令
从vs2013开始,vs已经对git的操作提供了很好的支持,但是重度使用时还是会遇到很多抽风的时候,在此记录一些常用命令. 分支操作查看所有远程分支 git branch -r 查看本地分支 git ...
Cocos2D-ObjC&colon;在RPG游戏中混合Swift代码
我之前写过一个RPG游戏<<熊猫之魂 SoulOfPanda>> 编译器使用的是SpriteBuilder,很好很强大!全部代码都由Objc完成,现在想尝试一下在其中混入Swi ...
浅谈URL跳转与Webview安全
学习信息安全技术的过程中,用开阔的眼光看待安全问题会得到不同的结论. 在一次测试中我用Burpsuite搜索了关键词url找到了某处url,测试一下发现waf拦截了指向外域的请求,于是开始尝试绕过.第 ...
canvas抛物线运动轨迹
本来是想做一个贝塞尔曲线运动轨迹的公式太复杂了,懒得算,公式在最后我先画了一个抛物线,我确定了两个点,起点(0,0),终点(200,200) 用坐标系可算出方程 y=-0.005x^2 现在找出终 ...
onems设备管理系统（TR-069和OMA）
onems设备管理系统(TR-069和OMA) 沃克斯科技OneMS设备管理套件是一个全面的为服务提供商和企业提供自动配置和远程管理功能的设备管理解决方案.它利用现有的网络基础设施来自动化订购,预配置 ...