Angularjs1.x 中的 service,factory,provider,constant,value

了解 Angularjs1.x 中的 service,factory,provider,constant,value 的应用场景及区别

不管 service , factory 还是 provider 都属于 service

关于 service

service 一旦被定义后就可以在任何地方通过依赖的方式调用且可以保存数据,直到应用结束,比如

controller([‘service‘, function(service){}]);

而 controller 则一旦路由发生变化 controller 就会失效,下次打开页面就需要重新加载保存数据

factory

factory 是 angularjs 中创建 service 最简单的一个方法

创建 factory

通过使用 factory 我们只需要返回一个包含数据,方法的对象就可以了,如下

angular.module(‘MyApplication‘)
.factory(‘user‘, [‘$http‘, function($http){
    var loginUrl = ‘http://localhost/api/v1/login‘;
    return {
        login: function(username, password) {
            return $http.post(loginUrl, {
                username: username,
                password: password
            });
        },
    };
}]);

调用 factory

通过以下方式即可调用上述 service

angular.module(‘MyApplication‘)
.controller([‘$scope‘, ‘user‘, function($scope, user){
    user.login(‘name‘, ‘password‘).then(function(response){
        if(response.data.err_code == 0) {
            console.log(‘登录成功‘)
        } else {
            console.log(‘登录失败‘)
        }
    }, function(response){
        console.log(‘网络请求出错了‘, response)
    });
}]);

应用场景

在 service 中,如果我们仅仅需要的是一些方法或数据集合,则可以通过 factory 简单的创建一个 service 来满足需求

注:如果需要在 config 中配置 service 则不能使用 factory 来创建

service

创建 service

service 通过构造函数来创建 service,具体实现同 factory,示例如下

angular.module(‘MyApplication‘)
.service(‘user‘, [‘$http‘, function($http){
    var loginUrl = ‘http://localhost/api/v1/login‘;
    this.login: function(username, password) {
        return $http.post(loginUrl, {
            username: username,
            password: password
        });
    };
}]);

调用方式

其调用方式与 factory 同样

angular.module(‘MyApplication‘)
.controller([‘$scope‘, ‘user‘, function($scope, user){
    user.login(‘name‘, ‘password‘).then(function(response){
        if(response.data.err_code == 0) {
            console.log(‘登录成功‘)
        } else {
            console.log(‘登录失败‘)
        }
    }, function(response){
        console.log(‘网络请求出错了‘, response)
    });
}]);

应用场景

可以看到,这里的 login 使用了 this. 的方式来创建的,在此场景中可以写更多的业务逻辑来控制数据

注:如需在 config 中配置 service 的话,除了 factory 不能用之外, service 也不能用

provider

provider 是最底层的创建 service 的方法,可以在 config 中被调用和配置

创建 provider

创建 provider,与 factory、service 不同的是,provider 需要使用 this,$get 来返回方法和数据

angular.module(‘MyApplication‘)
.provider(‘user‘, [‘$http‘, function($http){
    this.loginUrl = ‘http://localhost/api/v1/login‘;
    this.setLoginUrl = function(url){
        this.loginUrl = url;
    }
    this.$get = function($http) {
        return {
            login: function(username, password) {
                return $http.post(this.loginUrl, {
                    username: username,
                    password: password
                });
            },
        };
    }
}]);

调用方式

与 factory、service 不同的是, provider 可以在 config 中调用,示例如

angular.module(‘MyApplication‘)
.config([‘user‘, function(user){
    user.setLoginUrl(‘http://localhost/api/v2/login‘);
}]);

普通调用则与 factory, service 的调用方式一样

应用场景

当需要通过配置指定特殊的数据源时就可以使用 provider 来实现,比如开发环境和生产环境的数据交互地址的域名可能不一致,就可以通过这种方式来实现

时间: 2024-12-19 19:56:54

Angularjs1.x 中的 service,factory,provider,constant,value的相关文章

angular 服务 service factory provider constant value

angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): 用于声明不会被修改的值. 变量(Value): 用于声明会被修改的值. 服务(Service): 这个名称跟服务这个大概念同名,就种行为就像是给自己孩子取名为"孩子".只需要创建这个服务,然后等angular把它new出来,保存这个服务,然后就可以到处注入了. 工厂(Factory): 

angularjs---服务(service / factory / provider)

初angularJs时  常写一些不够优雅的代码  !我总结了一下看看各位有没有中枪的!-----( 这里只针对服务service及其相关! ) 以下做法不太优雅 兄弟controller 之间的相同的业务逻辑的实现 靠  从父 controller 通过继承实现.   × 将大量的不必要的业务逻辑和持久化的数据  堆放在 $scope  和controller中.    × ...... 其实我们应该把业务逻辑和持久化的数据尽量放在service中 从内存性能的角度来看,只有在需要contro

angluar 区分service/factory/provider 的“hello world”版

var myApp = angular.module("myApp",[]); // controller 中引用 provider factory service 的时候,不需要添加后缀... myApp.controller("myController",function($scope,my,myFactory,myService){     $scope.hellos = [         my.sayHello(),         myFactory.s

[AngularJS系列(4)] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)(转)

用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄弟多!! 好吧...也许是我的问题,脑仁儿确实不够大,反正我是晕的直挠墙~ 那到底什么时候该请他们谁出场啊? 经过挠墙之后挠官网文档挠google挠源码挠例子试验,终于让我把他们的区别给挠出来了!(得意的笑--) 首先,provider, value, constant, service, fact

[转]angularjs的provider~ (Provider, Value, Constant, Service, Factory, Decorator)

用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄弟多!! 好吧...也许是我的问题,脑仁儿确实不够大,反正我是晕的直挠墙~ 那到底什么时候该请他们谁出场啊? 经过挠墙之后挠官网文档挠google挠源码挠例子试验,终于让我把他们的区别给挠出来了!(得意的笑--) 首先,provider, value, constant, service, fact

转载:[AngularJS系列] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)

来源:http://hellobug.github.io/blog/angularjs-providers/ 用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄弟多!! 好吧...也许是我的问题,脑仁儿确实不够大,反正我是晕的直挠墙~ 那到底什么时候该请他们谁出场啊? 经过挠墙之后挠官网文档挠google挠源码挠例子试验,终于让我把他们的区别给挠出

AngularJS 之 Factory vs Service vs Provider【转】

英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里.我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据.这就不是 controller 该干的事.出于内存性

AngularJS之Factory vs Service vs Provider

原文  http://www.linuxeden.com/html/news/20140509/151538.html 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里.我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据.这就不是 controll

AngularJS中serivce,factory,provider的区别

一.service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别.This is where we'll start the twenty-five days of Angular calendar. 二.service 在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就