zoukankan      html  css  js  c++  java
  • AngularJS 服务(Service)

    1.  什么是服务?

    • 在AngularJS中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
    • AngularJS 内建了30 多个服务。
    • AngularJS 中你可以创建自己的服务,或使用内建服务。

    2.  为什么使用服务?

    • 在很多服务中,比如 $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象,但 window.location 对象在 AngularJS 应用中有一定的局限性。
    • AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 比使用 window.location 对象更好。
     window.location$location.service
    目的 允许对当前浏览器位置进行读写操作 允许对当前浏览器位置进行读写操作
    API 暴露一个能被读写的对象 暴露jquery风格的读写器
    是否在AngularJS应用生命周期中和应用整合 可获取到应用声明周期内的每一个阶段,并且和$watch整合
    是否和HTML5 API的无缝整合 是(对低级浏览器优雅降级)
    和应用的上下文是否相关 否,window.location.path返回"/docroot/actual/path" 是,$location.path()返回"/actual/path"

    3.  $http服务:是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。

    var app = angular.module("myApp", []);
    app.controller('myCtrl', function($scope,$http) { /*myCtrl是一个JavaScript函数*/
        $http.get("./file/test.xml").then(function (response) {
            $scope.myXml = response.data;
        });
    });

    4.  $timeout服务:AngularJS $timeout 服务对应了 JS window.setTimeOut函数。

    var app = angular.module("myApp", []);
    app.controller('myCtrl', function($scope,$timeout) { /*myCtrl是一个JavaScript函数*/
        $scope.word = "你好!"
        $timeout(function(){
            $scope.word = "再见!"
        },2000);
    });

    5.  $interval服务:AngularJS $interval服务对应了 JS window.setInterval函数。使用这个方法可以在指定的时间刷新变量的值。

    var app = angular.module("myApp", []);
    app.controller('myCtrl', function($scope,$interval) { /*myCtrl是一个JavaScript函数*/
        $scope.theTime = new Date().toLocaleTimeString();
        $interval(function () {
            $scope.theTime = new Date().toLocaleTimeString();
        }, 1000);
    });

    6.  创建自定义的服务:通过app.service('myService', function(){})来自定义服务。当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。

    var app = angular.module("myApp", []);
    app.service('hexafy', function() {
        this.myFunc = function (x) {
            return x.toString(16);
        }
    });
    app.controller('myCtrl', function($scope,hexafy) { /*myCtrl是一个JavaScript函数*/
        $scope.number = hexafy.myFunc(16);
    });
  • 相关阅读:
    [FAQ] GitHub 开启二次验证之后,如何通过 https clone 项目 ?
    [FAQ] GoLand 需要手动开启代码补全吗 ?
    [FAQ] 夏玉米 按规则查询域名靠谱吗 ?
    [FAQ] Error: com.mysql.jdbc.Driver not loaded. :jdbc_driver_library
    [php-src] Php内核的有趣高频宏
    [php-src] Php扩展开发的琐碎注意点、细节
    [ELK] Docker 运行 Elastic Stack 支持 TLS 的两种简单方式
    [Contract] Solidity 生成随机数方案
    [MySQL] 导入数据库和表的两种方式
    [ELK] 生产环境中 Elasticsearch 的重要配置项
  • 原文地址:https://www.cnblogs.com/wgl1995/p/6264718.html
Copyright © 2011-2022 走看看