標籤：watch service char app log ati time oct body
AngularJS 服務(Service)在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
為什麼使用服務?在很多服務中，比如 $location 服務，它可以使用 DOM 中存在的對象，類似 window.location 對象
因為這些服務可以擷取到Angular應用聲明周期的每一個階段，並且和$watch整合，讓Angular可以監控應用，處理事件變化。普通的DOM對象則不能在Angular應用聲明周期中和應用整合。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <div ng-app="myApp" ng-controller="myCtrl"> <p>現在時間是:</p> <h1>{{theTime}}</h1> </div> <p>$interval 訪問在指定的周期(以毫秒計)來調用函數或計算運算式。</p></div><script> var app = angular.module(‘myApp‘, []); app.controller(‘myCtrl‘, function($scope,$interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime= new Date().toLocaleTimeString(); },1000); });</script></body></html>建立自訂服務
你可以建立訪問自訂服務，連結到你的模組中：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <p>255 的16進位是:</p> <h1>{{hex}}</h1></div><p>自訂服務，用於轉換16進位數：</p><script> var app = angular.module(‘myApp‘, []); app.service(‘heaxfy‘,function () { this.myFunc = function (x) { return x.toString(16); } }); app.controller(‘myCtrl‘, function($scope,heaxfy) { $scope.hex = heaxfy.myFunc(255); });</script></body></html>
$watch：持續監聽資料上的變化，更新介面，如：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <b>請輸入姓名：</b><br> <b>姓：</b><input type="text" ng-model="lastName"><br> <b>名：</b><input type="text" ng-model="firstName"><br> <h1>{{ lastName + " " + firstName }}</h1> <h2>{{ fullName }}</h2></div><script> var app = angular.module(‘myApp‘, []); app.controller(‘myCtrl‘, function($scope) { $scope.lastName = ""; $scope.firstName = ""; //監聽lastName的變化，更新fullName $scope.$watch(‘lastName‘, function() { $scope.fullName = $scope.lastName + " " + $scope.firstName; }); //監聽firstName的變化，更新fullName $scope.$watch(‘firstName‘, function() { $scope.fullName = $scope.lastName + " " + $scope.firstName; }); });</script></body></html>
AngularJS學習篇（八）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
