【MVVM】- AngularJS 服務應用

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