AngularJS 入门2-服务与$http

AngularJS 入门2-服务与$http

 

1.AngularJS 服务(Service)

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

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

AngularJS 内建了30 多个服务。

常用内建服务：

① $location 服务，它可以返回当前页面的 URL 地址。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

②$http 是 AngularJS 应用中最常用的服务。发送请求，接受数据。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

③$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);
});

④$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);
});

创建自定义服务，服务就是一个函数

创建名为hexafy 的服务:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

 

2.AngularJS 的$http服务

$http 是 AngularJS 中的一个核心服务，用于发送请求并读取远程服务器的数据。

以下是存储在web服务器上的 JSON 文件： http://www.runoob.com/try/angularjs/data/sites.php

{     "sites": [         {             "Name": "菜鸟教程",             "Url": "www.runoob.com",             "Country": "CN"         },         {             "Name": "Google",             "Url": "www.google.com",             "Country": "USA"         },         {             "Name": "Facebook",             "Url": "www.facebook.com",             "Country": "USA"         },         {             "Name": "微博",             "Url": "www.weibo.com",             "Country": "CN"         }     ] }

 

废弃声明 (v1.5)

v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

 

AngularJS1.5 以上版本 - 通用方法 - 实例                                                                                                                      var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) {     $http({         method: 'GET',         url: 'https://www.runoob.com/try/angularjs/data/sites.php'     }).then(function successCallback(response) {             $scope.names = response.data.sites;         }, function errorCallback(response) {             // 请求失败执行代码     }); });

AngularJS1.5 以上版本 - 简写方法 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) {   $http.get("http://www.runoob.com/try/angularjs/data/sites.php")   .then(function (response) {$scope.names = response.data.sites;}); });

AngularJS1.5 以下版本 - 简写方法 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) {   $http.get("http://www.runoob.com/try/angularjs/data/sites.php")   .success(function (response) {$scope.names = response.sites;}); });