AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5_H5之家

正文

前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI.

1.切换工具目录 git checkout -f step-5 #切换分支 npm start #启动项目 2.什么是XHR和依赖注入(Dependency Injection)? 1)什么是XHR?

XHR是XMLHttpRequest的简称,XMLHttpRequest用于在后台与服务器交换数据,主要是为了实现在不重新加载整个网页的情况下，对网页的某部分进行更新。简单说,浏览器中URL不变,但页面中局部元素有改变.

XHR有两个方法open(method,url,async)和send(string);

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest对象如果要用于AJAX的话，其open() 方法的async参数必须设置为true,所以可以看得出来AJAX是XHR中的一种,只不过是异步加载数据.

2)什么是依赖注入(Dependency Injection)?

依赖注入(Dependency Injection)即控制反转(Inversion of Control),是软件工程领域的一种设计模式,主要用来解决代码的耦合问题，也是轻量级的Spring框架的核心.

简单说就是一段代码想共用,不想手工插入到指定位置,想注入进去,这里就可以使用DI(Dependency Injection).

其实现方式如下:

方式1 (基于接口): 可服务的对象需要实现一个专门的接口，该接口提供了一个对象，可以从用这个对象查找依赖(其它服务)。早期的容器Excalibur使用这种模式。方式2 (基于setter): 通过JavaBean的属性(setter方法)为可服务对象指定服务。HiveMind和Spring采用这种方式。方式3 (基于构造函数): 通过构造函数的参数为可服务对象指定服务。PicoContainer只使用这种方式。HiveMind和Spring也使用这种方式。

依赖注入在Java后台中用到的相对较多.

3.AngularJS中的XHR(AJAX)

angularjs中使用$http来发出请求,接受返回过来的数据.主要支持以下几种方法:

$http.get $http.head $http.post $http.put $http.delete $http.jsonp

用法示例:

$http.get('/someUrl').success(successCallback); $http.post('/someUrl', data).success(successCallback);

其中关于jsonp的方法要注意一下,其用法如下:

4.实例介绍:

app/index.html

Google Phone Gallery Search: Sort by: AlphabeticalNewest{{phone.name}}{{phone.snippet}} 数据源:

angular-phonecat/app/phones$ cat phones.json

[ { "age": 0, "id": "motorola-xoom-with-wi-fi", "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", "name": "Motorola XOOM\u2122 with Wi-Fi", "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)." }, { ...... } ]

数据源格式是如上面所述的json格式的数据,主要包括age,id,imageUrl,name,snippet5种属性;

Controller(控制器)

var phonecatApp = angular.module('phonecatApp',[]); phonecatApp.controller('PhoneListCtrl',function($scope, $http){ $http.get('phones/phones.json').success(function(data){ $scope.phones = data;}); $scope.orderProp ='age';});

很显示这里使用的是$http.get()方法去取的数据,跟jquery里面的get方法很类似(

$(selector).get(url,data,success(response,status,xhr),dataType)//这里jquery中的get方法

),本例中url为'phones/phones.json',如果返回数据成功,那么将返回会值赋给$scope.phones,同时$scope.orderProp的默认值赋给'age',默认按age的大小来排序.

其原理如下图所示:

'$'前缀命名

angularjs中对常用的方法,作用域等命名时一般会加上'$',所以自己在创建方法或service时最好不要加上'$',以免引起混淆.

压缩js代码产生的问题

因为AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称,所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了.

解决方法一:

function PhoneListCtrl($scope, $http) {...} PhoneListCtrl.$inject = ['$scope', '$http']; phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

使用$inject方法将要做的赋值赋进去.

解决方法二:

function PhoneListCtrl($scope, $http) {...} phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]); 4.效果

注:效果跟之前差不多,只不过是数据是动态加载的了,而不是写死的,而获取数据的方法就是$http.get().

5.测试 test/unit/controllersSpec.js amosli@amosli-pc:~/develop/angular-phonecat/test/unit$ cat controllersSpec.js 'use strict'; describe('PhoneCat controllers', function() { describe('PhoneListCtrl', function(){ var scope, ctrl, $httpBackend; beforeEach(module('phonecatApp')); beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) { $httpBackend = _$httpBackend_; $httpBackend.expectGET('phones/phones.json'). respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); scope = $rootScope.$new(); ctrl = $controller('PhoneListCtrl', {$scope: scope}); })); it('should create "phones" model with 2 phones fetched from xhr', function() { expect(scope.phones).toBeUndefined(); $httpBackend.flush(); expect(scope.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); }); it('should set the default value of orderProp model', function() { expect(scope.orderProp).toBe('age'); }); }); });

测试结果:

amosli@amosli-pc:~/develop/angular-phonecat$ npm run protractor ...... Finished in 5.241 seconds 2 tests, 5 assertions, 0 failures

注: