美洲杯波胆_美洲杯波胆赔率
做最好的网站
来自 计算机教程 2019-08-30 13:18 的文章
当前位置: 美洲杯波胆 > 计算机教程 > 正文

AngularJS入门讲解3男篮世界杯波胆:$http服务和路

在这一步,你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。

上一课的例子中,我们的模型数据是硬编码的,也就是说,我们的数据不是从服务器请求回来的。

请重置工作目录:

这里,我们先讲解,如何从服务器获取数据:

git checkout -f step-7

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

注意到现在当你转到app/index.html时,你会被重定向到app/index.html#/phones并且相同的手机列表在浏览器中显示了出来。当你点击一个手机链接时,一个手机详细信息列表也被显示了出来。

  $scope.orderProp = 'age';
}

步骤6和步骤7之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。

上一课的例子,我们只需要改写这个控制器构造函数就行了。

多视图,路由和布局模板

$http向Web服务器发起一个HTTP GET请求,获取phone/phones.json。AngularJS会自动检测这个应答是什么格式的,并且帮我们解析出来!

我们的应用正慢慢发展起来并且变得逐渐复杂。在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代码位于index.html文件中。下一步是增加一个能够显示我们列表中每一部手机详细信息的页面。

为了使用AngularJS的服务,你只需要在控制器的构造函数里面传入所需服务的名字。

为了增加详细信息视图,我们可以拓展index.html来同时包含两个视图的模板代码,但是这样会很快给我们带来巨大的麻烦。相反,我们要把index.html模板转变成“布局模板”。这是我们应用所有视图的通用模板。其他的“局部布局模板”随后根据当前的“路由”被充填入,从而形成一个完整视图展示给用户。

当控制器构造的时候,AngularJS的依赖注入器会将这些服务注入到你的控制器中。

AngularJS中应用的路由通过$routeProvider来声明,它是$route服务的提供者。这项服务使得控制器、视图模板与当前浏览器的URL可以轻易集成。应用这个特性我们就可以实现深链接,它允许我们使用浏览器的历史(回退或者前进导航)和书签。

由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果你要压缩PhoneListCtrl控制器的JS代码,它所有的参数也同时会被压缩,这时候依赖注入系统就不能正确的识别出服务了。

关于依赖注入(DI),注入器(Injector)和服务提供者(Providers)

为了克服压缩引起的问题,只要在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组,就像:

正如从前面你学到的,依赖注入是AngularJS的核心特性,所以你必须要知道一点这家伙是怎么工作的。

PhoneListCtrl.$inject = ['$scope', '$http'];
另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器:把要注入的服务放到一个字符串数组(代表依赖的名字)里,数组最后一个元素是控制器的方法函数:

当应用引导时,AngularJS会创建一个注入器,我们应用后面所有依赖注入的服务都会需要它。这个注入器自己并不知道$http和$route是干什么的,实际上除非它在模块定义的时候被配置过,否则它根本都不知道这些服务的存在。注入器唯一的职责是载入指定的服务模块,在这些模块中注册所有定义的服务提供者,并且当需要时给一个指定的函数注入依赖(服务)。这些依赖通过它们的提供者“懒惰式”(需要时才加载)实例化。

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
上面提到的两种方法都能和AngularJS可注入的任何函数完美协作,要选哪一种方式完全取决于你们项目的编程风格,建议使用数组方式。

提供者是提供(创建)服务实例并且对外提供API接口的对象,它可以被用来控制一个服务的创建和运行时行为。对于$route服务来说,$routeProvider对外提供了API接口,通过API接口允许你为你的应用定义路由规则。

然后,我们为手机列表的手机数据项添加缩略图以及链接:

AngularJS模块解决了从应用中删除全局状态和提供方法来配置注入器这两个问题。和AMD或者require.js这两个模块(非AngularJS的两个库)不同的是,AngularJS模块并没有试图去解决脚本加载顺序以及懒惰式脚本加载这样的问题。这些目标和AngularJS要解决的问题毫无关联,所以这些模块完全可以共存来实现各自的目标。

[
  {
    ...
    "id": "motorola-defy-with-motoblur",
    "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
    "name": "Motorola DEFYu2122 with MOTOBLURu2122",
    ...
  },
  ...
]

App 模块

html改成这样:

app/js/app.js

...
<ul >
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" >
    <a >

angular.module('phonecat', []).
 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'});
}]);

      <img ng-src="{{phone.imageUrl}}">

为了给我们的应用配置路由,我们需要给应用创建一个模块。我们管这个模块叫做phonecat,并且通过使用configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

    </a>
    <a >{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
男篮世界杯波胆,   </li>
</ul>
...

注意到在注入器配置阶段,提供者也可以同时被注入,但是一旦注入器被创建并且开始创建服务实例的时候,他们就不再会被外界所获取到。

为每条记录添加图片,只需要使用ngSrc指令代替<img>的src属性标签就可以了。因为如果我们用一个正常src属性来进行绑定(<img src="{{phone.imageUrl}}">),浏览器会把AngularJS的{{ 表达式 }}标记直接进行字面解释,这时会发起一个向非法url:http://localhost:8000/app/{{phone.imageUrl}}的请求,因为浏览器载入页面时,同时也会请求载入图片。有了这个ngSrc指令,就会避免产生这种情况。

我们的路由规则定义如下

上面的应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代码位于index.html文件中。

当URL 映射段为/phones时,手机列表视图会被显示出来。为了构造这个视图,AngularJS会使用phone-list.html模板和PhoneListCtrl控制器。

最后,我们增加一个能够显示我们列表中每一部手机详细信息的页面。

当URL 映射段为/phone/:phoneId时,手机详细信息视图被显示出来。这里:phoneId是URL的变量部分。为了构造手机详细视图,AngularJS会使用phone-detail.html模板和PhoneDetailCtrl控制器。
我们重用之前创造过的PhoneListCtrl控制器,同时我们为手机详细视图添加一个新的PhoneDetailCtrl控制器,把它存放在app/js/controllers.js文件里。

为了增加详细信息视图,我们可以拓展index.html来同时包含两个视图的模板代码,但是这样会很快给我们带来巨大的麻烦。相反,我们要把index.html模板转变成“布局模板”。这是我们应用所有视图的通用模板。其他的“局部布局模板”,根据当前的“路由”被填入,从而形成一个完整视图展示给用户。

$route.otherwise({redirectTo: '/phones'})语句使得当浏览器地址不能匹配我们任何一个路由规则时,触发重定向到/phones。

AngularJS中的路由是通过$routeProvider来声明的,它是$route服务的提供者。这项服务使得控制器、视图模板与当前浏览器的URL可以轻易集成。它允许我们使用浏览器的历史(回退或者前进导航)和书签。

注意到在第二条路由声明中:phoneId参数的使用。$route服务使用路由声明/phones/:phoneId作为一个匹配当前URL的模板。所有以:符号声明的变量(此处变量为phones)都会被提取,然后存放在$routeParams对象中。

angular运行时,它会创建一个注入器,后面所有依赖注入的服务都会需要它。这个注入器自己并不知道$http$route是干什么的,注入器唯一的职责是载入指定的服务模块,在这些模块中注册所有定义的服务提供者,并且当需要时给一个指定的函数注入服务。这些服务通过它们的提供者“懒惰式”(需要时才加载)实例化。

为了让我们的应用引导我们新创建的模块,我们同时需要在ngApp指令的值上指明模块的名字:

提供者提供服务实例并且对外提供API接口的对象,它可以被用来控制一个服务的创建和运行。对于$route服务来说,$routeProvider对外提供了API接口,通过API接口允许你为你的应用程序定义路由规则。

app/index.html

为了给我们的应用配置路由,我们需要给应用创建一个模块。

<!doctype html>
<html lang="en" ng-app="phonecat">
...

angular.module('phonecat', []).
  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'});
  }]);

本文由美洲杯波胆发布于计算机教程,转载请注明出处:AngularJS入门讲解3男篮世界杯波胆:$http服务和路

关键词: