Angular Service入门
1.Angular内置service
Angular为了方便开发者开发,本身提供了非常多的内置服务。可以通过https://docs.angularjs.org/api/ng/service查看AngularJS提供的内置服务。在企业级开发中,常用的服务有以下这些:
- $cacheFactory 缓存服务
- $compile 编译服务
- $filter 通过 $filter 服务可以格式化输出数据,也可以对数据进行过滤操作
- $http AngularJS内置的核心的服务,主要和后台请求相关
- $location 基于window.location的Angular版本,功能更强大。比如路由地址的切换: $location.path('/home')
- $log 开发过程中用到的多,输入错误和调试日志。和Chrome浏览器的console.log()、console.debug()等类似
- $q 服务主要是用于异步函数返回一个promise,在路由中resovle属性用的较多
- $rootScope 一个应用只有一个 $rootScope,该服务可以用于每个页面都需要使用的公共数据或者变量,但是开发过程中,建议尽量少用 $rootScope,调试起来不方便。因为它是一个全局变量。
2.Angular自定义Service
可以通过多种方式方式定义Service,常用的使用factory来定义一个service。代码如下:
app.factory('dataService', function () {
var appVerison = "1.0";
var showVersion = function () {
return appVerison;
};
return {
appTitle: "Decorators Demo",
showVersion: showVersion
}
});
3.在控制器之间共享数据使用Service
控制器和控制器之间共享数据也有多种方式,将变量或者函数绑定$rootScope是一种常见的方式,但是不推荐。常见的情况是使用Service来共享多个controller之间的数据。一个记录图书阅读的系统,需要记录最后一次编辑的图书信息。
在BooksController.js
里面读取currentUser服务,在编辑的页面给currentUser服务里面的lastBookEdited对象赋值。
定义currentUser服务
angular.module('app')
.factory('currentUser', function () {
var lastBookEdited = {};
return {
lastBookEdited: lastBookEdited
}
});
在EditController.js
dataService.getBookByID($routeParams.bookId)
.then(function (response) {
vm.currentBook = response;
//将当前编辑的图书对象赋值给lastBookEdited
currentUser.lastBookEdited=vm.currentBook;属性
})
.catch(function (response) {
$log.error(response);
});
BooksController.js
vm.currentUser=currentUser;
模板books.html
<div>
{{books.summaryData.bookCount}} Books --
{{books.summaryData.readerCount}} Readers --
{{books.summaryData.grandTotalMinutes}} Total Minutes Read
</div>
4.Decorators(修饰)在Angular Service的使用
在实际开发过程中,我们需要对自己的服务进行增加一下方法,或者对引入的第三方服务增加一下方法,开发者可以不需要修改之前的源代码,而是可以在运行时为Service增加方法。这里需要用到Decorator-修饰。修饰模式是软件设计里面一种经典设计模式,在高级的面向对象语言,比如Java、C#等都有实现。AngularJS代码举例:
var app = angular.module('app', []);
app.controller('MainCtrl', function ($scope, dataService) {
$scope.app = dataService;
});
app.factory('dataService', function () {
var appVerison = "1.0";
var showVersion = function () {
return appVerison;
};
return {
appTitle: "Decorators Demo",
showVersion: showVersion
}
});
app.config(function ($provide) {
$provide.decorator('dataService', function ($delegate) {
$delegate.sayHello = function () {
return "a new function of 'dataService'";
};
return $delegate;
});
});
项目地址:https://github.com/cmssfe/angular-js-path/tree/master/angularjs-services-in-depth/BookLogger
参考网址
Angular Service入门的更多相关文章
- angular service provider
关于 angular service factory provider 方面有很多,我也来写一篇加深下印象 provider 是一切方法的基础,所以功能也最强,provider 用来定义一个可以被 ...
- (转)Web Service入门简介(一个简单的WebService示例)
Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...
- Angular service, 服务
早上开车上班, 发现车快没油了, 于是拐进加油站. 有一辆出租车也在加油.. Angular service在一个应用里是以单例形式存在的. 这个单例的实例是由service factory( ...
- Web Service入门简介(一个简单的WebService示例)
Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...
- Angular 快速入门
Angular 快速入门 AngularJS 官方网址 Angular:https://www.angular.cn/ Angular官网:https://angularjs.org/ Angular ...
- AngularJS学习之 ngTable 翻页 功能以及利用angular service准备测试数据
1.官网链接 https://github.com/esvit/ng-table#4.0.0 2.安装ngTable后,一定要记得先注册到自己的项目 .module('pttengApp', [ ' ...
- Angular.js 入门(一)
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
- (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
随机推荐
- 3.Windows Server 2012 R2数据库部署
很多人竟然不会安装数据库....好吧,来个图文教程,其实和windows里面一样安装,和安装2008一样的 先安装3.5:http://www.cnblogs.com/dunitian/p/53487 ...
- Python列表去重
标题有语病,其实是这样的: 假设有两个列表 : L1 = [1,2,3,4] ; L2 = [1,2,5,6] 然后去掉L1中包含的L2的元素 直接这样当然是不行的: def removeExists ...
- Android注解使用之通过annotationProcessor注解生成代码实现自己的ButterKnife框架
前言: Annotation注解在Android的开发中的使用越来越普遍,例如EventBus.ButterKnife.Dagger2等,之前使用注解的时候需要利用反射机制势必影响到运行效率及性能,直 ...
- PHP与API讲解(一)
了解API: 在使用与创建自己的API之前我们需要先了解什么是API! API代表应用程序编程接口,而接口指的是一个特定的服务.一个应用程序或者其他程序的公共模块. 理解SOA(面向服务的架构):SO ...
- zookeeper源码分析之四服务端(单机)处理请求流程
上文: zookeeper源码分析之一服务端启动过程 中,我们介绍了zookeeper服务器的启动过程,其中单机是ZookeeperServer启动,集群使用QuorumPeer启动,那么这次我们分析 ...
- iOS UITableView 与 UITableViewController
很多应用都会在界面中使用某种列表控件:用户可以选中.删除或重新排列列表中的项目.这些控件其实都是UITableView 对象,可以用来显示一组对象,例如,用户地址薄中的一组人名.项目地址. UITab ...
- C# 用SoapUI调试WCF服务接口(WCF中包含用户名密码的验证)
问题描述: 一般调试wcf程序可以直接建一个单元测试,直接调接口. 但是,这次,我还要测试在接口内的代码中看接收到的用户名密码是否正确,所以,单一的直接调用接口方法行不通, 然后就想办法通过soapU ...
- win10上部署Hadoop-2.7.3——非Cygwin、非虚拟机
开始接触Hadoop,听人说一般都是在Lunix下部署Hadoop,但是本人Lunix不是很了解,所以Google以下如何在Win10下安装Hadoop(之后再在Lunix下弄),找到不少文章,以下是 ...
- Block解析(iOS)
1. 操作系统中的栈和堆 我们先来看看一个由C/C++/OBJC编译的程序占用内存分布的结构: 栈区(stack):由系统自动分配,一般存放函数参数值.局部变量的值等.由编译器自动创建与释放.其操作方 ...
- ASP.NET Core 在 JSON 文件中配置依赖注入
前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等 ...