【MVVM】- AngularJS 服務應用
阿新 • • 發佈:2019-02-28
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 = d