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. JAVA多线程--Thinking in java

    聊聊并发:http://ifeve.com/java-concurrency-thread-directory/ 阻塞状态: sleep  可中断利用 interrupt方法 wait IO  不可中 ...

  2. 关于Vue问题记录

    第一次安装Vue时,npm run dev报错处理 1.如果是报错:提示说没找到test这个文件夹 参考资料:https://segmentfault.com/q/1010000010893904 就 ...

  3. es6箭头函数讲解

    es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...

  4. Dynamic Inversions 50个树状数组

    Dynamic Inversions Time Limit: 30000/15000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others ...

  5. Dubbo服务接口的设计原则

    1.接口粒度 1.1 服务接口尽可能大粒度,每个服务方法应代表一个功能,而不是某功能的一个步骤,否则将面临分布式事务问题,Dubbo暂未提供分布式事务支持.同时可以减少系统间的网络交互. 1.2 服务 ...

  6. JFrame的层次结构以及背景颜色设置问题

    JFrame的层次结构: JFrame:窗体,也就是窗口的框架.默认为不可见.不透明的(可以使用isVisible和isOpaque来验证).创建窗口时,最后一步需要调用setVisible(true ...

  7. Lucene介绍与入门使用

    Lucene简介 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整 ...

  8. javascript数组的常用方法总结

    http://jingyan.baidu.com/album/86fae346bce16d3c49121af9.html?picindex=1 1. concat()方法 数组和数组的 粘结: var ...

  9. easyUI tree点击文字展开节点

    easyUI默认展开树的时候,点击节点前边的黑色小三角 ,这样操作存在不人性化的地方,在实际使用中由于老旧电脑的存在和大龄使用者的眼花经常点不准:因此要实现点击节点名称展开的方式,其实就是在展开事件上 ...

  10. UltraEdit中使用正则表达式替换

    UltraEdit在使用正则表达式进行查找替换时有两个可使用的语法集合.一个是 UltraEdit 的更早的版本被使用的原来的 UltraEdit 句法.另一个是"Unix"类型的 ...