（10）AngularJS 1.X 之常用服务_查询angularjs 已经支持的服务-CSDN博客

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/54882857

引言
常用服务的使用

1.引言

在本博客中主要介绍一下服务的使用，AngularJS已经给我们提供的服务，AngularJS给我们提供的服务主要分为两大类：

具有provider供应商的服务
不具有provider供应商的服务

那么这两种服务有什么区别呢？具有供应商的服务可以通过config方法配置我们的服务属性，不具有供应商的服务是不可以通过config配置属性的。还有的服务的作用域是不一样的。举个例子：比如$scope服务，作用域是控制器范围内的，所以$scope服务只能注入到控制器中，还有的服务是全局范围的，可以注入到更多的方法中，比如$filter服务。接下来我们就来介绍几个比较常用的服务，其中有：$scope，$rootScope，$http，$location，$cacheFactory，$timeout，$interval，$sce。

2 常用服务的使用

2.1.`$scope`和`$rootScope`服务的使用

在最初使用控制器的时候，我们第一次接触$scope服务，我们可以使用$scope服务给某一个控制器设置变量，也就是说我们使用$scope设置的变量是局部的，是属于控制器范围的，如果我们想设置全局范围的变量，那么我们可以使用$rootScope服务，其次$scope是没有供应商的，但是$rootScope是具有供应商的，也就是说$scope服务仅仅可以注入到我们的控制器中，但是$rootScope服务是可以注入到多种方法当中。接下来我们就用实例来看一下这两个服务的具体使用。

2.1.1 `$scope`服务的使用

首先我们创建一个控制器（然后将$scope注入到控制器中）

        var app=angular.module("myApp",[]);
        app.controller("firstController", function ($scope) {
            $scope.name="hello world"
        })

创建我们的html片段

<body>
    <div ng-controller="firstController">{{name}}</div>
</body>

运行结果

这里写图片描述

2.1.2 `$rootscope`服务的使用

使用$rootscope服务我们可以设置我们的全部变量，$rootscope同样可以注册到我们的控制器中，但是和$scope相比而言，$rootscope服务所创造的变量不是局限于控制器作用域中。

首先我们创建我们的控制器

var app=angular.module("myApp",[]);
        app.controller("firstController", function ($scope,$rootScope) {
            $scope.name="hello $scope";
            $rootScope.name="hello $rootScope"
        })

创建我们的html片段（注意：一个name属性是在控制器中，一个name属性没有在控制器作用域）

<body>
    <div ng-controller="firstController">{{name}}</div>
    {{name}}
</body>

运行结果

这里写图片描述

2.1.3 全局服务注入到其他方法中（`app.run`方法）

在前面我们说过，服务分为两种，服务的作用域是不一样的，一些全局的作用域服务可以通过run 方法初始化全局的数据 ,只对全局作用域起作用如$rootScope服务，

通过run方法注入全局变量

        var app=angular.module("myApp",[]);
        app.run(function($rootScope){
            $rootScope.name="hello $rootScope";
        })

html片段

<body>
    {{name}}
</body>

运行结果

这里写图片描述

我们说过只可以将具有供应商的服务注入到其他方法中，如果我们将没有供应商的服务注入到其他方法中会出现什么情况呢？以$scope为例，我们看一看（错误代码）

 var app=angular.module("myApp",[]);
        app.run(function($scope){
            $scope.name="hello $rootScope";
        })

程序错误：找不到供应商

这里写图片描述

2.2 `$http`服务的使用

关于$http服务的使用主要用于ajax的实现，其中$http服务主要有三种方法get，post，jsonp。

get：用于get请求
post：用于post请求
jsonp：用于jsonp请求

在这里我们主要演示一下get方法和post方法的使用。

创建一下我们的json文件（person.json）

[{
  "name":"wpx",
  "age":"20"
},{
  "name":"zlr",
  "age":"22"
}]

2.2.1 `$http.get`方法的使用

直接使用get方法发送请求（get方法的第一个参数是url，第二个参数是向服务器传的参数）

        //控制器
        var app=angular.module("myApp",[]);
        app.controller("firstController",function($scope,$http){
            $scope.get=function(){
                $http.get("person.json",{params:{name:"wpx"}}).then(function (result) {
                    console.log(result.data)
                })
            }
        })
        //html标签
        <div ng-controller="firstController">
            <button ng-click="get();">发送请求</button>
        </div>

使用参数列表发送get请求（params会生成到url后面，get请求）

        var app=angular.module("myApp",[]);
        app.controller("firstController",function($scope,$http){
            $scope.get=function(){
                $http({
                    url:"person.json",
                    params:{
                        id:10
                    },
                    method : 'GET',
                }).then(function (result) {
                    console.log(result.data)
                })
            }
        })
        //html标签
        <div ng-controller="firstController">
            <button ng-click="get();">发送请求</button>
        </div>

代码运行发送的url

这里写图片描述

2.2.2 `$http.post`方法的使用

直接使用post方法发送请求（post方法的第一个参数是url，第二个参数是向服务器传的参数）

        var app=angular.module("myApp",[]);
        app.controller("firstController",function($scope,$http){
            $scope.get=function(){
                $http.post("person.json",{
                    "id":"wpx"
                }).then(function (result) {
                    console.log(result.data)
                })
            }
        })
        //html标签
        <div ng-controller="firstController">
            <button ng-click="get();">发送请求</button>
        </div>

使用参数列表发送POST请求（注意：请求体用的data参数）

        var app=angular.module("myApp",[]);
        app.controller("firstController",function($scope,$http){
            $scope.get=function(){
                $http({
                    url:"person.json",
                    method:"POST",
                    data:{
                        id:"wpx"
                    }
                }).then(function (result) {
                    console.log(result.data)
                })
            }
        })
        //html标签
        <div ng-controller="firstController">
            <button ng-click="get();">发送请求</button>
        </div>

使用该方法发送的url

这里写图片描述

2.3 `$location`服务的使用

$location服务解析地址栏中的 URL（基于 window.location），让你在应用代码中能获取到。改变地址栏中的 URL 会反应$location 服务中，反之亦然。在这里主要介绍$location服务的几种方法。

host()：返回url中的主机路径
path()：用于改变网页的url
replace()：可以控制是否有返回键
url()：改变主机的url

2.3.1 `host()`方法的使用

代码实现

        var app=angular.module("myApp",[]);
        app.controller("firstController",function($location){
            console.log($location.host());
        })

运行结果

这里写图片描述

2.3.2 `url`方法的使用

代码实现

        var app=angular.module("myApp",[]);
        app.controller("firstController",function($location){
            $location.url("/hello");
        })

运行结果 （在url后面添加了#!/hello）

这里写图片描述

2.3.3 `path`方法的使用

代码实现

        var app=angular.module("myApp",[]);
        app.controller("firstController",function($location){
            $location.path('/hello')
        })

运行结果（只是在url结果添加了#!/hello）

这里写图片描述

2.3.4 `replace`方法的使用（注意和`path`的区别，`replace`方法是不可以后退的，`path`是可以后退的）

代码实现

        var app=angular.module("myApp",[]);
        app.controller("firstController",function($location){
            $location.path('/hello').replace()
        })

运行结果

这里写图片描述

2.4 `$cacheFactory`服务的使用

关于$cacheFactory服务的使用，是缓存的实现，一般用到该服务可以实现多个控制器之间的数据共享，比如在控制器A中存入缓存，然后在控制器B中获得缓存的数据，接下来我们就来看一下这个功能怎么实现。

代码实现

        var app=angular.module("myApp",[]);
        app.controller("A",function($scope,$cacheFactory){
            $scope.add= function () {
                //新建一个名字为myCache的缓存
                var cache = $cacheFactory('myCache');
                cache.put('name','hello');
            }
        })
        app.controller("B",function($scope,$cacheFactory){
            $scope.get= function () {
                //获取到缓存对象
                var cache = $cacheFactory.get('myCache');
                //获取键值对
                var name1=cache.get('name')
                //获取键值对
                var name2=cache.get('name')
                //移除键值对
                cache.remove('name')
                //获取键值对
                var name3=cache.get('name')
                console.log(name1);
                console.log(name2);
                console.log(name3);

            }
        })
        //html的实现
        <div ng-controller="A">
            <button ng-click="add();">添加数据</button>
        </div>
        <div ng-controller="B">
            <button ng-click="get();">获得数据</button>
        </div>

运行结果

这里写图片描述

2.5 `$timeout`服务和`$interval`服务的使用

关于$timeout服务和$interval服务的使用类似于js中的代码setTimeout()和setInterval()方法类似，$timeout服务是一定时间之后执行一次代码，$interval服务是一定时间间隔之后执行一次代码，接下来我们看一下这两个服务如何使用。

代码实现


        var app=angular.module("myApp",[]);
        app.controller("A",function($timeout,$interval){
            //一秒钟之后执行一次
            $timeout(function(){
                console.log("$timeout");
            },1000);
            //每间隔一秒钟执行一次
            $interval(function () {
                console.log("$interval"+new Date().toString());
            },1000)
        })

运行结果

这里写图片描述

2.6 `$sce`服务的使用

在前面我们使用过ngSanitize插件，$sce服务和ngSanitize插件的作用差不多，该服务也用于解析html的，接下来我们就来使用一下该服务。

2.6.1 `$sce`服务的使用

*　创建我们的控制器

        var app=angular.module("myApp",[]);
        app.controller("firstController",function($scope,$sce){
            $scope.text=$sce.trustAsHtml("<h1>AAAA</h1>")
        })

创建html片段

    <div ng-controller="firstController">
        <div ng-bind-html="text"></div>
    </div>

运行结果

这里写图片描述

（10）AngularJS 1.X 之常用服务

1.引言

2 常用服务的使用

2.1.$scope和$rootScope服务的使用

2.1.1 $scope服务的使用

2.1.2 $rootscope服务的使用

2.1.3 全局服务注入到其他方法中（app.run方法）

2.2 $http服务的使用

2.2.1 $http.get方法的使用

2.2.2 $http.post方法的使用

2.3 $location服务的使用

2.3.1 host()方法的使用

2.3.2 url方法的使用

2.3.3 path方法的使用

2.3.4 replace方法的使用（注意和path的区别，replace方法是不可以后退的，path是可以后退的）

2.4 $cacheFactory服务的使用

2.5 $timeout服务和$interval服务的使用

2.6 $sce服务的使用

2.6.1 $sce服务的使用

2.1.`$scope`和`$rootScope`服务的使用

2.1.1 `$scope`服务的使用

2.1.2 `$rootscope`服务的使用

2.1.3 全局服务注入到其他方法中（`app.run`方法）

2.2 `$http`服务的使用

2.2.1 `$http.get`方法的使用

2.2.2 `$http.post`方法的使用

2.3 `$location`服务的使用

2.3.1 `host()`方法的使用

2.3.2 `url`方法的使用

2.3.3 `path`方法的使用

2.3.4 `replace`方法的使用（注意和`path`的区别，`replace`方法是不可以后退的，`path`是可以后退的）

2.4 `$cacheFactory`服务的使用

2.5 `$timeout`服务和`$interval`服务的使用

2.6 `$sce`服务的使用

2.6.1 `$sce`服务的使用