AngularJS 路由与多视图.pdfVIP

AngularJS 路由与多视图 路由与多视图 在这⼀步中，你将学会如何通过使⽤被称为ngRoute的Angular模块添加路由，创建⼀ 个布局模 ，以及如何绑定⼀个具有多视图的应⽤。 当你导航到app/index .html上时，你将跳车 到app/index .html/#/phones，⽽且⼿机列表出现在浏览器中。 当你在⼿机链接上点击时，url变成特定的⼿机，出现了⼿机详情页。 把⼯作空间重置到第七步 git checkout -f step-7 刷新你的浏览器或在线检查这⼀步：Step 7 Live Demo 下⾯列出了第六步和第七步之间的区别。你可以在GitHub⾥看到完整的差异。 依赖性 这⼀步中添加路由功能是由 ngRoute模块中的angular提供的，它与核⼼的Angular框 架分离分布。 我们使⽤Bower 以安装客户端依赖性。这⼀步更新了bower.json配置⽂件，以包含 新的依赖性： { name angular-phonecat, description A starter project for AngularJS, version 0.0.0, homepage https ///angular/angular-phonecat, license MIT, private true, dependencies { angular 1.4 .x, angular-mocks 1.4 .x, jquery ~2.1.1, bootstrap ~3.1.1, angular-route 1.4 .x } } 新的依赖性angular-route 1.4 .x告诉bower要安装与v 1.4x兼容的angular- router组件版本。我们将告诉bower 以下载并安装该依赖性。 如果你已经全局安装了bower ，则你可以只对该项⽬运⾏bower install，我们已经 预配置了npm ，从⽽为我们运⾏bower安装： npm install 多个视图、路由和布局模板 我们的应⽤渐渐地完善，变得越来越复杂。在第七步之前，应⽤向我们⽤户提供了单 ⼀视图 （⼿机的列表），⽽且所有的模 代码都位于index .html⽂件中。构建应⽤ 的下⼀步是添加⼀个视图，这个视图将显⽰我们的列表中每款设备的详细信息。 要想添加详情视图，我们可以扩展index .html以包含两套视图的模 代码，但是那 将很快变得混乱。因此我们不⽤这种⽅法，⽽是把index .html变成 布局模 ” 。这 是⼀个模 ，常⽤于我们应⽤中的所有视图。然后别的 局部布局模 ”根据当前的 路 由”包含到这个布局模 中，从⽽形成⼀个完整视图展⽰给⽤户。 通过$routeProvider来声明Angular 中的应⽤程序路由，它是$route服务的提供者。这个 服务使接通控制器、视图模 以及浏览器中的当前位置变得容易。利⽤这个功能，我 们可以实现深链接，深链接让我们可以使⽤浏览器的历史 （回退和前进导航）以及书 签。 ⼀条关于DI、注⼊器和提供者的提醒 如你已注意到的，依赖性注⼊ （DI ）是AngularJS的核⼼，所以对它的⼯作原理略知⼀ ⼆是很重要的。 在应⽤程序引导中，Angular创建了⼀个注⼊器，注⼊器⽤来寻找并注⼊你的应⽤所需 要的所有的服务。注⼊器本⾝对$http或$route服务是做什么的⼀⽆所知。实际 上，注⼊器甚⾄不知道这些服务是否存在，除⾮⽤适当的模 定义对它进⾏配置。 注⼊器只在以下步骤中出场： 载⼊你在你的应⽤中指定的模块定义。 注册所有的在模块定义中定义的提供者。 当被要求做这的时候，注⼊⼀个指定的函数以及⼀些必要的依赖性 （服务）， 它通过它们的提供者来惰性实例化。 提供者是提供 （创建）服务实例并且对外提供配置API的对象，API可以⽤来控制⼀个 服务的创建和运⾏时⾏为。对于$route来说，$routeProvider对外提供API ，API 允许你定义针对你的应⽤程序的路由。 **注意：**只能够把提供者注⼊到`config` 函数中。因此你不能够把`$routeProvider`注 ⼊到`PhoneListCtrl` 中。 Angular模块解决了从应⽤程序中移除全局状态的问题，并提供配置注⼊器的⽅法。相 对于