【MVVM】- AngularJS 服务应用

最新推荐文章于 2025-08-24 23:58:13 发布

转载最新推荐文章于 2025-08-24 23:58:13 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yangzhiwei256/blog/3015757

文章标签：

#json #python #javascript #ViewUI

本文深入探讨AngularJS服务的基本用法，包括内置服务如$location、$http、$timeout和$interval的功能与实例。同时，通过代码示例介绍了自定义服务与过滤器的创建方法，以及$http服务如何实现与服务器的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

AngularJS 服务基本用法

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

$location：返回当前页面的 URL 地址，对应window.location
$http服务：服务向服务器发送请求，应用响应服务器传送过来的数据
$timeout：对应 JS window.setTimeout 函数
$interval：对应 window.setInterval 函数

外观界面

<div ng-app="myApp" ng-controller="myCtrl">
当前页面访问地址$location:{{myUrl}}<br>
定时器服务$timeout:{{myHeader}}<br>
计时器服务：$interval:{{time}}<br>
自定义服务：{{msg}}<br>
自定义过滤器服务：{{num | myFilter}}
</div>

操作逻辑

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location,$timeout,$interval,myservice) {
    $scope.myUrl = $location.absUrl();
    $scope.time=0;
    $scope.num=100;
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
    $interval(function(){
        $scope.time++;
    },1000);
    $scope.msg=myservice.myFunc(20);
});

//创建自定义过滤器，过滤器中使用自定义服务
app.filter('myFilter',['myservice', function(myservice) {
    return function(x) {
        return myservice.myFunc(x);
    };
}]);

//创建自定义服务
app.service('myservice', function() {
    this.myFunc = function (x) {
        return x.toString(16)+" this is a service!";
    }
});

效果：

AngularJS $http服务

$http：用于进行访问http请求的服务，$http.get() 从web服务器上读取 JSON 数据

外观正文

<div ng-app="myApp" ng-controller="siteCtrl"> 
<p>服务器获取数据遍历显示：</p>
<ul>
  <li ng-repeat="x in persons">
    {{ x.name + '--' + x.age }}
  </li>
</ul>
</div>

js操作逻辑

var app = angular.module('myApp', []);
 /*
 * $http.get(url) 从web服务器上读取静态 JSON 数据:
 * url:标识服务器的请求地址
 * success: 请求成功回调函数，并将返回值存入data,类似ajax的请求
 */
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://localhost:8080/webBasic/AngularJSController")
  .success(function (data) {$scope.persons = data;});
});

转载于:https://my.oschina.net/yangzhiwei256/blog/3015757