10. 路由及多视图.pdfVIP

10. 路由与多视图 在这⼀步，你将学习如何创建⼀个布局模板并且通过路由功能来构建⼀个具有多个 图的应⽤。 请重置⼯作⽬录： git checkout -f step-7 注意到现在当你转到app/index .html时，你会被重定向 到app/index .html#/phones并且相同的⼿机列表在浏览器中显⽰了出来。当你点 击⼀个⼿机链接时，⼀个⼿机详细信息列表也被显⽰了出来。 步骤6和步骤7之间最重要的不同在下⾯列出。你可以在GitHub⾥看到完整的差别。 多视图，路由和布局模板 我们的应⽤正慢慢发展起来并且变得逐渐复杂。在步骤7之前，应⽤只给我们的⽤户 提供了⼀个简单的界⾯ （⼀张所有⼿机的列表），并且所有的模板代码位于 index .html⽂件中。下⼀步是增加⼀个能够显⽰我们列表中每⼀部⼿机详细信息的 页⾯。 为了增加详细信息 图，我们可以拓展index .html来同时包含两个 图的模板代 码，但是这样会很快给我们带来巨⼤的⿇烦。相反，我们要把index .html模板转变 成“布局模板” 。这是我们应⽤所有 图的通⽤模板。其他的“局部布局模板”随后根据 当前的“路由”被充填⼊，从⽽形成⼀个完整 图展⽰给⽤户。 AngularJS 中应⽤的路由通过$routeProvider来声明，它是$route服务的提供者。这项服 务使得控制器、 图模板与当前浏览器的URL可以轻易集成。应⽤这个特性我们就可 以实现深链接，它允许我们使⽤浏览器的历史( 回退或者前进导航)和书签。 关于依赖注⼊ （DI ），注⼊器 （Injector ）和服务提供者 （Providers） 正如从前⾯你学到的，依赖注⼊是AngularJS的核⼼特性，所以你必须要知道⼀点这家 伙是怎么⼯作的。 当应⽤引导时，AngularJS会创建⼀个注⼊器，我们应⽤后⾯所有依赖注⼊的服务都会 需要它。这个注⼊器⾃⼰并不知道$http和$route是⼲什么的，实际上除⾮它在模 块定义的时候被配置过，否则它根本都不知道这些服务的存在。注⼊器唯⼀的职责是 载⼊指定的服务模块，在这些模块中注册所有定义的服务提供者，并且当需要时给⼀ 个指定的函数注⼊依赖 （服务）。这些依赖通过它们的提供者“懒惰式” （需要时才加 载）实例化。 提供者是提供 （创建）服务实例并且对外提供API接⼜的对象，它可以被⽤来控制⼀ 个服务的创建和运⾏时⾏为。对于$route服务来说，$routeProvider对外提供了 API接⼜，通过API接⼜允许你为你的应⽤定义路由规则。 AngularJS模块解决了从应⽤中删除全局状态和提供⽅法来配置注⼊器这两个问题。和 AMD或者re uire.js这两个模块 （⾮AngularJS的两个库）不同的是，AngularJS模块 并没有试图去解决脚本加载顺序以及懒惰式脚本加载这样的问题。这些⽬标和 AngularJS要解决的问题毫⽆关联，所以这些模块完全可以共存来实现各⾃的⽬标。 App 模块 app j s app .j s angular.module(phonecat, []). config([$routeProvider, function($routeProvider) { $routeProvider. when(/phones, {templateUrl: partials/phone-list.html, when(/phones/ :phoneId, {templateUrl: partials/phone-detai otherwise({redirectTo: /phones}); }]); 为了给我们的应⽤配置路由，我们需要给应⽤创建⼀个模块。我们管这个模块叫 做phonecat，并且通过使⽤configAPI ，我们请求把$routeProvider注⼊到我 们的配置函数并且使⽤$routeProvider.whenAPI来定义我们的路由规则。 注意到在注⼊器配置阶段，提供者也可以同时被注⼊，但是⼀旦注⼊器被创建并且开 始创建服务实例的时候，他们就不再会被外界所获取到。 我们的路由规则定义如下 当URL 映射段为/phones时，⼿机列表 图会被显⽰出来。为了构造这个 图，AngularJS会使⽤phone-list.html模板和PhoneListCtrl控制器。 当URL 映射段为/phone