发表于: 2017-06-21 20:39:54

1 772


今天完成的事情:

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的封装方法







返回列表 返回列表
评论

    分享到