一 认识服务
1.服务这个概念其实并不陌生,在其他语言中如java便有这样的概念,其作用就是对外提供某个特定的功能,如消息服务,文件压缩服务等,是一个独立的模块。ng的服务是一个单例对象或函数,对外提供特定的功能。
2.特点:首先是一个单例,即无论这个服务被注入到任何地方,对象始终只有一个实例。
其次这与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个模块中,所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。
3.ng提供了很多内置的服务,如$location,$scope,$rootScope,$http,$q,$resource,$routeProvider等等。我们在controller中直接声明$location服务,这依靠ng的依赖注入机制。$location提供地址栏相关的服务,我们在此只是简单的获取当前的地址。
服务的使用是如此简单,我们可以把服务注入到controller、指令或者是其他服务中。
二 定义服务
1.如同指令一样,系统内置的服务以$开头,我们也可以自己定义一个服务。定义服务的方式有如下几种:
使用系统内置的$provide服务
使用Module的factory方法
使用Module的service方法
2.举例:
//使用$provide来定义
var app = angular.module('MyApp', [], function($provide) {
    $provide.factory('remoteData', function() {
        var data = {name:'n',value:'v'};
        return data;
    });
});
 
//使用factory方法
app.factory('remoteData',function(){
    var data = {name:'n',value:'v'};
    return data;
});
 
//使用service方法
app.service('remoteData',function(){
    this.name = 'n';
    this.value = 'v';
});
Module的factory和$provide的factory方法是一模一样的 ,再看Module的service方法,它没有return任何东西,是因为service方法本身返回一个构造器,系统会自动使用new关键字来创建出一个对象。所以我们看到在构造器函数内可以使用this,这样调用该服务的地方便可以直接通过remoteData.name来访问数据了。比较常用的是factory方法。
举个例子
HTML部分:
<div ng-app="MyApp">
    <div ng-controller="testC2">
        <button ng-click="getData()">获取远程数据</button>
    </div>
</div>
JS部分:
var app = angular.module('MyApp', []);
app.controller('testC2',function($scope,remoteData){
    $scope.getData = function(){
        alert('name:'+remoteData.name+'   value:'+remoteData.value);
    }
});
 
app.factory('remoteData',function(){
    var data = {name:'n',value:'v'};
    return data;
});
三 服务中的依赖关系
1.服务与服务中间可以有依赖关系,例如我们这里定义一个名为validate的服务,它的作用是验证数据是否合法,它需要依赖我们从远程获取数据的服务remoteData。
HTML部分:
<div ng-app="MyApp">
    <div ng-controller="testC3">
        <button ng-click="validateData()">验证数据</button>
    </div>
</div>
JS部分:
var app = angular.module('MyApp', []);
app.controller('testC3',function($scope,validate){
    $scope.validateData = validate;
});
 
app.factory('remoteData',function(){
    var data = {name:'n',value:'v'};
    return data;
});
 
app.factory('validate',function(remoteData){
    return function(){
        if(remoteData.name=='n'){
            alert('验证通过');
        }
    };
});
2.在factory的参数中,我们可以直接传入服务remoteData,ng的依赖注入机制便帮我们做好了其他工作。不过一定要保证这个参数的名称与服务名称一致,ng是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明一下,方式如下:
app.factory('validate',['remoteData',function(remoteDataService){
    return function(){
        if(remoteDataService.name=='n'){
            alert('验证通过');
        }
    };
}]);
controller中注入服务也是同样的道理,使用的名称需要与服务名称一致才可以正确注入,这里有两种方法:
法一:与上面的类似
app.controller('testC',['$scope','remoteData',function($scope,rd){
    $scope.getData = function(){
        alert('name:'+rd.name+'   value:'+rd.value);
    }
}]);
法二:使用$inject手动指定注入的服务
function testC(scope,rd){
    scope.getData = function(){
        alert('name:'+rd.name+'   value:'+rd.value);
    }
}
testC.$inject = ['$scope','remoteData'];

angularJS服务一的更多相关文章

  1. 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

  2. 聊一聊 AngularJS 服务

    什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 为什么使用服务? 在很多服务中,比如 $loca ...

  3. 前端MVC学习笔记(三)——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

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

    1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 Angular ...

  5. AngularJS 1.x系列:AngularJS服务-Service、Factory、Provider、Value及Constant(5)

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  6. AngularJS 1.x系列:AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  7. 18.angularJS服务

    转自:https://www.cnblogs.com/best/tag/Angular/ 服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可 ...

  8. Angularjs 服务注册

    $injector: (When you request a service, the $injector is responsible for finding the correct service ...

  9. AngularJS服务

    在使用AngularJS的路由管理和控制视图加载的时候,当新的视图加载进来,原有视图的控制器会被销毁,这是出于内存占用和性能的考虑.服务提供了一种能在应用的整个生命周期内保持和共享数据的方法,它能够在 ...

  10. AngularJS 服务(Service)

    AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 ...

随机推荐

  1. weChat聊天发送图片带有小尖角的实现

    weChat聊天发送图片带有小尖角的实现 1.#import <UIKit/UIKit.h>2.3.@interface JKShapeImage : UIView4.5.@propert ...

  2. 使用OC开发phonegp 组件

    使用OC开发phonegp 组件 1. 使用oc 对phonegp中的组件近些开发,首先具体的pgonegp跟nativecode之间的一些优劣就不说了,开发phonegp 对应的组件主要就是使用na ...

  3. SVN Global ignore pattern 忽略文件正则后缀

    *.o *.lo *.la *.al .libs *.so *.so.[0-9]* *.a *.pyc *.pyo __pycache__ *.rej *~ #*# .#* .*.swp .DS_St ...

  4. JSP JS 日期控件的下载、使用及注意事项

    网上流行的时间日期控件比较多,个人觉得My97DatePicker的日期控件不错,值得推荐. 具体的使用过程如下: 1.下载My97DatePicker.rar或 My97DatePickerBeta ...

  5. 1.dubbo的安装 quickstart

    按照官网给定的指导,执行下面的步骤即可 1.Import the dubbo source code to eclipse project 在eclipse中安装git插件 egit 直接可以从git ...

  6. .animate动画

    .animate(params, [duration], [easing], [callback]) params: 结果样式属性 duration: 动画时长 也可以用 slow normal fa ...

  7. wpf样式绑定 行为绑定 事件关联 路由事件实例

    代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用 ...

  8. yii2源码学习笔记(五)

    Event是所有事件类的基类.它封装了与事件相关的参数. yii2\base\Event.php <?php /** * @link http://www.yiiframework.com/ * ...

  9. php 详解spl_autoload_register()函数

    在了解这个函数之前先来看另一个函数:__autoload. 一.__autoload 这是一个自动加载函数,在PHP5中,当我们实例化一个未定义的类时,就会触发此函数.看下面例子: printit.c ...

  10. linux系统删除空间后系统分区空间仍不释放问题

    总结的原因: 1.删除文件文件后没有清空回收站; 2.删除的文件不在系统分区,在其他分区上; 3.删除的文件被保留在了/tmp分区下,而/tmp分区不是独立的分区,是在根分区/的基础上划分出来的分区; ...