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. 一个综合实例讲解vue的基础知识点。

    本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:

  2. 每周刷题记录--by noble_

    学习hzwer的博客. ----------------------------------------------------------------- 2017.10.3 主要是水题与傻逼dp: ...

  3. VirtualBox 磁盘容量调整

    起因 此前用VBox,初始时动态或固定分配的磁盘容量用完了就再重新建一个磁盘,但是有个虚拟机的系统分区容量不够了,把整个磁盘都分成系统盘仍然不够,于是研究了下磁盘容量调整问题. 正文 1,从当前虚拟机 ...

  4. .net通用防SQL注入漏洞程序(Global.asax方式)

    原理很简单:使用Global.asax中的Application_BeginRequest(object sender, EventArgs e)事件,实现表单或URL提交数据的获取,然后通过SQLI ...

  5. jdbc-日期格式的转换及代码示例

     时间类型相互转换 把数据库的三种时间类型赋给java.util.Date,基本不用转换,因为这是把子类对象给父类的引用,不需要转换. java.sql.Date date = - java.ut ...

  6. vue-cli如何引入bootstrap工具

    以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用c ...

  7. springMvc+hibernate的web application的构建

    闲来没事,想整理下一些知识. 这篇文章是关于spring的web程序的搭建,有什么不对的地方希望大家批评指正. 首先我们要了解什么是spring,这里可能很多大家也都明白,无非是一个管理对象的一个容器 ...

  8. python初步（附学习思维导图）

    python,原意为蟒蛇,至于它的发展史,度娘应该比我讲述的更为专业/偷笑.这里我们要梳理的是整个学习的脉络,当然,今后的随笔也会从基础部分说起,希望能给进门python的小伙伴一些建议. 一.环境的 ...

  9. 开发人员的福音：微软、谷歌、Mozilla将他们所有的web API文档放在同一个地方

    Tips 原文作者:Liam Tung  原文地址:Developers rejoice: Microsoft, Google, Mozilla are putting all their web A ...

  10. python Logging的使用

    日志是用来记录程序在运行过程中发生的状况,在程序开发过程中添加日志模块能够帮助我们了解程序运行过程中发生了哪些事件,这些事件也有轻重之分. 根据事件的轻重可分为以下几个级别: DEBUG: 详细信息, ...