angularJS的Service(服务)基础

来源：互联网发布：印第安人和亚洲人知乎编辑：程序博客网时间：2024/05/21 22:39

一下代码可直接复制保存为html文件查看效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>angularJs的服务(service)简单介绍</title>        <script src="js/Angular.js"></script>    </head>    <body>        <div ng-app="serviceApp" ng-controller="serviceController">            <div>                <h4>$location服务</h4>                当前文件所在路径：{{url}}            </div>            <div>                <h4>$http服务</h4>                {{myWelcome}}            </div>            <div>                <h4>$interval 服务</h4>                <p>现在时间是:</p>                {{theTime}}            </div>            <div>                <h4>$timeout 服务</h4>                {{myHeader}}            </div>            <div>                <h4>自定义服务myService</h4>                <form ng-controller="myController">                    255转换16进制后的值为{{dex}}                </form>            </div>            <script>                var app = angular.module("serviceApp",[]);                //自定义服务                app.service("myService",function(){                    this.fuc = function(num){                        return num.toString(16);                    }                });                app.controller("serviceController",function($scope,$location,$http,$interval,$timeout,myService){                    //$location服务                    $scope.url=$location.absUrl();                    //$http服务                    $http.get("js/httpService.html").then(function (response) {                      $scope.myWelcome = response.data;                     });                     //$interval 间隔服务                    $scope.theTime = new Date().toLocaleTimeString();                    $interval(function () {                        $scope.theTime = new Date().toLocaleTimeString();                    }, 1000);                    //$timeout 定时任务                    $scope.myHeader = "Hello World!";                    $timeout(function () {                        $scope.myHeader = "How are you today?";                    }, 2000);                });                 //使用自定义服务                app.controller("myController",function($scope,myService){                    $scope.dex = myService.fuc(255);                })            </script>        </div>        <hr />        <div>            <h3>$location服务</h3>            $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。<br />            AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。<br />        </div>        <div>            <h3>$http 服务</h3>            $http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。        </div>        <div>            <h3>$interval 服务</h3>            AngularJS $interval 服务对应了 JS window.setInterval 函数。        </div>        <div>            <h3>$timeout 服务</h3>            AngularJS $timeout 服务对应了 JS window.setTimeout 函数。        </div>        <div>            <h3>自定义 服务</h3>            你可以创建访问自定义服务，链接到你的模块中。<br/>            要使用访问自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:        </div>        <div>            <h4>$apply方法</h4>             $apply 方法可以修改数据             $scope.$apply(function() {                $scope.theTime = new Date().toLocaleTimeString();            });        </div>        <div>            <h4>$watch</h4>            持续监听数据上的变化，更新界面            //监听lastName的变化，更新fullName           $scope.$watch('lastName', function() {              $scope.fullName = $scope.lastName + " " + $scope.firstName;           });        </div>    </body></html>

js/httpService.html文件

<h2>欢迎访问我</h2>

0 0