• AngularJs之六(服务)


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

    最常用的服务:$location  服务,  $http 服务, $timeout 服务,$interval 服务,创建自定义服务
    一:$location服务。
    $location服务可以返回当前页面的 URL 地址
    注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。

    <div  ng-app="myapp" ng-controller="mycc">
        当前页面的网址是:{{url}}
    </div>
    <script>
    var app=angular.module("myapp",[]);
         app.controller("mycc",function($scope,$location){
            $scope.url=$location.absUrl();
            })
    </script>

    二:$timeout

    $timeout 服务是时间延迟,例:

    <div ng-app="myapp" ng-controller="mycc">
        <h1>{{mmm}}</h1>
    </div>
    <script>
    var app=angular.module("myapp",[]);
    app.controller("mycc",function($scope,$timeout){
         $scope.mmm=“明明可以靠脸吃饭,而我却仍然以写代码为生";
         $timeout(function(){
              $scope.mmm=“这就是我和明明不同的人生";
             },2000)
        })
    </script>

    三:$interval

    每间隔 指定时间执行一次,例:

    var app = angular.module('myApp', []);app.controller('mycc', function($scope, $interval) {    $scope.theTime = new Date().toLocaleTimeString();    $interval(function () {        $scope.theTime = new Date().toLocaleTimeString();    }, 1000);}); 

    四:自定义服务

    可以创建访问自定义服务,链接到你的模块中:
    自定义的的服务 hexafy 将一个数字转换为16进制数:

    <div ng-app="myApp">在过滤器中使用服务:<h1>{{255 | myFormat}}</h1></div>
    <script>
        var app = angular.module('myApp', []);
        app.service('hexafy', function() {
              this.myFunc = function (x) {    
                     return x.toString(16);
                }
        });
        app.filter('myFormat',['hexafy', function(hexafy) {
            return function(x) {
                return hexafy.myFunc(x);
            };
        }]);
    </script>
  • 相关阅读:
    js 兼容各类手机 的写法 待续
    css 兼容 各类手机的写法 待续
    数组的解构赋值
    let 和 const 命令
    ECMAScript 6 简介
    webpack4新建一个项目
    Webpack 4 Tutorial: from 0 Conf to Production Mode
    webpack4.1.1的使用详细教程
    git merge git pull时候遇到冲突解决办法git stash
    Git 常用命令速查表(图文+表格)
  • 原文地址:https://www.cnblogs.com/liulijun330/p/6241846.html
Copyright © 2020-2023  润新知