美文网首页一起学AngularJS
【一起学AngularJS】第九章、多视图和视图路由

【一起学AngularJS】第九章、多视图和视图路由

作者: 40ab6525bf35 | 来源:发表于2016-04-07 18:15 被阅读527次

本章我们将一起学习:

  • 如何创建一个布局模版
  • 如何如何创建一个多视图路由应用
  • 如何使用ngRoute指令实现视图路由

我们先看看本章对应的例子要做的事情是什么：

  • 当你点击导航栏导航到app/index.html时，你将被重定向到app/index.html/#/phones，它会显示手机列表。
  • 当你点击一个手机链接时，URL地址栏的地址变化（显然），新的页面将显示手机的一些信息。

【注解】本章需要一定Provider提供者的知识，可以先看本章教程，如果看完之后想系统学习下提供者、服务相关的知识，点击AngularJS服务体系查看。

下面我们把代码切换到step-7：

git checkout -f step-7

假设你已经运行了网站，你只需要刷新你的浏览器来看效果。或者你可以在线看效果。

相关依赖

我们通过ngRoute指令实现视图路由技术，它不属于Angular核心框架。
我们将使用Bower来安装客户端依赖。以下是新的bower.json内容：

{
  "name": "angular-phonecat",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-phonecat",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.4.x",
    "angular-mocks": "1.4.x",
    "jquery": "~2.2.1",
    "bootstrap": "~3.1.1",
    "angular-route": "1.4.x"
  }
}

"angular-route": "1.4.x" 这句话告诉bower安装1.4.x版本的Angular路由插件。我们需要保证路由插件的成功安装。
如果你已经全局安装了bower管理器，你可以通过bower install来安装所有的依赖。但是对于本项目来说，我们已经在npm脚本中配置了bower install的执行，所以我们只需要运行：

npm install

注意：如果你运行上述命令后，恰好一个新的Angular版本发布了，这时候，bower install命令可能会执行失败，因为新旧版本的AngularJS有冲突。如果你遇到了这个问题，你只需要删除你的app/bower_components文件夹，再次运行npm install。

多视图，路由技术和布局模版

我们的应用内容越来越丰富了。在本章之前，应用只有一个视图（手机列表），并且所有的模版代码都在index.html文件中。下面我们将为列表中的每一个手机添加一个详情视图。
我们可以直接把详情视图添加到inde.html中，但是这样做会让index.html变得特别大，看起来会很糟糕。所以我们换一种做法，我们将把index.html分解成布局模版。这个模版适用于本应用中的所有页面（注解：这和sitemesh、velocity、apache Tiles等服务端模版技术对应）。其他的局部模版将根据当前的路由被选择性的集成到当前模版中，从而最终呈现给用户。
Angular使用$routeProvider来申明应用应用路由，它是$route service的提供者。这个服务可以很容易的把控制器、视图模版和当前的URL地址绑定在一起。通过这个特性，我们可以实现deep linking，通过它我们可以利用浏览器的历史功能（往后和前进）以及书签功能。

探讨下依赖注入、注入器和提供者

依赖注入功能是AngularJS的核心功能，所以了解一点它的知识是有必要的。
当应用启动时，AngularJS将先创建一个注入器，它将寻找并且注入应用所需要的所有服务。注入器本身是不知道$http或者$route服务是干嘛的。实时上，注入器都不知道它们的存在，除非他们被依赖进来。
注入器只完成以下几个步骤：

  • 加载应用中指定的模块定义
  • 注册模块定义中所有的提供器（提供者）——配置阶段
  • 当需要的时候，注入服务或者提供者延迟初始化的依赖等。——运行阶段

提供者的功能为创建服务实例和暴露配置API，后者包括控制服务的创建和运行时行为。在$route服务中，$routeProvider暴露一些允许你定义路由的API。

注意：提供者只能在config函数里被注入。所以你无法把$routeProvider注入到PhoneListCtrl中。

Angular模块解决了移除应用全局状态的问题，并且提供了一个配置注入器的方式。跟AMD或者require.js不一样的是，Angular模块不会去解决脚本加载顺序或者延迟脚本获取的问题。这些目标是相互独立的，他们可以共同工作于一个系统中，各自完成自己的目标（意思就是AngularJS和AMD或者require.js框架可以公用）。
如果你想进一步了解Angular中的依赖注入，可以看看这里：理解依赖注入.

模版

$route指令通常和$ngView指令结合使用。$ngView指令所扮演的角色是把当前路由对应的视图模版加入布局模版中。所以这里使用它正好。

注意：从AngularJS 1.2起，ngRoute就是Angular的自有模块了，而且必须通过加载另外的angular-route.js文件来完成载入（由Bower下载）

app/index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>

  <div ng-view></div>

</body>
</html>

这段代码中，我们新增了两个<script>标签，它们是用来加载额外的Javascript的：

  • angular-route.js: 定义了Angular ngRoute模块，将提供我们路由操作。
  • app.js: 这个文件包含了我们的根模块。

可以注意到这个index.html模版中的大部分代码已经被移出了，取而代之的是一个含有ng-view属性的<div>标签。被移出去的部分我们重新放在了phone-list.html模版。
app/partials/phone-list.html:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      Search: <input ng-model="query">
      Sort by:
      <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
      </select>

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
          <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

同样的，我们也为手机详情视图创建一个占位模版：
app/partials/phone-detail.html:

TBD: detail view for <span>{{phoneId}}</span>

注意这里我们是如何使用phoneId（将在PhoneDetailCtrl控制器中被定义）表达式的。

本章我们将一起学习:

  • 如何创建一个布局模版
  • 如何如何创建一个多视图路由应用
  • 如何使用ngRoute指令实现视图路由

我们先看看本章对应的例子要做的事情是什么：

  • 当你点击导航栏导航到app/index.html时，你将被重定向到app/index.html/#/phones，它会显示手机列表。
  • 当你点击一个手机链接时，URL地址栏的地址变化（显然），新的页面将显示手机的一些信息。

下面我们把代码切换到step-7：

git checkout -f step-7

假设你已经运行了网站，你只需要刷新你的浏览器来看效果。或者你可以在线看效果。

相关依赖

我们通过ngRoute指令实现视图路由技术，它不属于Angular核心框架。
我们将使用Bower来安装客户端依赖。以下是新的bower.json内容：

{
  "name": "angular-phonecat",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-phonecat",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.4.x",
    "angular-mocks": "1.4.x",
    "jquery": "~2.2.1",
    "bootstrap": "~3.1.1",
    "angular-route": "1.4.x"
  }
}

"angular-route": "1.4.x" 这句话告诉bower安装1.4.x版本的Angular路由插件。我们需要保证路由插件的成功安装。
如果你已经全局安装了bower管理器，你可以通过bower install来安装所有的依赖。但是对于本项目来说，我们已经在npm脚本中配置了bower install的执行，所以我们只需要运行：

npm install

注意：如果你运行上述命令后，恰好一个新的Angular版本发布了，这时候，bower install命令可能会执行失败，因为新旧版本的AngularJS有冲突。如果你遇到了这个问题，你只需要删除你的app/bower_components文件夹，再次运行npm install。

多视图，路由技术和布局模版

我们的应用内容越来越丰富了。在本章之前，应用只有一个视图（手机列表），并且所有的模版代码都在index.html文件中。下面我们将为列表中的每一个手机添加一个详情视图。
我们可以直接把详情视图添加到inde.html中，但是这样做会让index.html变得特别大，看起来会很糟糕。所以我们换一种做法，我们将把index.html分解成布局模版。这个模版适用于本应用中的所有页面（注解：这和sitemesh、velocity、apache Tiles等服务端模版技术对应）。其他的局部模版将根据当前的路由被选择性的集成到当前模版中，从而最终呈现给用户。
Angular使用$routeProvider来申明应用应用路由，它是$route service的提供者。这个服务可以很容易的把控制器、视图模版和当前的URL地址绑定在一起。通过这个特性，我们可以实现deep linking，通过它我们可以利用浏览器的历史功能（往后和前进）以及书签功能。

探讨下依赖注入、注入器和提供者

依赖注入功能是AngularJS的核心功能，所以了解一点它的知识是有必要的。
当应用启动时，AngularJS将先创建一个注入器，它将寻找并且注入应用所需要的所有服务。注入器本身是不知道$http或者$route服务是干嘛的。实时上，注入器都不知道它们的存在，除非他们被依赖进来。
注入器只完成以下几个步骤：

  • 加载应用中指定的模块定义
  • 注册模块定义中所有的提供器（提供者）——配置阶段
  • 当需要的时候，注入服务或者提供者延迟初始化的依赖等。——运行阶段

提供者的功能为创建服务实例和暴露配置API，后者包括控制服务的创建和运行时行为。在$route服务中，$routeProvider暴露一些允许你定义路由的API。

注意：提供者只能在config函数里被注入。所以你无法把$routeProvider注入到PhoneListCtrl中。

Angular模块解决了移除应用全局状态的问题，并且提供了一个配置注入器的方式。跟AMD或者require.js不一样的是，Angular模块不会去解决脚本加载顺序或者延迟脚本获取的问题。这些目标是相互独立的，他们可以共同工作于一个系统中，各自完成自己的目标（意思就是AngularJS和AMD或者require.js框架可以公用）。
如果你想进一步了解Angular中的依赖注入，可以看看这里：理解依赖注入.

模版

$route指令通常和$ngView指令结合使用。$ngView指令所扮演的角色是把当前路由对应的视图模版加入布局模版中。所以这里使用它正好。

注意：从AngularJS 1.2起，ngRoute就是Angular的自有模块了，而且必须通过加载另外的angular-route.js文件来完成载入（由Bower下载）

app/index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
...
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>

  <div ng-view></div>

</body>
</html>

这段代码中，我们新增了两个<script>标签，它们是用来加载额外的Javascript的：

  • angular-route.js: 定义了Angular ngRoute模块，将提供我们路由操作。
  • app.js: 这个文件包含了我们的根模块。

可以注意到这个index.html模版中的大部分代码已经被移出了，取而代之的是一个含有ng-view属性的<div>标签。被移出去的部分我们重新放在了phone-list.html模版。
app/partials/phone-list.html:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      Search: <input ng-model="query">
      Sort by:
      <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
      </select>

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
          <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

同样的，我们也为手机详情视图创建一个占位模版：
app/partials/phone-detail.html:

TBD: detail view for <span>{{phoneId}}</span>

注意这里我们是如何使用phoneId（将在PhoneDetailCtrl控制器中被定义）表达式的。

应用模块

为了改善应用的组织结构，我们使用了Angular的ngRoute模块，并且我们把控制器移动到了它们自己的模块phonecatControllers（如下所示）：
app/js/app.js:

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);
...

我们把angular-route.js文件引入了index.html，并且在controllers.js中新建了一个phonecatControllers模块。然而这些该不足以让我们可以使用ngRoute模块和phonecatControllers模块。我们还需要把他们作为应用的依赖引入进来。像上述代码一样，我们把这两个模块引入本应用，这样我们就可以使用它们提供的指令和服务了。
注意上述代码中第二个参数“['ngRoute', 'phonecatControllers']”，是一个字符串数组，代表了phonecatApp的依赖。

...

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

通过phonecatApp.config()方法，我们把$routeProvider注入了配置函数，并且允许我们使用$routeProvider.when()方法来定义我们的路由。
我们的应用路由定义如下：

  • when('/phones')：当URL哈希片段值为/phones时，手机列表视图将会被展示。Angular将使用phone-list.html模版和PhoneListCtrl控制器来完成视图的展示。
  • when('/phones/:phoneId'): 当URL的哈希片段为/phones/:phoneId时，手机详情视图将被展示。其中，phoneId是URL中变化的部分。Angular将使用phone-detail.html模版和PhoneDetailCtrl控制器完成视图的展示。
  • otherwise({redirectTo: '/phones'}): 其他情况下，将跳转到手机列表页。

为了展示手机详情视图的展示，我们重用了前面几章中创建的PhoneListCtrl控件，并且添加了一个新的PhoneDetailCtrl控制器。这些改变都在app/js/controllers.js中。
我们来看看第二个路由申明中的:phoneId参数。$route服务通过/phones/:phoneId这样的路由申明来匹配当前的URL。:标记的变量值都会被抽取并且赋值给$routeParams对象。

控制器

app/js/controllers.js

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });

    $scope.orderProp = 'age';
  }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
  }]);

可以看到，我们又创建一个叫phonecatControllers的模块。对于小型的AngularJS应用来说，把所有的少量的控制器放在一个模块里时很常见的。但是当我们的应用越来越大，把代码整理到新的模块中去也是很常见的。对于大型的应用来说，你很可能为应用的每个较大的功能分别设计一个模块。
目前我们的应用还很小，所以都放在phonecatControllers模块中也是可以理解的。

测试

为了自动测试所有东西都被成功绑定了，我们需要写一些E2E（端到端）的测试用例来验证不通的URL可以得到正确的视图渲染。

...
   it('should redirect index.html to index.html#/phones', function() {
    browser.get('app/index.html');
    browser.getLocationAbsUrl().then(function(url) {
        expect(url).toEqual('/phones');
      });
  });

  describe('Phone list view', function() {
    beforeEach(function() {
      browser.get('app/index.html#/phones');
    });
...

  describe('Phone detail view', function() {

    beforeEach(function() {
      browser.get('app/index.html#/phones/nexus-s');
    });


    it('should display placeholder page with phoneId', function() {
      expect(element(by.binding('phoneId')).getText()).toBe('nexus-s');
    });
  });

然后通过npm run protractor命令来观察测试运行。

实验小能手

把{{orderProp}}数据绑定加入到index.html，你会发现什么都没变，在手机列表视图中也一样。这是因为orderProp模型的属于PhoneListCtrl域，对应绑定的HTML元素是<div ng-view>。如果你把它加入到phone-list.html模版中，就能正常工作了。

总结

我们已经实现了多视图和路由功能，下面一章我们将实现详细的手机详情视图。

相关文章

网友评论

  • 面试小集:同学，问一个问题，目前有一个使用angular做的单页webapp,现在需要在ios和android原生app中嵌套webapp的一个页面或者一个模块，比如，抽奖页面或者个人中心模块，问题是，每次加载页面或者模块的时候都会加载整合webapp，导致很慢，这个有什么好的解决办法吗？

本文标题：【一起学AngularJS】第九章、多视图和视图路由

本文链接：https://www.haomeiwen.com/subject/ugwmlttx.html

延伸阅读

深度阅读

  • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

栏目导航

热点阅读

一起学AngularJS

关于我们|服务条款|联系我们|【一起学AngularJS】第九章、多视图和视图路由|投稿指南|网站地图|RSS订阅|排版工具|手机版

提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！