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. Apache服务器处理404错误页面技巧

    1.打开Apache目录,查找httpd.conf文件 2.打开httpd.conf文件,找到<Directory "    "></Directory>这 ...

  2. 深入理解计算机系统chapter3

    栈在处理过程调用中起到至关重要的作用,栈向下增长,栈顶元素的地址是所有栈中元素最小的.栈指针%esp保存着栈顶元素的地址 控制: 重点: 基于条件数据传送的代码比基于条件控制转移(预测错误惩罚比较高) ...

  3. iOS 获取设备信息，mac地址，IP地址，设备名称

    #import "DeviceInfoUtil.h" #import "GlobleData.h" #import "sys/utsname.h&qu ...

  4. Ngnix技术研究系列1-通过应用场景看Nginx的反向代理

    随着我们业务规模的不断增长,整个系统规模由两年前的几十台服务器,井喷到现在2个数据中心,接近400台服务器,上百个WebApi站点,上百个域名. 这么多的WebApi站点这么多的域名,管理和维护成本很 ...

  5. linux free命令解读

    $ free -m total used free shared buffers cached Mem: 1002 769 232 0 62 421 -/+ buffers/cache: 286 71 ...

  6. PLSQL Developer 连接oracle(64)(instantclient_32)

    下载instantclient-basic-nt-11.2.0.2.0位客户端,加压后存放,如F:\instantclient_11_2 拷贝Oracle 11.2G的msvcr80.dll和tnsn ...

  7. 一个强迫症的Git 选择

    选择 1,经常性的commit or 干净的历史 在本地(私有)的开发分支中,选择经常性的commit,以便于实时记录修改,回退等操作.eg.develop,feature... 实现方式: comm ...

  8. ASP.NET没有魔法——ASP.NET MVC 与数据库之ORM

    什么是ORM 对象关系映射(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转 ...

  9. 从头编写 asp.net core 2.0 web api 基础框架 (4) EF配置

    第1部分:http://www.cnblogs.com/cgzl/p/7637250.html 第2部分:http://www.cnblogs.com/cgzl/p/7640077.html 第3部分 ...

  10. Linux目录结构详解（一）

    Linux目录结构,在逻辑上所有目录只有一个顶点,即/(根目录),是所有目录的起点.根下面类似于一个倒挂着的树的结构. Linux目录按照类别组织: 应用程序 /usr/bin 数据文件,帮助/usr ...