Part 19 AngularJS Services

What is a service in AngularJS
Before we talk about what a service is in Angular. Let‘s talk about a service in web development.

If you have any experience developing web applications
1. You might have heard about Web Services and WCF Services
2. You might have also created objects that provide some services. For example, a Math object may provide services to add numbers.

So, a service in Angular is simply an object that provide some sort of service that can be reused with in an angular application. The angular service object has properties and methods, just like any other JavaScript object.

AngularJS has lot of built in services. We discussed two of the built in services - $http & $log, in our previous video. $http service is used to make AJAX calls. $log service is useful to log an object to the console, which is very useful when debugging applications. We can also create our own custom services, which we will discuss in a later video.

For now let‘s understand the need for services.

Why do we need services in an angular application
The primary responsibility of the controller is to build the model for the view.  The controller should not be doing too many things. For example, if the controller also has the logic to compute Age from Date of Birth, it violates one of the SOLID principles i.e the Single Responsibility Principle. The Single Responsibility Principle states that an object should only have a Single Responsibility. So this kind a logic belongs in it‘s own service, which can then be injected into the object that needs that service.

In our previous video session, we have injected 2 of the angular built in services i.e $http and $log service into the controller function that needs them.

In general, if the logic with in your controller, is becoming too large or too complex, then it is time, to take a step back, and think if anything can be abstracted into it‘s own service.

Services can be used by controllers, directives and filters.

What are the benefits of using services
Reusability : In a service you usually have a logic that you want to reuse with in your entire application. For example, any time you want to make AJAX calls, you can use one of the built in angular service - $http, simply by injecting it into the object that needs that service. The application is also easier to maintain when the reusable components are encapsulated into their own services.

Dependency Injection : Another benefit of services, is that, they can simply be injected into controllers or other services that need them.

Testability : Since services are injected into controllers or other services that need them, it becomes very easy to test them. Depending on which service you are testing, you can pass mock implementations or real implementations.

时间: 2024-10-10 12:37:29

Part 19 AngularJS Services的相关文章

[AngularJS] Services, Factories, and Providers -- value & Providers

Creating a Value Object Sometimes you have javascript object defined: //value object var droidValue = { name: '', speak: function () { return "Hi I am " + this.name; } }; var droid = droidValue; droid.name = 'bb-8'; console.log(droid.speak()); I

Angularjs Services

Services 的特性01.   Service 都是单例的02.   Service 由$injector 负责实例化03.   Service 在整个生命周期都存在,可以用来共享数据.04.   在需要使用的地方利用依赖注入机制注入Service05.   自定义的Service 需要在内置的Service后面.06.   内置Service的命名以$符号开头,自定义Service应该避免.

[AngularJS] Services, Factories, and Providers -- Service vs Factory

Creating a Service: Before actual create an angular service, first create a constructor in Javascript: //constructor function function DroidService() { this.name = ''; } DroidService.prototype.speak = function () { return "Hi I am " + this.name;

angularjs跨域调取webservice

1.配置 web.config <webServices> <!--必须添加--> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices> <httpModules> <add name="JsonpHttpModule" type=

解析AngularJS service vs factory

原文来自:http://blog.manishchhabra.com/2013/09/angularjs-service-vs-factory-with-example/ What is an AngularJS service or factory? Singleton. Yes! That one word is enough to define AngularJS services. The purpose of AngularJS service / factory function i

[译]用AngularJS构建大型ASP.NET单页应用(三)

原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single AngularUI 下面的示例中使用了AngularUI的各种UI组件.AngularUI 是AngularJS 框架的一个辅助套件.示例中使用的主要组件大部分来在AngularUI 的一个子集UI Bootstrap.UI Bootstrap是从Twitter Bootstrap派生出来的,它使用A

(三)Angularjs - 入门(2)

AngularJS AJAX AngularJS提供了$http控制,可以用来获取服务器端的数据.服务器通过一个数据库的读取操作来获取需要的数据.注意AngularJS需要JSON格式的数据.一旦数据准备完毕,$http可以使用如下代码获取数据: 1 //后台提供的ajax数据提供url 2 var url="http://cdn.gbtags.com/gblibraryassets/libid102/jsondata.jsp"; 3 4 //使用http get方法获取数据,并且使用

用.net访问电子枢纽信用中心的数据查询服务

概要说明 电子枢纽全称国家交通运输物流公共信息平台,主要提供物流及生产企业进行物流相关数据交换的标准和API,详细介绍可参考其官网www.logink.org,本文假定阅读者对该平台已有了解,并已成功申请了相应的帐号和数据交换服务. 信用中心是电子枢纽众多数据服务中的一个,提供物流参与者信用信息的上传和查询,包括运输车辆.从业人员等.官方的示例和介绍大多以Java为主,.net的非常少,希望本文可以帮助.net开发人员快速掌握数据交换方式. 电子枢纽的数据服务分为两种,一种称为数据交换,另一种称

ABP官方文档翻译 5.2 动态We API层

动态Web APID层 创建动态Web API控制器 ForAll方法 重写ForAll ForMethods Http动词 WithVerb方法 HTTP特性 命名约定 API管理器 RemoteServie特性 动态Javascript代理 AJAX参数 单一服务脚本 Anaular集成 启用/禁用 包装结果 关于参数绑定 FormUrl和FormBody特性 DTOs对比原始类型 创建动态Web API控制器 这个文档是针对ASP.NET Web API的.如果你对ASP.NET Core