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

});