AngularJS 学习笔记 04：服务（services）

Dear 丶 2022-05-26 08:09 244阅读 0赞

*  服务（services）
    
     *  $location
     *  定时器（timeout 和 interval）
     *  $filter
     *  $log
     *  $http

# 服务（services） #

在 AngularJS 中，服务是一个函数或对象

var app = angular.module('App',[]);
    
    // 使用前需依赖注入该($location)服务
    app.controller('DemoCont', ['$scope', '$location', function($scope, $location){ 
        $scope.absUrl = $location.absUrl();
        $scope.url = $location.url();
    }])

## $location ##

*  获取当前完整路径  
    `$location.absUrl()`
 *  获取当前 url 路径（`#`后的内容，带参数和哈希值）  
    `$location.url()`
 *  获取当前 url 的子路径（`#`后的内容，不含参数和哈希值）  
    `$location.path()`
 *  获取协议（http / https）  
    `$location.protocol()`
 *  获取主机名  
    `$location.host()`
 *  获取端口  
    `$location.port()`
 *  获取哈希值  
    `$location.hash()`
 *  获取url参数（返回 `json` 格式对象）  
    `$location.search()`

## 定时器（timeout 和 interval） ##

var timeA = $interval(function(){ 
        // 指定时间为周期循环执行
    },1000)
    
    var timeB = $timeout(function(){ 
        // 指定时间后执行一次
    },1000)
    
    // 取消定时器
    $timeout.cancel(timeA)
    $interval.cancel(timeB)

## $filter ##

*  过滤器服务

var app = angular.module('App',[]);
    app.controller('DemoCont', ['$filter',function($filter){ 
    
        var currency = $filter("currency")(123.222, '￥');
        var uppercase = $filter('uppercase')('hannah');
        var limitTo = $filter('limitTo')('hannah', 5)
    
    }])

## $log ##

var app = angular.module('App',[]);
    app.controller('DemoCont', ['$log', function($log){ 
    
        $log.log('控制台输出消息');
        $log.info('普通信息')
        $log.warn('警告')
        $log.error('错误')
        $log.log('打印')
        $log.debug('调试')  
    
    }])

## $http ##

*  支持 then().then() 链式调用

var app = angular.module('App',[]);
    app.controller('DemoCont', ['$http', function($http){ 
    
        $scope.getData = function(){ 
            $http({
                url:'./data.json',
                method : 'get'
            }).then(function(data){ 
                console.log(data)
            },function(){ 
    
            })
        } 
    
    }])