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

初angularJs时  常写一些不够优雅的代码  !我总结了一下看看各位有没有中枪的!-----( 这里只针对服务service及其相关! )

以下做法不太优雅

  1. 兄弟controller 之间的相同的业务逻辑的实现 靠  从父 controller 通过继承实现.   ×
  2. 将大量的不必要的业务逻辑和持久化的数据  堆放在 $scope  和controller中.    ×
  3. ......

其实我们应该把业务逻辑和持久化的数据尽量放在service中

  从内存性能的角度来看,只有在需要controller的时候才去加载,一旦不需要就应该抛弃,每次刷新都应该清除controller

  而service 是个单例对象,只有在使用的时候才会被创建,在其生命周期内都有效(浏览器关闭之前).而且可以注入到不同controller中

  因此service 更适合存放持久化的数据和绝大部分的业务逻辑.

angular 中提供了三种创建服务的方式

  1. service
  2. factory
  3. provider

service  ---  实质是使用‘new‘进行了实例化 然后就可以在controller中调用service中this的方法和数据

var app = angular.module(‘myApp‘, []);
app.controller(‘rainCtrl‘, [‘$scope‘, ‘firstService‘,function($scope,firstService) {
    $scope.name = firstService.name;
}]);

app.service(‘firstService‘, function() {
    this.name = ‘rain_tdk‘;
})

但是一般人不会直接把数据暴露出来  一般应该是这个样子的

var app = angular.module(‘myApp‘, []);
app.controller(‘rainCtrl‘, [‘$scope‘, ‘firstService‘,function($scope,firstService) {
    $scope.name = firstService.getName();
}]);

app.service(‘firstService‘, function() {
    var name = ‘rain_tdk‘;
    this.getName = function(){
        return this.name = name;
    }
})

factory  ---  返回的一定是一个引用类型

var app = angular.module(‘myApp‘, []);
app.controller(‘rainCtrl‘, [‘$scope‘, ‘secondService‘,function($scope,secondService) {
    $scope.name = secondService.name;
}]);

app.factory(‘secondService‘, function(){
    return {
        name:"rain_tdk"
    }
})

provider

provider是唯一一个可以传.config()函数的service. 如果想在service对象启动之前,先进行模块范围的配置,就应该选择provide....

注意:在config函数 里注入 provide时 有特殊的命名规则: provideName+Provider,控制器中要调用的在$get中返回

优点: 可以在可以在Provide 对象传递到应用程序的其他controller 之前在.config()函数中对其进行修改

var app = angular.module(‘myApp‘, []);
app.controller(‘rainCtrl‘, [‘$scope‘, ‘thirdService‘, function($scope, thirdService) {
    $scope.name = thirdService.name;
}]);

app.config(function(thirdServiceProvider) {
    thirdServiceProvider.name = ‘rain_tdk2‘;
});

app.provider(‘thirdService‘, function() {
    this.name = ‘rain_tdk1‘;

    this.$get = function() {
        var _this = this;
        return {
            name: _this.name
        }
    }
})

现在看看源码

可以看出什么他们三个方法是一个德行的  哈哈哈哈...

小伞(rain_tdk)  技术有限...如果出现错误请大神指正.如有疑问也欢迎大家一起研讨...

时间: 2024-10-17 00:00:00

angularjs---服务(service / factory / provider)的相关文章

angular 服务 service factory provider constant value

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

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 则一旦路由发生变化 controll

AngularJS服务及注入--Provider

Provider简介 在AngularJS中,app中的大多数对象通过injector服务初始化和连接在一起. Injector创建两种类型的对象,service对象和特别对象. Service对象由开发者自定义api. 特别对象则遵照AngularJS框架特定的api,这些对象包括:controller, directive, filter or animation. 最详细最全面的是Provider,其他四种(Value, Factory, Service and Constant)只是在P

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> </

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 服务(Service)

AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http:

AngularJS服务总结

在之前介绍AngularJS的博客中,简单的介绍了AngularJS提供的常用服务,以及如何自定义服务,具体可参见<AngularJS 服务(Service)>.在这一篇博客中,我将为大家详细介绍如何自定义服务,以及各种方式之间的区别. value(name, object) value(name, object)方法允许我们直接将一个普通值或对象作为服务.我们通过一段代码来看看如何使用: <!DOCTYPE html> <html> <head> <

AngularJS学习之旅—AngularJS 服务(八)

1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. 注意 $location 服务是作为一个参数传递到 controller 中.如果要使用它,需要在 controller 中定义. var app = angular

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

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