AngularJS中服务和自定义服务的常见方式及特点

服务需要引入angualr.sanitize.js模块；

var app = angular.module('myapp',['ngSanitize'])

 服务

1. $http 能够进行数据的交互

eg:调用百度接口，通过回调函数将搜索的值输出

<div ng-controller="yourController">
        <input type="text" ng-change="search()" ng-model="wd">
        <ul>
            <li ng-repeat="word in dataList"><a href="https://www.baidu.com/s?ie=utf-8&wd={{word}}">{{word}}</a></li>
        </ul>
    </div>

  app.controller('yourController',function($scope,$http){
         $scope.search = function(){
             $http({
                 url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                 method:'jsonp',
                 params:{
                     wd:$scope.wd,
                     cb:'JSON_CALLBACK'
                 }
             }).success(function(results){
                 $scope.dataList = results
             })
         }
     })

method:代表传递方法 get/post

url:数据接口

params：提交数据 相当于$.ajax里的data：{}

 

2.$location 服务

        console.log($location.absUrl()) //输出绝对地址
        console.log($location.host()) //输出域名
        console.log($location.port()) //输出端口
        console.log($location.protocol()) //协议
        $location.path("h")  //设置哈希值 hash 切换页面
        console.log($location.path()) // #/hk

3. $log 服务

       $log.error("ppp")  错误提示
       $log.info("ppp")   正常输出
       $log.warn("ppp")   警告
       $log.log('ppp')    正常输出

自定义服务

1. provider 既返回基本类型，也可以返回对象类型；也是唯一可以注入到config的服务；名称是***Provider

 

可以在创建服务器之前先对服务器进行配置，因为provider可以通过定义config，通过$get来访问；

用法：外面return出来的是这个服务的供应商，供应商的$get方法里返回的才是我们使用的部分，可以通过更改供应商的部分参数来控制服务的功能，

myapp. provider ('myHttpService',['$http',function($http){
     return {
         $get:function(){
         return:{//这里才是输出
          } 
         }
}])

配置服务的供应商要放在配置之前

  app.config(function(_serviceProvider){
        _serviceProvider.info = "7m"
    })

控制器

app.controller('myController',function($scope,_service){
      _service.surf()      
    })

2. factory 既返回基本类型，也可以返回对象类型

特点：服务没有固定格式,先创建，再调用;自定义的服务可以依赖注入其他服务;

eg: 返回随机数的案例

 app.factory('math_random',function(){
     //返回什么，服务就是什么 
    return {
        random:function(num2,num1){
            return Math.random()*(num2-num1)+num1
        }
    }
 })
 app.controller('myController',function($scope,$http,$log,math_random){
     console.log(math_random.random(2,3))
 })

3. service 仅支持返回对象类型

最简单的创建方式，自带返回，支持面向对象的写法；在Angular中调用service会用new关键字一个实例的服务；

app.service('_service',function(){
        this.say = function(){
            alert("haha")
        }
    })
    app.controller('myController',function($scope,_service){
        console.log(_service) 
        // _service.say()
    })

angularJS对服务供应商配置

有的服务很可能是有服务供应商的,例如下面的页面输出的时候：！！1+2！！

我们可以通过config对服务供应商进行配置以修改功能

app.config(['$interpolateProvider',function($interpolateProvider){
    $interpolateProvider.startSymbol("!!") 
    $interpolateProvider.endSymbol("!!")
}])