AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

为什么使用服务?

在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象

因为这些服务可以获取到Angular应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="angular-1.6.3/angular.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="myApp" ng-controller="myCtrl">
  9.  
  10.     <div ng-app="myApp" ng-controller="myCtrl">
  11.  
  12.         <p>现在时间是:</p>
  13.  
  14.         <h1>{{theTime}}</h1>
  15.  
  16.     </div>
  17.  
  18.     <p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
  19.  
  20. </div>
  21. <script>
  22.     var app = angular.module('myApp', []);
  23.     app.controller('myCtrl', function($scope,$interval) {
  24.         $scope.theTime = new Date().toLocaleTimeString();
  25.         $interval(function () {
  26.             $scope.theTime= new Date().toLocaleTimeString();
  27.         },1000);
  28.     });
  29. </script>
  30. </body>
  31. </html>

创建自定义服务

你可以创建访问自定义服务，链接到你的模块中：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="angular-1.6.3/angular.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="myApp" ng-controller="myCtrl">
  9.  
  10.     <p>255 的16进制是:</p>
  11.  
  12.     <h1>{{hex}}</h1>
  13.  
  14. </div>
  15. <p>自定义服务，用于转换16进制数：</p>
  16. <script>
  17.     var app = angular.module('myApp', []);
  18.     app.service('heaxfy',function () {
  19.         this.myFunc = function (x) {
  20.             return x.toString(16);
  21.         }
  22.     });
  23.     app.controller('myCtrl', function($scope,heaxfy) {
  24.         $scope.hex = heaxfy.myFunc(255);
  25.     });
  26. </script>
  27. </body>
  28. </html>

$watch：持续监听数据上的变化，更新界面，如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="angular-1.6.3/angular.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="myApp" ng-controller="myCtrl">
  9.     <b>请输入姓名：</b><br>
  10.     <b>姓：</b><input type="text" ng-model="lastName"><br>
  11.     <b>名：</b><input type="text" ng-model="firstName"><br>
  12.     <h1>{{ lastName + " " + firstName }}</h1>
  13.     <h2>{{ fullName }}</h2>
  14. </div>
  15. <script>
  16.     var app = angular.module('myApp', []);
  17.     app.controller('myCtrl', function($scope) {
  18.         $scope.lastName = "";
  19.         $scope.firstName = "";
  20.  
  21.         //监听lastName的变化，更新fullName
  22.         $scope.$watch('lastName', function() {
  23.             $scope.fullName = $scope.lastName + " " + $scope.firstName;
  24.         });
  25.  
  26.         //监听firstName的变化，更新fullName
  27.         $scope.$watch('firstName', function() {
  28.             $scope.fullName = $scope.lastName + " " + $scope.firstName;
  29.         });
  30.     });
  31. </script>
  32. </body>
  33. </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. C++代码使用 CppUnit 进行单元检测

    CppUnit是一个很方便的对C++代码进行单元检测的工具. 如何编译CppUnit参照博客:http://blog.csdn.net/x_iya/article/details/8433716 该博 ...

  2. 进入css3动画世界（一）

    其实我做css3动画也没有多久,这篇文章目标人群是css3动画的新手,不喜勿喷. 分类 目前我接触到的css3动画有2类:一种是transition的,另一种是@keyframes的. 两者的区别就是 ...

  3. 针对Openlayer3官网例子的简介

    网址:http://openlayers.org/en/latest/examples/ 如果大家想了解ol3能做什么,或者说已提供的API有什么,又闲一个个翻例子跟API累的话,就看看这个吧. 1. ...

  4. P1035

    P1035 时间限制: 1 Sec  内存限制: 128 MB提交: 87  解决: 36[提交][状态][讨论版] 题目描述 给出一张n*n(n< =100)的国际象棋棋盘,其中被删除了一些点 ...

  5. myeclipse的快捷键

    ------------------------------------MyEclipse 快捷键1(CTRL)-------------------------------------Ctrl+1 ...

  6. HDU1285 确定比赛名次

    有N个比赛队(<=N<=),编号依次为1,,,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委员会不能直接获得每个队的比赛成绩,只知道每场比赛的结 ...

  7. C#一款比较美观的验证码

    using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System. ...

  8. ceph在品高云中的实践

    ceph简介 ceph是业界目前人气最高的开源存储项目之一,关于其定义在官网是这样的:"Ceph is a unified, distributed storage system desig ...

  9. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  10. CSS盒子模型之详解

    前言:        盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念    CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...