`

Service与Provider

阅读更多

        我们不要试图去复用Controller,当我们发现两个或多个Controller有相同的代码时,我们应该抽取一个服务。

一.使用$http服务

HTTPBasic.html

<html ng-app="MyModule">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="HTTPBasic.js"></script>
	</head>
	<body>
		<div ng-controller="LoadDataCtrl">
			<ul>
				<li ng-repeat="user in users">
					{{user.name}}
				</li>
			</ul>
		</div>
	</body>
</html>

HTTPBasic.js

var myModule=angular.module("MyModule",[]);
myModule.controller('LoadDataCtrl', ['$scope','$http', function($scope,$http){
	$http({
        method: 'GET',
        url: 'data.json'
    }).success(function(data, status, headers, config) {
        console.log("success...");
        console.log(data);
        $scope.users=data;
    }).error(function(data, status, headers, config) {
        console.log("error...");
    });
}]);

data.json

[{
    "name": "《用AngularJS开发下一代WEB应用》"
},{
    "name": "《Ext江湖》"
},{
    "name": "《ActionScript3.0游戏设计基础(第二版)》"
}]

运行结果:

        大家看到我是将其放到Tomcat容器中运行的,其实新版的FireFox支持本地Ajax请求,因此,可以直接在FireFox中运行。

 

二.创建自已的Service

MyService1.html

<html ng-app="MyServiceApp">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.css">
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="MyService1.js"></script>
</head>

<body>
    <div ng-controller="ServiceController">
        <label>用户名</label>
        <input type="text" ng-model="username" placeholder="请输入用户名" />
        <pre ng-show="username">{{users}}</pre>
    </div>
</body>

</html>

MyService1.js

var myServiceApp = angular.module("MyServiceApp", []);
myServiceApp.factory('userListService', ['$http',
    function($http) {
        var doRequest = function(username, path) {
            return $http({
                method: 'GET',
                url: 'users.json'
            });
        }
        return {
            userList: function(username) {
                return doRequest(username, 'userList');
            }
        };
    }
]);

myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',
    function($scope, $timeout, userListService) {
        var timeout;
        $scope.$watch('username', function(newUserName) {
            if (newUserName) {
                if (timeout) {
                    $timeout.cancel(timeout);
                }
                timeout = $timeout(function() {
                    userListService.userList(newUserName)
                        .success(function(data, status) {
                            $scope.users = data;
                        });
                }, 350);
            }
        });
    }
]);

//...

users.json

《Ext江湖》
《ActionScript3.0游戏设计基础(第二版)》
《用AngularJS开发下一代WEB应用》

运行效果:

        当在用户名这个输入框中输入内容后过一小小会,页面就会发请求获取数据在下面展示出来,如下所示:

        特别说明:正常我们每按下一个键就会向后台发送一次请求,页面会不断重刷,timeout表示当我们在页面上输入时,延迟指定的时间(这里是350毫秒)才向后台发送请求。

 

三.Service的特性

1.Service都是单例的

2.Service由$injector负责实例化(也就是说,不要去new一个Service)

3.Service在整个应用的生命周期中存在,可以用来共享数据

4.在需要使用的地方利用依赖注入机制注入Service

5.自定义的Service需要密致的内置的Service后面

6.内置Service的命名以$符号开头,自定义Service应该避免

 

四.Service、Factory、Provider本质都是Provider

function provider(name, provider_) {
    assertNotHasOwnProperty(name, 'service');
    //如果provider_是函数或是数组,就创建实例
    if (isFunction(provider_) || isArray(provider_)) {
      provider_ = providerInjector.instantiate(provider_);
    }
    //如果是Provider,必须定义一个$get的factory方法
    if (!provider_.$get) {
      throw $injectorMinErr('pget', "Provider '{0}' must define $get factory method.", name);
    }
    //如果命名和前缀在providerCache中能找到,就会将其返回出去
    return providerCache[name + providerSuffix] = provider_;
}

        Service、Provider、Factory本质上都是Provider,只是后面的顺序和格式不同

        Provider模式是“策略模式”+“抽象工厂模式“的混合体

 

五.使用$filter服务

1.$filter是用来进行数据格式化的专用服务

2.AngularJS内置了9个filter:currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase

3.filter可以嵌套使用(用管道符号|分隔)

4.filter是可以传递参数的

5.用户可以定义自已的filter

date使用实例:

Filter.html

<html ng-app="MyModule">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="Filter.js"></script>
	</head>
	<body>
		{{ 1304375948024 | date }}
		<br>
		{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
		<br>
		{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
		<br>
	</body>
</html>

Filter.js

var myModule=angular.module("MyModule",[]);

运行结果:

定义自已的filter实例:

MyFilter.html

<html ng-app="MyModule">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="MyFilter.js"></script>
</head>

<body>
    {{'Hello Angular!'|filter1 }}
</body>

</html>

MyFilter.js

var myModule=angular.module("MyModule",[]);
myModule.filter('filter1',function(){
    return function(item){
        return item + 'o(∩_∩)o';
    }
});

运行结果:


六.其它内置的Service介绍

1.$compile:编译服务

2.$filter:数据格式化工具,内置了8个

3.$interval:用来做一些定时器之类的

4.$timeout:用来做一些定时器之类的

5.$locale:用于国际化

6.$location:监控浏览器地址变化的

7.$log:提供日志

8.$parse

9.$http:封装了Ajax

 

特别说明:这里是我在慕课网的学习笔记,仅用于加深映像以及后续的回顾。

学习地址:http://www.imooc.com/learn/156

  • 大小: 19.3 KB
  • 大小: 13.6 KB
  • 大小: 18.6 KB
  • 大小: 13.2 KB
  • 大小: 15.3 KB
分享到:
评论

相关推荐

    Laravel开发-service-provider

    Laravel的服务容器是一个强大的依赖注入工具,Service Provider是与容器交互的桥梁。通过服务容器,我们可以实现依赖的自动解析,提高代码的可测试性和可维护性。 3. **门面(Facades)** Laravel的门面提供了一...

    File System Service Provider

    **文件系统服务提供者(File System Service Provider)** 在Java Standard Edition (Java SE) 平台中,Java Naming and Directory Interface (JNDI) 是一个关键的API,它为应用程序提供了统一的方式来查找和管理命名...

    四大组件 Activity Service content provider broadcast receiver

    ### 四大组件详解:Activity、Service、Content Provider与Broadcast Receiver #### 一、Activity **定义:** Activity是Android应用程序中的四大基本组件之一,它代表一个屏幕界面,用户可以直接与其进行交互。每...

    File System Service Provider for JNDI

    File System Service Provider for JNDI。This is the Early Access 4 release of the JNDI/File system service provider. It contains two jars,they are fscontext.jar and providerutil.jar. The doc is ...

    Net SAML2 Service Provider Framework

    ### Net SAML2 Service Provider Framework:深度解析与应用 #### 引言 《Net SAML2 Service Provider Framework》是一份详尽的文档,旨在介绍和解释.NET环境下的SAML2服务提供者框架的各个方面。该框架是为实现...

    CLC-CCIE Service Provider v5.0-Practice Lab v1.0.pdf

    【CLC-CCIE Service Provider v5.0 实践实验室 v1.0】是一个专为备考CCIE Service Provider认证的高级实践课程。该课程由CCIE Lab Center (CLC) 创建,旨在帮助考生提升在服务提供商网络领域的专业技能。课程发布于...

    Spring Cloud Eureka Service Provider

    **Spring Cloud Eureka Service Provider** 是一个基于Spring Cloud框架的组件,用于实现服务发现功能。在微服务架构中,服务发现是至关重要的,它允许服务消费者找到并与其所需的服务进行通信。Eureka是Netflix开发...

    Laravel开发-laravel-service-provider .zip

    Service Provider通过`register`和`boot`两个方法与应用进行交互。 1. **注册(Register)**:在`register`方法中,我们主要进行服务绑定。这是将类与接口关联,或者直接注册类实例到服务容器的过程。例如,我们...

    Laravel开发-laravel-service-provider

    在Laravel框架中,Service Provider是核心的组件之一,它扮演着连接应用和其依赖的服务的角色。Service Provider是实现依赖注入、服务绑定和服务容器的主要工具,使得代码更加可测试、可维护和解耦。本教程将深入...

    Java Service Provider实现

    在Java平台上,Service Provider Interface (SPI) 是一种允许第三方开发者扩展Java应用程序的机制。它使得开发者可以为已存在的服务提供自定义实现,而无需修改原始的代码。在Java的类库中,许多接口都利用了SPI,...

    Python库 | Fragment-Service-Provider-0.0.1a2.tar.gz

    由于没有具体的库文档,我们只能根据名称进行推测——"Fragment"可能涉及到部分数据或组件的管理,而"Service"和"Provider"则可能与服务的创建、注册和提供有关,可能是为了方便开发者构建分布式系统或者组件化应用...

    gitlab-api-service-provider-源码.rar

    GitLab API Service Provider 是一个用于与GitLab API进行交互的服务提供者,它允许开发者通过编程的方式便捷地访问GitLab的各种功能,如仓库管理、用户管理、项目管理等。这个源码库可能是用Java或其他支持HTTP请求...

    详解Angular中的自定义服务Service、Provider以及Factory

    Angular中的自定义服务Service、Provider以及Factory详解 在Angular中的自定义服务中,有三种方式可以实现服务的复用性,即Service、Provider和Factory。这些方法可以提高Angular代码的复用性和可维护性。 Factory...

    AngularJS 之 Factory vs Service vs Provider - 技术翻译 - 开源中国社区1

    与Factory相比,Service更强调面向对象的编程风格。以下是一个Service的例子: ```javascript app.service('myService', function() { this.data = null; this.fetchData = function() { // ...同上... }; });...

    smallworld 下的magik module 的logger和service provider

    在实际开发过程中,理解和利用好logger与service provider,可以极大地提高Smallworld应用的健壮性和可维护性。例如,通过logger监控系统状态,快速定位故障;通过service provider实现模块化,增强系统的可扩展性。...

    winsock service provider interface.rar_WINSOCK SPI_spi_spi lsp_w

    在标题“winsock service provider interface.rar_WINSOCK SPI_spi_spi lsp_w”中,我们看到关键词“WINSOCK SPI”、“SPI”和“LSP”,这些都是与Winsock SPI相关的术语。WINSOCK SPI 是 Winsock 的服务提供者接口...

    dflydev-doctrine-orm-service-provider, Doctrine ORM服务提供商.zip

    dflydev-doctrine-orm-service-provider, Doctrine ORM服务提供商 Doctrine ORM服务提供程序为Pimple应用程序提供 Doctrine ORM实体管理器服务。特性利用核心 Doctrine 服务提供商( Silex ) 。默认的实体管理器可以...

Global site tag (gtag.js) - Google Analytics