`

AngularJS 服务

阅读更多

AngularJS 服务

AngularJS 中可以创建自己的服务,或使用内建服务。

在 AngularJS 中,服务是一个函数或对象,可在AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

$location 服务,返回当前页面的 URL 地址。

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $location) {

    $scope.myUrl = $location.absUrl();

});

$http 向服务器发送请求,应用响应服务器传送过来的数据。

AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {

    $http.get("welcome.htm").then(function (response) {

        $scope.myWelcome = response.data;

    });

});

<div ng-app="myApp" ng-controller="customersCtrl"> 

    <ul>

        <li ng-repeat="x in names">

            {{ x.Name + ', ' + x.Country }}

        </li>

    </ul>

</div>

<script>

    var app = angular.module('myApp', []);

    app.controller('customersCtrl', function($scope, $http) {

        $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")

        .success(function(response) {$scope.names = response.records;});

    });

</script>

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $timeout) {

    $scope.myHeader = "Hello World!";

    $timeout(function () {

        $scope.myHeader = "How are you today?";

    }, 2000);

});

AngularJS $interval 服务对应了 JS window.setInterval 函数。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $interval) {

    $scope.theTime = new Date().toLocaleTimeString();

    $interval(function () {

        $scope.theTime = new Date().toLocaleTimeString();

    }, 1000);

});

 

创建自定义服务

app.service('hexafy', function() {

    this.myFunc = function (x) {

        return x.toString(16);

    }

});

app.controller('myCtrl', function($scope, hexafy) {

    $scope.hex = hexafy.myFunc(255);

});

分享到:
评论

相关推荐

    awesome-angularjs, 出色的AngularJs服务,指令,实用程序和资源列表.zip

    awesome-angularjs, 出色的AngularJs服务,指令,实用程序和资源列表 出色的AngularJS awesome 服务,指令,过滤器,实用工具和资源的列表。目录:种子项目用户管理器移动设备Web服务管理器资产管理器路由筛选器指令...

    AngularJS 服务 demo

    这个例子可能展示了一个使用AngularJS服务来处理CRUD操作的简单应用。通常,我们会创建一个服务来封装与服务器的交互,比如使用$http服务进行Ajax请求。 让我们详细看看如何实现这样的服务: 1. **创建服务**: ...

    AngularJS服务service用法总结

    首先,我们需要了解什么是AngularJS服务Service。在AngularJS中,服务是一个单例对象或函数,它能够执行特定的任务或提供特定的功能。每个服务都是独立的,可以注入到应用的任何部分,而且每个AngularJS应用只能创建...

    angularjs-datatables-service:用于angular.datatables.js的AngularJS服务包装器

    用于angular.datatables.js的AngularJS服务包装器 概述 这是用于angular-datatables.js的AngularJS服务包装器。 安装 npm install angularjs-datatables-service --save 用法 包括以下脚本 &lt; script type =" ...

    AngularJS入门教程之服务(Service)

    AngularJS服务可以理解为在应用的全局范围内共享方法和变量的容器,它们是可注入的,这意味着你可以在需要的地方,如控制器(Controllers)、指令(Directives)、过滤器(Filters)等中,注入服务并使用它们所提供...

    AngularJS 服务详细讲解及示例代码

    AngularJS 服务是框架的核心组件之一,用于封装和管理应用中的可重用功能。这些服务遵循单一职责原则,使得代码更加模块化,易于维护和测试。服务通过AngularJS的依赖注入(Dependency Injection, DI)系统进行实例...

    AngularJS 服务(Service)

    AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务。 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。 AngularJS 内建了30 多个服务。 有个 $...

    AngularJS 学习资料

    《AngularJSServices》这本书深入探讨了如何设计、构建和服务,并对其进行了全面的测试,为开发者提供了一个坚实的基础,帮助他们更好地理解和运用AngularJS服务。 - **设计**:设计阶段主要关注服务的架构和模块化...

    angular-http-throttler:AngularJS服务来限制$ http请求

    AngularJS服务来限制$ http请求 需要AngularJS&gt; = 1.1.5 受到angular-http-auth模块@ 启发 用法 将http-throttler模块作为依赖项添加到您的应用程序模块: var myAppModule = angular.module('MyApp', ['...

    eeh-later:将 Later.js 作为 AngularJS 服务公开

    总结一下,通过将Later.js与AngularJS服务相结合,我们可以轻松地在AngularJS应用中实现复杂的时间调度。这种方法使得代码组织更加清晰,同时也提高了代码的可复用性和测试性。在实际项目中,可以根据具体需求扩展`...

    angular-sound:AngularJS服务通过Web Audio API播放音频

    AngularJS服务,用于通过Web Audio API播放音频。 安装 通过凉亭安装: # from the terminal at the root of your project bower install angular-sound 添加到您的模块部门 angular . module ( 'xxxx' , [ '...

    angularjs ng-table demos

    6. **扩展功能**:如何结合其他AngularJS服务,如`ngResource`来实现异步加载数据,或者使用`ngAnimate`添加过渡效果。 `ng-table-master`这个文件名可能表示这是`ng-table`项目的主分支或者是最新的版本,其中包含...

    ng-calc:使用 AngularJS 服务的计算器

    本文将深入探讨AngularJS服务的概念以及在计算器应用中的实际运用。 ### 1. AngularJS 服务基础 在AngularJS中,服务是一种可重用的对象,它们提供特定的功能,如数据存储、API调用、状态管理等。服务可以通过`...

    angularjs breadcrumb

    2. **创建Breadcrumb服务**: 创建一个AngularJS服务,用于管理面包屑的生成和更新。服务是可注入的,可以在应用的不同组件之间共享状态。例如,我们可以创建一个名为`breadcrumbService`的服务: ```javascript ...

    Restangular:AngularJS 服务处理 Rest API Restful Resources-开源

    Restangular 是一种 AngularJS 服务,它使用最少的客户端代码简化常见的 GET、POST、DELETE 和 UPDATE 请求。 它非常适合任何使用来自 RESTful API 的数据的 WebApp。 注意 此版本的 Restangular 仅支持 Angular 1。...

    用AngularJS开发下一代web应用pic

    6. **服务**:AngularJS服务是可复用的实体,用于封装功能,如$http服务用于发送HTTP请求,$rootScope服务是所有控制器共享的全局作用域。 7. **路由**:AngularJS的uirouter或ngRoute模块提供了页面路由功能,使得...

    AngularJS的tree控件

    10. **集成其他AngularJS服务** AngularJS的树控件还可以与其他服务集成,如$http用于异步获取数据,$q用于处理异步操作,以及$compile用于动态编译和插入HTML。 综上所述,创建一个AngularJS的Tree控件涉及到多个...

    angularjs-sharepoint-authentication:高级别的angularJS服务,可在线验证Sharepoint

    angularjs共享点身份验证通过此简单的angularJS服务,您可以在线验证共享点。 默认情况下,它已添加到名为app的角度模块中。 不要忘记将模块名称更改为所需的模块。注入“ SharepointOnlineAuthenticator”服务。...

Global site tag (gtag.js) - Google Analytics