[AngularJS + cryptoJS + Gravatar] Provider vs factory

Configurable Bits Need a Provider

We want to be able to configure the characterLength before Tweetableruns. Refactor the Tweetable factory into a provider and expose asetLength() function that will allow us to set a characterLength in our app config.

angular.module(‘NoteWrangler‘)
.factory(‘Tweetable‘, [‘$http‘, function TweetableFactory($http) {
  var characterLength = 144;

  return function(potentialTweet) {
    return $http({
      method: ‘POST‘,
      url: ‘http://gentle-spire-1153.herokuapp.com/tweet‘,
      data: {
        description: potentialTweet,
        maxLength: characterLength
      }
    });
  };
}]);

Change the factory definition into a provider definition.

.provider(‘Tweetable‘, [‘$http‘, function TweetableProvider($http) {

Wrap the existing function returned by our TweetableProvider() function in a call to the $get() function required by providers. Don‘t forget to move the $http service injection!

angular.module(‘NoteWrangler‘)
.provider(‘Tweetable‘, [function TweetableProvider() {
  var characterLength = 144;
  this.$get = function($http){
    return function(potentialTweet) {
      return $http({
        method: ‘POST‘,
        url: ‘http://gentle-spire-1153.herokuapp.com/tweet‘,
        data: {
          description: potentialTweet,
          maxLength: characterLength
        }
      });
    };
  };
}]);

Create a setLength() function attached to the provider that sets thecharacterLength variable.

angular.module(‘NoteWrangler‘)
.provider(‘Tweetable‘, [function TweetableProvider() {
  var characterLength = 144;
  this.$get = function($http){
    return function(potentialTweet) {
      return $http({
        method: ‘POST‘,
        url: ‘http://gentle-spire-1153.herokuapp.com/tweet‘,
        data: {
          description: potentialTweet,
          maxLength: characterLength
        }
      });
    };
  };

  this.setLength = function(length){
      characterLength = length;
  };
}]);

Configuring the Tweet Length

Now that our provider is ready to go, let‘s call the setLength() method ofTweetableProvider to configure the acceptable maximum tweet length. Instead of 144 characters, we need to allow for a characterLength of 40.

Let‘s call config() on our NoteWrangler module and provide it an anonymous function.

Inject TweetableProvider into the config() function.

Call the setLength() function of TweetableProvider from within the config()function and pass it a value of 40.

angular.module(‘NoteWrangler‘, [‘ngRoute‘])
.config(function(TweetableProvider){
    TweetableProvider.setLength(40);
});

Link: https://code.google.com/p/crypto-js/

时间: 2024-08-06 12:00:04

[AngularJS + cryptoJS + Gravatar] Provider vs factory的相关文章

angularjs Service vs provider vs factory

稍后翻译. Services Syntax: module.service( 'serviceName', function ); Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService(). Factories Syntax: m

AngularJS注册和使用服务和常量(provider、factory、service、constant、value)

1.   简介 AngularJS采用MVC架构,提供了服务的注册和以依赖注入方式使用服务的机制.服务是功能(方法)和数据(常量)的抽象,比如系统中关于用户信息相关的功能(头像.昵称.签名.生日.性别等信息的获取与修改)抽象后集中在一个对象中,那么这个对象就可以视为一个服务.服务可以通过angular.Module(常以var app = angular.module('my-app',[])方式获取)和$provider(以依赖注入方式获取)对象注册,常以依赖注入的方式使用使用. 每个服务有一

AngularJS中的provider,factory,service方法

使用$provide中的provider方法定义服务 前面已经知道了module的定义为angular.module(name,[requires],configFn);configFn参数是配置服务的.ng供服务的过程涉及它的依赖注入机制.AngularJS是用$provider对象来实现自动依赖注入机制的.$provide.provider是一种定义服务的方法.注入机制通过调用provider的$get方法,把得到的对象作为参数进行相关的调用. <!DOCTYPE html> <ht

AngularJS中的Provider

我们要从Dependency Injection(依赖注入)的对象中获取的数据或者功能,都是Injector给的. Injector会创建两种对象:服务 或 专用对象 Injector要知道如何创建这些对象,就要用户自行去"注册". 有五种注册方法: Provider, Value, Factory, Service 和 Constant 构建Service 最强大的是Providor,其他方法只不过是Provider在某些条件下的简化版. 构建specialized objects

【5min+】 设计模式的迷惑?Provider vs Factory

系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net知识等等. 5min+不是超过5分钟的意思,"+"是知识的增加.so,它是让您花费5分钟以下的时间来提升您的知识储备量. 正文 一说起设计模式,大家应该都不会太陌生.毕竟在面向对象的世界中,我们需要用到各种奇技淫巧的手段来构建我们的应用,而设计模式就是这些技巧的根本.如果您曾参与过计算机职

深究AngularJS——自定义服务详解(factory、service、provider)

前言 3种创建自定义服务的方式. Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分层的作用,如果你是前端人员不了解什么是分层,那么你最好问问你后台的小伙伴. dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互数据的一层,在angularJS里就主要是写ajax的. service层:主查写逻辑代码的,但在angularJS里也可以持久化数据(充当数据容器),以

AngularJS中几种Providers(Factory, Service, Provider)的区别

原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? AngularJS docs 是这样定义provider的: provider是一个对象, 它有一个$get()方法. injector 调用$get方法以此来创建一个service的实例. Provider还有一些其他的方法用来配置provider. AngularJS 使用 $provide 注册新的pro

angularjs model.service vs provider vs factory?

<!DOCTYPE html> <html ng-app="app"> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </

AngularJS——自定义服务详解(factory、service、provider)

1. factory方式创建的服务,作用就是返回一个有属性有方法的对象.相当于:var f = myFactory(); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l