程序博客网 > 乐知英语

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

来源：互联网 发布：乐知英语 编辑：程序博客网 时间：2024/06/05 23:43

  • 引言
  • 常用服务的使用
    • 1scope和rootScope服务的使用
      • 11 scope服务的使用
      • 12 rootscope服务的使用
      • 13 全局服务注入到其他方法中apprun方法
    • 2 http服务的使用
      • 21 httpget方法的使用
      • 22 httppost方法的使用
    • 3 location服务的使用
      • 31 host方法的使用
      • 32 url方法的使用
      • 33 path方法的使用
      • 34 replace方法的使用注意和path的区别replace方法是不可以后退的path是可以后退的
    • 4 cacheFactory服务的使用
    • 5 timeout服务和interval服务的使用
    • 6 sce服务的使用
      • 61 sce服务的使用

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>
  • 运行结果

这里写图片描述

1 0
乐知英语 乐知英语
原创粉丝点击
热门IT博客
eia数据美国公布时间eia数据美国公布时间
收纳盒 知乎收纳盒 知乎
网络空间租用价格
贪心算法 最优合并
极品番号吧改域名了
淘宝评价时间是多久
js new audio
物联网 人才需求数据
陈子豪淘宝外设店
程序员私活
淘宝网钢笔学生
php apc缓存
2015网络新词及意思
淘宝以后会取消c店吗
安徽芜湖java工作
流体阻力系数数据曲线
河南百度seo排名优化
excel筛选数据后求和
青岛淘宝店托管
mac系统c语言编程软件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 洗纹身的原理 哺乳期可以洗纹身吗 有没有可以洗掉的纹身 消结安胶囊 消结安胶囊说明书 附睾炎硬结不消有事吗 怎么消奶结 土豆片消奶结快速简单的方法 我附睾炎硬结终于消了 消结安胶囊效果怎么样 回奶之后硬块奶结会自己消吗 消耗品有哪些 日常消耗品 办公消耗品有哪些 工业消耗品 车是消耗品 汽车消耗品 日常消耗品有哪些 消耗品是什么意思 什么叫消耗品 消胀片 消胀片说明书 消雷器 消谐器 消脂器 一次消谐器 什么茶叶可以减肥消脂 消脂花草茶 什么茶能减肥消脂 减肥消脂茶 减脂茶 肌肉怎么减下去 健康饮食食谱 杜坎减肥法食谱 阿特金斯减肥法 大肚腩喝什么茶减肥效果好吗 消脂针 消脱脂 脱消止 止脱生发散 消脱止效果

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里