AngularJS学习篇（八）
AngularJS 服务(Service)
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
为什么使用服务?
在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象
因为这些服务可以获取到Angular应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> <div ng-app="myApp" ng-controller="myCtrl"> <p>现在时间是:</p> <h1>{{theTime}}</h1> </div> <p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p> </div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime= new Date().toLocaleTimeString();
},1000);
});
</script>
</body>
</html>
创建自定义服务
你可以创建访问自定义服务，链接到你的模块中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> <p>255 的16进制是:</p> <h1>{{hex}}</h1> </div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
app.service('heaxfy',function () {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope,heaxfy) {
$scope.hex = heaxfy.myFunc(255);
});
</script>
</body>
</html>
$watch：持续监听数据上的变化，更新界面，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<b>请输入姓名：</b><br>
<b>姓：</b><input type="text" ng-model="lastName"><br>
<b>名：</b><input type="text" ng-model="firstName"><br>
<h1>{{ lastName + " " + firstName }}</h1>
<h2>{{ fullName }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.lastName = "";
$scope.firstName = ""; //监听lastName的变化，更新fullName
$scope.$watch('lastName', function() {
$scope.fullName = $scope.lastName + " " + $scope.firstName;
}); //监听firstName的变化，更新fullName
$scope.$watch('firstName', function() {
$scope.fullName = $scope.lastName + " " + $scope.firstName;
});
});
</script>
</body>
</html>
AngularJS学习篇（八）的更多相关文章
- AngularJS学习篇（十八）
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...
- AngularJS学习篇（二十四）
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇（二十三）
AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...
- AngularJS学习篇（二十二）
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇（二十一）
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...
- AngularJS学习篇（二十）
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
- AngularJS学习篇（十七）
AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...
- AngularJS学习篇（十六）
AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
随机推荐
- vue.js项目构建
这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...
- Highway Networks Pytorch
导读 本文讨论了深层神经网络训练困难的原因以及如何使用Highway Networks去解决深层神经网络训练的困难,并且在pytorch上实现了Highway Networks. 一 .Highway ...
- 【JVM命令系列】jstat
命令基本概述 Jstat是JDK自带的一个轻量级小工具.全称"Java Virtual Machine statistics monitoring tool",它位于java的bi ...
- HSF服务的开发与使用
1.HSF服务的开发 1) 基于Maven创建一个web工程HSFService,如下图,其他的可以自定义. 2)创建好好在src/main目录下创建一个java目录,并将其设置为sources fo ...
- Java总结篇：Java多线程
Java总结篇系列:Java多线程 多线程作为Java中很重要的一个知识点,在此还是有必要总结一下的. 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: ...
- zoj 1108 FatMouse's Speed 基础dp
FatMouse's Speed Time Limit: 2 Seconds Memory Limit:65536 KB Special Judge FatMouse believe ...
- Java面向对象 集合（中）
Java面向对象 集合(中) 知识概要: (1)泛型的体系概念 (2)泛型的特点 (3)自定义泛型类 泛型的体系概念 泛型:JDK1.5版 ...
- Access-Control-Allow-Origin与Ajax跨域
问题 在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题.另一个域名必须在response中添加 Access-Control-Allow-Origin 的header,才能让前者成功 ...
- sqlserver游标使用和循环
/*** 游标的使用 讲了这个多游标的优点,现在我们就亲自来揭开游标的神秘的面纱. 使用游标的顺序: 声名游标.打开游标.读取数据.关闭游标.删除游标. 1.3.1声明游标 最简单游标声明:DECLA ...
- [C#]Winform后台提交数据且获取远程接口返回的XML数据,转换成DataSet
#region 接口返回的Xml转换成DataSet /// <summary> /// 返回的Xml转换成DataSet /// </summary> /// <par ...