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学习篇（八）的更多相关文章

  1. AngularJS学习篇（十八）

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  2. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  3. AngularJS学习篇（二十三）

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  4. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  5. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  6. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  7. AngularJS学习篇（十九）

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  8. AngularJS学习篇（十七）

    AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...

  9. AngularJS学习篇（十六）

    AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...

随机推荐

  1. oracle中number类型最简单明了解释

    NUMBER (p,s) p和s范围: p 1-38 s -84-127 number(p,s),s大于0,表示有效位最大为p,小数位最多为s,小数点右边s位置开始四舍五入,若s>p,小数点右侧 ...

  2. Django(博客系统)：按照时间分层筛选“/blog/article/?create_time__year=2017”，出现问题：Database returned an invalid datetime value. Are time zone definitions for your database installed?

    问题背景 添加文章时间没问题,但为了设定博客文章按照时间分层筛选(创建时间的年份.年月&月份来搜索文章),我在blog这个django app的admin.py的ArticleAdmin类中做 ...

  3. 分布式系统中生成全局ID的总结与思考

    世间万物,都有自己唯一的标识,比如人,每个人都有自己的指纹(白夜追凶给我科普的,同卵双胞胎DNA一样,但指纹不一样).又如中国人,每个中国人有自己的身份证.对于计算机,很多时候,也需要为每一份数据生成 ...

  4. Hadoop（四）HDFS集群详解

    前言 前面几篇简单介绍了什么是大数据和Hadoop,也说了怎么搭建最简单的伪分布式和全分布式的hadoop集群.接下来这篇我详细的分享一下HDFS. HDFS前言: 设计思想:(分而治之)将大文件.大 ...

  5. ZOJ2185 简单分块 找规律

    初步找大概位置,然后找精确位置,算是简单化的分块吧! #include<cstdio> #include<cstdlib> #include<iostream> u ...

  6. 浅析php curl_multi_*系列函数进行批量http请求

    何起: 一系列 数量很大 数据不热 还希望被蜘蛛大量抓取的页面,在蜘蛛抓取高峰时,响应时间会被拉得很高. 前人做了这样一个事儿:页面分3块,用3个内部接口提供,入口文件用curl_multi_*系列函 ...

  7. jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  8. ActiveMQ——activemq的详细说明，queue、topic的区别（精选）

    JMS中定义了两种消息模型:点对点(point to point, queue)和发布/订阅(publish/subscribe,topic).主要区别就是是否能重复消费. 点对点:Queue,不可重 ...

  9. DevOps之服务故障

    唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <DevOps服务故障> 0.故障1.设施故障2.设备故障3.系统故障4.虚拟化故障5.存 ...

  10. 【特效】select美化

    select的默认样式往往很丑,为保证页面样式风格统一,需要对select进行美化.虽然其美化的插件很多,一搜一大把,但是需要引入长长的css文件和js文件实在是件头痛的事.其实select的实现原理 ...