发表于: 2017-06-21 20:39:54
1 771
今天完成的事情:
1.修改了学习小结的ppt,上午把小课堂简书等一些东西都弄完了。
2.学习了下angular封装的两个方式factory和service,以及它们之间的区别:
AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等。每个服务负责例如一个特定的任务,$http是用来创建AJAX调用,以获得服务器的数据。 $route用来定义路由信息等。内置的服务总是前缀$符号。
有两种方法来创建服务。
工厂
服务
使用工厂方法,我们先定义一个工厂,然后分配方法给它。
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
使用服务方法
使用服务的方法,我们定义了一个服务,然后分配方法。还注入已经可用的服务。
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
然后我在网上看到了一个说的很详细的文章:
AngularJS用$provide去定义一个供应商,这个$provide有5个用来创建供应商的方法:
constant
value
service
factory
provider
decorator
Constant
定义常量用的,这货定义的值当然就不能被改变,它可以被注入到任何地方,但是不能被装饰器(decorator)装饰
var app = angular.module('app', []);
app.config(function ($provide) {
$provide.constant('movieTitle', 'The Matrix');
});
app.controller('ctrl', function (movieTitle) {
expect(movieTitle).toEqual('The Matrix');
});
语法糖:
app.constant('movieTitle', 'The Matrix');
Service
它是一个可注入的构造器,在AngularJS中它是单例的,用它在Controller中通信或者共享数据都很合适
var app = angular.module('app' ,[]);
app.config(function ($provide) {
$provide.service('movie', function () {
this.title = 'The Matrix';
});
});
app.controller('ctrl', function (movie) {
expect(movie.title).toEqual('The Matrix');
});
语法糖:
app.service('movie', function () {
this.title = 'The Matrix';
});
Factory
它是一个可注入的function,它和service的区别就是:factory是普通function,而service是一个构造器(constructor),这样Angular在调用service时会用new关键字,而调用factory时只是调用普通的function,所以factory可以返回任何东西,而service可以不返回(可查阅new关键字的作用)
var app = angular.module('app', []);
app.config(function ($provide) {
$provide.factory('movie', function () {
return {
title: 'The Matrix'
}
});
});
app.controller('ctrl', function (movie) {
expect(movie.title).toEqual('The Matrix');
});
语法糖:
app.factory('movie', function () {
return {
title: 'The Matrix'
}
});
factory可以返回任何东西,它实际上是一个只有$get方法的provider
明天计划的事情:
完成代码的优化和封装
开始查看复盘的需求文档等等一些东西,做好复盘准备。
遇到的问题:
暂无
收获:
angular的封装方法
评论