在AngularJS中， 服务是一个比较重要的部分，它是一个对象或者是函数，可以在你的AngularJS的应用中使用。接下来介绍几种比较常用的内建服务以及自定义服务的方法。

[内建服务]

（1）location服务

location服务返回当前页面的地址，需要注意的是location服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

>>>代码部分

<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p> 当前页面的url:</p>

<h3>{{myUrl}}</h3>

</div>

<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

</body>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $location) {

    $scope.myUrl = $location.absUrl();

});

</script>

</html>

（2）$http服务

$http服务： 服务向服务器发送请求，应用响应服务器传送过来的数据。

>>>代码部分

 <div ng-app="myApp" ng-controller="myCtrl">

 <p>欢迎信息:</p>

 <h1>{{myWelcome}}</h1>

 </div>

 <p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

 <script>

 var app = angular.module('myApp', []);

 app.controller('myCtrl', function($scope, $http) {

   $http.get("welcome.htm").then(function (response) {

       $scope.myWelcome = response.data;

   });

 });

 </script>

(3) $timeout服务

AngularJS $timeout 与 JS window.settimeout 函数相对应，实现效果相同

代码如下>>>

 var app = angular.module('myApp', []);

 app.controller('myCtrl', function($scope, $timeout) {

     $scope.myHeader = "Hello World!";

     $timeout(function () {

         $scope.myHeader = "How are you today?";

     }, 2000);

 });

代码所执行的效果是，2s后执行代码。

（4）$interval服务

AngularJS $interval 与 JS window.settimeinterval 函数相对应，实现效果相同

 var app = angular.module('myApp', []);

 app.controller('myCtrl', function($scope, $interval) {

     $scope.theTime = new Date().toLocaleTimeString();

     $interval(function () {

         $scope.theTime = new Date().toLocaleTimeString();

     }, 1000);

 });

【自定义服务】

1、service

 angular.module("app",[])

         .controller("ctrl",function($scope,$hexafy){}）

 .service('$hexafy', function() {

             this.$$gongneng = "将转入的数字，转为16进制";

             this.myFunc = function (x) {

                 return x.toString(16);

             }

         })

2、factory

factory 是一个函数用于返回值,通常我们使用 factory 函数来计算或返回值。(factory使用上，与service差距不大)

 angular.module("app",[])

         .config()

         .controller("ctrl",function($scope,hexafy){

             $scope.gongneng = hexafy.gongneng;

             $scope.num = hexafy.myFunc(255);

         })

         .factory('hexafy',function(){

             var obj = {

                 gongneng : "将转入的数字，转为16进制",

                 myFunc:function(x){

                     return x.toString(16);

                 }

             };

             return obj;

         })

3、provider

1、在AngularJS中，Service，factory都是基于provider实现的。
2、在provider中，通过$get()方法提供了factory的写法，用于返回 value/service/factory。；
3、provider是三种自定义服务中，唯一可以写进config配置阶段的一种。
如果服务，必须要在配置阶段执行，那么必须使用provider。否则，一般使用Service或factory

 .controller("ctrl",function($scope,hexafy){

             $scope.gongneng = hexafy.gongneng;

             $scope.num = hexafy.myFunc(255);

         })

         /*定义一个provider服务*/

         .provider('hexafy',function(){

             //默认使用Service的写法

 //            this.gongneng = "将转入的数字，转为16进制";

             this.$get = function(){

                 var obj = {

                     gongneng : "将转入的数字，转为16进制",

                     myFunc : function(x){

                         return x.toString(16);

                     }

                 }

                 return obj;

             }

         })

AngularJS内建服务以及自定义服务的用法的更多相关文章

  1. Angular.js之服务与自定义服务学习笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 运行于Windows内建账户下的服务访问映射网络驱动器的方法

    Windows服务如果是运行在本地系统帐户下或本地服务帐户下,它只能访问这个账户自己创建的映射驱动器,UNC路径访问则不受次限制. LocalService Account (NT AUTHORITY ...

  3. angularjs factory,service,provider 自定义服务的不同

    angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...

  4. 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别，你知道么？

    在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...

  5. angular（3）服务 --注入---自定义模块--单页面应用

    ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...

  6. AngularJs学习笔记5——自定义服务

    前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...

  7. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

  8. angularJs自定义服务（实现签名和加密）

    写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...

  9. angularJs自定义服务

    在AngularJS中,系统内置的服务都是以$开头,所以我们的自定义服务尽量避免以$开头.自定义服务的方式有如下几种: 使用Module的provider方法 使用Module的factory方法 使 ...

随机推荐

  1. .Net中XML,JSON的几种处理方式

    一.XML: 1.基本了解: xml,Extensible markup language可扩展标记语言,用于数据的传输或保存,特点,格式非常整齐数据清晰明了,并且任何语言都内置了xml分析引擎, 不 ...

  2. php不用递归完成无限分类，从表设计入手完整演示过程

    无限分类是什么就不废话了,可以用递归实现,但是递归从数据库取东西用递归效率偏低,如果从表设计入手,就很容易做到网站导航的实现,下面是某论坛导航,如下图 网上无限分类大多不全面,今天我会从设计表开始, ...

  3. Python中进程和线程的总体区别

    Num01–>线程 线程是操作系统中能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位. 一个线程指的是进程中一个单一顺序的控制流. 一个进程中可以并发多条线程,每条线程并行 ...

  4. MySQL数据库命令大全

    --数据库操作前的准备-- 创建数据库-- create database python_test_1 charset=utf8; -- 使用数据库-- use python_test_1; -- s ...

  5. Bit Manipulation-476. Number Complement

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...

  6. 六，mysql优化——小知识点

    1,选择适当的字段类型,特别是主键 选择字段的一般原则是保小不保大,能占用字节小的字段就不用大字段.比如主键,建议使用自增类型,这样节省空间,空间就是效率!按4个字节和按32个字节定位一条记录,谁快谁 ...

  7. HTML 5 使用 FileReader、FormData实现文件上传

    一.FileReader FileReader 对象允许Web应用程序异步读取存储在用户计算机中的文件(或缓冲区的原始数据),使用File或Blob对象指定要读取的文件或数据. 1.1 实例化 var ...

  8. 【wireshark】插件开发（三）：Lua插件 Dissector

    // TODO: 部分内容需要修改 1. 骨架 首先新建一个文件,命名为foo.lua,注意此文件的编码方式不能是带BOM的UTF8,否则wireshark加载它时会出错(不识别BOM): -- @b ...

  9. 浅析js中取绝对值的2种方法

    1.abs()   var aaa=-20;   var bbb=Math.abs(aaa); 2.加减法   var aaa=-20;   var bbb=-aaa

  10. python安装mysqlclient模块时报mysql_config not found解决方法

    在配置Flask框架,安装mysqlclient时报一下错误 翻译了一下大概是 mysql_config  文件没找到, 解决方法是安装缺失的文件. sudo apt install libmysql ...