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. 教育，创新，提升：Indiegogo和Kickstarter上受中国用户支持的10个众筹项目

    中国的经济正在迅速发展,已成为世界第二大经济体.中国家庭随着经济水平的提高,越来越多父母愿意将自己的子女送到海外留学. 家长们希望自己的子女可以有机会接受国外大学优质的教育, 以便他们将来可以学成归来 ...

  2. /MD、/MT、/LD（ 使用 多线程版本 运行时库的C runtime library)

    /MD./MT./LD(使用运行时库)(微软官网解释) Visual C++ 编译器选项 /MD./ML./MT./LD 区别 指定与你项目连接的运行期库 /MT多线程应用程序 /Mtd多线程应用程序 ...

  3. 定制Three.js中Material属性

    1.找到想要更改的着色器代码

  4. zoj1151 zoj1295 Word Reversal 字符串的简单处理

    Word Reversal Time Limit: 2 Seconds      Memory Limit:65536 KB For each list of words, output a line ...

  5. zoj 2022

    分析: 组合数学类型的题目. 正常的话可能会去分解1~N数里面有几个5和2,但是这样的复杂度为O(nlogn). 其实有更巧妙的办法,可以把问题分解成子问题. 可以发现N!末尾的0与1~N中有几个5的 ...

  6. Echarts数据可视化visualMap，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. jquery各种事件使用方法总结（from：天宇之游）

    ps:本博客转自博主  天宇之游 ,地址:http://www.cnblogs.com/cwp-bg/  ,再次感谢天宇之游.jquery事件使用方法总结 一.鼠标事件1. click():鼠标单击事 ...

  8. 【学习】苹果iPhone safari浏览器样式重置修复按钮圆角bug

    iPhone safari浏览器中,input按钮会按苹果的默认UI来渲染,例如,写的按钮明明是这个样的: 但是实际就会是这个样子: 怎么办呢? 为按钮添加:-webkit-appearance: n ...

  9. Python实现采集wordpress整站数据的爬虫

    最近爱上了python,就非常喜欢使用python来练手,在上次的基础上完善一下代码,实现采集wordpress程序的网站的整站数据的爬虫程序,本站也是采用的wordpress,我就拿吾八哥网(htt ...

  10. ROS命令

    rospack find [package_name]功能:获取软件包的路径 例:运行 rospack find roscpp ,会返回 /opt/ros/indigo/share/roscppros ...