[学习笔记] 七步从AngularJS菜鸟到专家（7）：Routing [转]

这是＂AngularJS – 七步从菜鸟到专家＂系列的第七篇。

在第一篇，我们展示了如何开始搭建一个AngularaJS应用。在第四、五篇我们讨论了Angular内建的directives，上一篇了解了services的强大。

在这一章，我们来看几个前面没有机会细说的关键点，文章的最后会列举一些特别棒的学习资源链接和工具。

通过这整个系列的教程，我们会开发一个NPR（美国全国公共广播电台）广播的音频播放器，它能显示Morning Edition节目里现在播出的最新故事，并在我们的浏览器里播放。完成版的Demo可以看这里。

7. Routing

在单页面应用中，视图之间的跳转就显尤为重要的，随着应用越来越复杂，我们需要用一种方法来精确控制什么时候该呈现怎样的页面给用户。

咱们可以通过在主页面中引入不同的模板来支持不同页面的切换，但是这么做的缺点就是，越来越多的内嵌代码导致最后难以管理。

通过ng-include指令我们可以把很多的模板整合在视图中，但是我们有更好的方法来处理这种情况，我们可以把视图打散成layout和模板视图，然后根据用户访问的特定的URL来显示需要的视图

我们可以将这些“碎片”在一个布局模板中拼接起来

AngularJS通过在$routeProvider($route服务的提供者)上声明routes来实现上面的构想

使用$routeProvider，我们可以更好的利用浏览历史的API并且可以让用户可以把当前路径存成书签以方便以后的使用

在我们的应用中设定路由，我们需要做两件事情：第一，我们需要指出我们存放将要存放新页面内容的布局模板在哪里。比如，如果我们想在所有页面都配上header和footer，我们可以这样设计布局模板：


1

2

3

4

5

6

7

8

9

<header>

  <h1>Header</h1>

</header>

<div class="content">

  <div ng-view></div>

</div>

<footer>

  <h5>Footer</h5>

</footer>

ng-view指令将高速$routeProvider在哪里渲染模板

第二，我们需要配置我们的路由信息，我们将在应用中配置$routeProvider

$routeProvider提供了两种方法处理路由：when和otherwise。 方法when接收两个参数，第一个设置$location.path(). （直接用“//”也没有问题）

第二个参数是配置对象，这个可以包含不同的键，我们可以简单的说几个

controller


1

2

3

4

5

controller: ‘MyController‘

// or

controller: function($scope) {

  // ...

}

如果在配置对象中设置了controller属性，那这个controller会在route加载的时候实例化，这个属性可以是一个字符串(必须在module中注册过的controller)也可以是controller function

Template模板


1

template: ‘<div><h2>Route</h2></div>‘

如果我们在配置对象的template属性设置了值，那么模板就会被渲染到DOM中的ng-view处

templateUrl


1

templateUrl: ‘views/template_name.html‘

如果我们在配置对象的templateUrl属性中设置了值，AngularJS将通过XHR来获取该模板并把模板内容渲染到DOM中的ng-view处

值得注意的是：templateUrl属性跟其他AngularJS XHR请求的处理流程是一样的，也就是说，即使用户从这个页面离开，等他再回到这个页面，应用不会再去请求这个模板页面，因为$templateCache已经缓存了这个模板

添加一些路由


1

2

3

4

5

6

7

8

angular.module(‘myApp‘, []).

config([‘$routeProvider‘, function($routeProvider) {

  $routeProvider.when(‘/‘, {

    controller: ‘HomeController‘,

    template: ‘<h2>We are home</h2>‘

  })

  .otherwise({redirectTo: ‘/‘});

}]);

$routeProvider还可以处理URL里的传递的参数(比如，/people/42, 假设42是我们要找的people的id号) 只需要简单在字符串前加上 ‘:’,$routeProvider会尝试匹配URL中id并把id作为key在$routeParams服务中使用


1

2

3

4

$routeProvider.when(‘/person/:id‘, {

  controller: ‘PeopleController‘,

  template: ‘<div>Person show page: {{ name }}</div>‘

})

在PeopleController中，我们检索路由中指定的people的:id


1

2

3

4

5

app.controller(‘PeopleController‘, function($scope, $routeParams) {

  // We now have access to the $routeParams

  // At the route /person/42, our $routeParams will look like:

  // { id: 42 }

});

过滤器

在AngularJS的世界里，filter提供了一种格式化数据的方法，Angular也提供给我们了很多内建的过滤器，并且建立自定义过滤器也是相当的简单

在HTML的模板绑定{{}}中，我们使用 | 来调用过滤器，比如，我们想让字符串全部大写字符显示：


1

{{ name | uppercase }}

当然了，我们也可以在JavaScript中使用$filter服务来调用过滤器，还拿字符串大写来举例：


1

2

3

4

5

app.controller(‘DemoController‘, [‘$scope‘, ‘$filter‘,

  function($scope, $filter) {

    $scope.name = $filter(‘lowercase‘)(‘Ari‘);

}]);

如何传递参数到filter呢？只需要把参数放在filter之后，中间加个冒号（如果有多个参数要传递，在每个参数后加上冒号）比如，数字过滤器可以帮助我们限制数字的位数，如果想显示两位小数，加上number:2就可以了


1

{{ 123.456789 | number:2 }}

See it

123.46

我们可以同时使用N多过滤器，待会我们建立自定义的过滤器的时候就可以看到如何同时使用多个过滤器，在那之前我们继续来看几个Angular自带的过滤器

currency

Currency过滤器主要是把数字格式化成货币，意思就是123格式化以后就成了$123.00

Currency可以根据需要选择适当的货币符号。默认的是根据当前操作系统的locale来转换的

date

日期过滤器主要根据我们提供的格式化形式来格式化日期，他提供了很多内建的选项，如果没有指定格式，默认显示mediumDate形式

下面是一些自带的日期格式化形式，我们可以通过把不同的格式化选项组合使用来创建自定义的日期格式化形式

filter

filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组

比如，在客户端搜索时，我们可以快速的从数组中过滤出我们想要的结果

这个filter方法接收一个string，object，或者function参数用来选择/移除数组元素

If the first parameter passed in is a:
String 接收匹配这个字符串的元素，如果想排除某些字符串，在前面加上 ‘!’就行了
Object 如果只传入一个字符串，会作为这个对象的属性名称进行类似substring类似的匹配，如果想匹配所有属性，使用’$’作为键即可
Function 对数组中每个元素执行这个function，执行后得到的结果会放在一个新的数组中

You can also pass a second parameter into the filter method that will be used to determine if the expected value and the actual 你也可以传入第二个参数到filter方法中，他讲用于决定如果期望值和实际值是否考虑匹配的问题

If the second parameter passed in is:
true 执行严格的匹配比较（跟’angular.equals(expected,actual)一样）
false 执行大小写敏感的substring匹配
Function 执行function并接受一个元素，前提是这个function的返回结果是真

See it

isCapitalized函数如下：


1

2

$scope.isCapitalized =

  function(str) { return str[0] == str[0].toUpperCase(); }

json

json 过滤器接收JSON或者JavaScript对象，然后转换成字符串，这个功能在调试程序的时候非常有用！译者感受：妈妈再也不用担心我的debug，方便的令人发指

limitTo

limitTo过滤器会根据传递的参数值来生成新的数组或字符串，参数值为整数，从开头截取，参数为负值，从最后开始截取

如果限定值超过了字符串长度，返回整个数组或字符串

See it

lowercase

lowercase过滤器很明显，将整个字符串编程小写形式

See it

Lowercase string


1

{{ "San Francisco is often cloudy" | lowercase }}   san francisco is often cloudy

number

Number过滤器格式化文本成数字，可以接受参数（可选）来决定格式化后数字的位数

如果参数是非数字，将返回空字符串

See it

简单的数字格式化


1

{{ 1234567890 | number }}  1,234,567,890

格式化数字到一位小数


1

{{ 1.234567 | number:1 }}  1.2

orderBy

orderBy过滤器主要是根据给定的表达式对数组进行排序

orderBy函数可以接受两个参数：第一个是必须要提供的，第二个是可选参数

第一个参数决定了如何对数组进行排序

 如果传进来的第一个参数是：
function 将被用作这个对象的‘getter‘函数
string 字符串会被作为key来对数组元素进行排序，你也可以传进来 ‘+’ 或者‘-‘来决定是升序还是降序
array 使用这个数组里的元素作为排序表达式的判断依据，使用第一个不严格相等表达式的结果的元素作为其他元素的判断依据

The second parameter controls the sort order of the array (either reversed or not).

See it

根据人名排序

uppercase

Uppercase过滤器就是把整个字符串变成大写形式

See it


1

{{ "San Francisco is often cloudy" | uppercase }} SAN FRANCISCO IS OFTEN CLOUDY

创建自定义的过滤器

正如我们前面看到的，创建自定义过滤器相当简单，我们只要把他配置到我们的module下就可以了，让我们一起来创建一个首字母大写的过滤器吧

首先，我们创建一个module


1

2

3

4

angular.module(‘myApp.filters‘, [])

.filter(‘capitalize‘, function() {

  return function(input) {} 

});

Fliters其实就是一个function，接收input 字符串，我们可以函数里做一些错误检查


1

2

3

4

5

6

7

8

angular.module(‘myApp.filters‘, [])

.filter(‘capitalize‘, function() {

  return function(input) {

    // input will be ginger in the usage below

    if (input)

      return input[0].toUpperCase() + input.slice(1);

  } 

});

See it

还有一些话题是我们还没来得及讨论

在这个系列教程中，我们介绍了很多可以让你轻松上手AngularJS的知识点，当然了，还有很多要点没有机会谈到，都列在下面，希望以后有机会跟他家一起研究

  • Promises （可以让多个异步请求更加的有条理）
  • Building custom directives（自定义指令）
  • $resource service（$resource 服务，非常好用的一个服务，底层是调用了$http Service）
  • Unit testing(单元测试，这个尤为重要，甚至可以单拿出来讲很多，推荐jasmine)
  • End-to-end testing（同上）
  • Midway testing（介于前面两者的测试）
  • i18n and I10n language translation/localization（多语言）
  • Authentication and customizing XHR requests（验证和自定义XHR请求）
  • Using the $provide service to build customizable services（使用$provider服务来创建自定义服务）
  • Forms and validations（表单和验证）
  • IE compatibility（IE兼容性）

最后呢，如果你们喜欢我们的系列教程，刚好我们正在努力的创作一本书，这本书里论述上面列举的所有话题，更多的信息请访问ng-book.com

这里提供了ng-book的样章，免费的哦！只要留下你的email地址我们就会发送样章到你的收件箱

学习资源列表

关于AngularJS的更多，更深的知识请访问如下站点：

这里是一些有趣的Angular 程序供大家把玩

时间： 2024-08-02 21:46:30

[学习笔记] 七步从AngularJS菜鸟到专家（7）：Routing [转]的相关文章

[学习笔记] 七步从AngularJS菜鸟到专家（4和5）：指令和表达式 [转]

这一篇包含了＂AngularJS - 七步从菜鸟到专家＂系列的第四篇(指令)和第五篇(表达式). 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用.在这一部分,我们会厘清一些术语,然后深入探讨很多Angular.js提供的核心功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放它们.完成版的Demo可以看这里(http://www.ng-n

[学习笔记] 七步从AngularJS菜鸟到专家（6）：服务 [转]

这是＂AngularJS – 七步从菜鸟到专家＂系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们来讨论services,整理我们的代码并完成我们的音频播放器应用. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看看这里. 目前为止,我们把注意力都放在

七步从AngularJS菜鸟到专家（7）：Routing

这是＂AngularJS – 七步从菜鸟到专家＂系列的第七篇. 在第一篇,我们展示了如何開始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives.上一篇了解了services的强大. 在这一章.我们来看几个前面没有机会细说的关键点.文章的最后会列举一些特别棒的学习资源链接和工具. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里如今播出的最新故事,并在我们的浏览器里播放.完

七步从AngularJS菜鸟到专家（4和5）：指令和表达式

这一篇包含了＂AngularJS - 七步从菜鸟到专家＂系列的第四篇(指令)和第五篇(表达式). 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用.在这一部分,我们会厘清一些术语,然后深入探讨很多Angular.js提供的核心功能. 通 过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故 事,并在我们的浏览器里播放它们.完成版的Demo可以看这里(http://www.ng

七步从AngularJS菜鸟到专家（6）：服务

这是＂AngularJS – 七步从菜鸟到专家＂系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们来讨论services,整理我们的代码并完成我们的音频播放器应用. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看看这里. 目前为止,我们把注意力都放在

[学习笔记] 七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX [转]

这是＂AngularJS - 七步从菜鸟到专家＂系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看这里. 第三部分 数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立

第十七篇:博采众长--初探WDDM驱动学习笔记(七)

基于WDDM驱动的DirectX视频加速重定向框架设计与实现 现在的研究生的论文, 真正质量高的, 少之又少, 开题开得特别大, 动不动就要搞个大课题, 从绪论开始到真正自己所做的内容之间, 是东拼西凑地抄概念, 抄公式, 达到字数篇幅的要求, 而自己正真做了什么, 有哪些实际感受, 做出的内容, 相比前面的东拼西凑就几点内容, 之后就草草结束, 步入感谢的段落. 原因不光只有学生自己, 所谓的读研, 如果没有一个环境, 学生有再大的愿望, 再强的毅力, 到头来也只是空无奈. 有些导师要写书,

马哥学习笔记七——LAMP编译安装之MYSQL

1.准备数据存放的文件系统 新建一个逻辑卷,并将其挂载至特定目录即可.这里不再给出过程. 这里假设其逻辑卷的挂载目录为/mydata,而后需要创建/mydata/data目录做为mysql数据的存放目录. 2.新建用户以安全方式运行进程: # groupadd -r mysql # useradd -g mysql -r -s /sbin/nologin -M -d /mydata/data mysql # chown -R mysql:mysql /mydata/data 3.安装并初始化my

Lua学习笔记(七)：迭代器与泛型for

1.迭代器与闭包 迭代器是一种支持指针类型的结构,它可以遍历集合的每一个元素.在Lua中我们常常使用函数来描述迭代器,每次调用该函数就返回集合的下一个元素. 迭代器需要保留上一次成功调用的状态和下一次成功调用的状态,也就是他知道来自于哪里和将要前往哪里.闭包提供的机制可以很容易实现这个任务.记住:闭包是一个内部函数,它可以访问一个或者多个外部函数的外部局部变量.每次闭包的成功调用后这些外部局部变量都保存他们的值(状态).当然如果要创建一个闭包必须要创建其外部局部变量.所以一个典型的闭包的结构包含