AngularJS สนับสนุนแนวคิดของ "การแยกข้อกังวล" ในสถาปัตยกรรมโดยใช้บริการ บริการเป็นฟังก์ชั่น JavaScript และรับผิดชอบในการทำงานเพียงอย่างเดียว สิ่งนี้ทำให้พวกเขาเป็นเอนทิตีแยกต่างหากที่ได้รับการดูแลและทดสอบ ตัวควบคุมตัวกรองสามารถเรียกพวกเขาว่าเป็นพื้นฐานสำหรับข้อกำหนด บริการใช้กลไกการฉีดการพึ่งพาของ AngularJS เพื่อฉีดยาตามปกติ
AngularJS ให้บริการที่แท้จริงมากมายเช่น: $ http, $ route, $ window, $ ตำแหน่ง ฯลฯ บริการแต่ละบริการมีหน้าที่รับผิดชอบเช่นงานเฉพาะ, $ http ใช้เพื่อสร้างการโทร Ajax เพื่อรับข้อมูลเซิร์ฟเวอร์ $ Route ใช้เพื่อกำหนดข้อมูลการกำหนดเส้นทาง ฯลฯ บริการในตัวจะถูกนำหน้าด้วยสัญลักษณ์ $ เสมอ
มีสองวิธีในการสร้างบริการ
โรงงาน
ให้บริการ
ใช้วิธีการจากโรงงาน
การใช้วิธีโรงงานเราจะกำหนดโรงงานก่อนแล้วจึงกำหนดวิธีการให้กับมัน
var mainapp = angular.module ("MainApp", []); MainApp.factory ('MathService', function () {var Factory = {}; factory.multiply = function (a, b) {return a * b} return factory;});วิธีใช้บริการ
ใช้วิธีการบริการเรากำหนดบริการแล้วกำหนดวิธีการ นอกจากนี้ยังมีบริการฉีดที่มีอยู่แล้ว
mainapp.service ('calcservice', ฟังก์ชั่น (MathService) {this.square = function (a) {return mathservice.multiply (a, a);}});ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงคำแนะนำทั้งหมดข้างต้น
testangularjs.html
<html> <head> <title> รูปแบบ js เชิงมุม </title> </head> <body> <h2> แอปพลิเคชันตัวอย่าง AngularJS </h2> <div ng-app = "mainapp" ng-controller = "calccontroller"> <p> ป้อนจำนวน: < ng-click = "square ()"> x <up> 2 </sup> </button> <p> ผลลัพธ์: {{result}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min Angular.Module ("MainApp", []); MainApp.factory ('MathService', function () {var Factory = {}; factory.multiply = function (a, b) {return a * b} return factory;}); mainapp.service ('calcservice', ฟังก์ชั่น (MathService) {this.square = function (a) {return mathservice.multiply (a, a);}}); MainApp.Controller ('calccontroller', ฟังก์ชั่น ($ scope, calcservice) {$ scope.square = function () {$ scope.result = calcservice.square ($ scope.number);}}); </script> </body> </html>ผลลัพธ์
เปิด textangularjs.html ในเว็บเบราว์เซอร์ ผลลัพธ์มีดังนี้
ข้างต้นเป็นข้อมูลพื้นฐานสำหรับบริการ AngularJS เราจะจัดระเบียบข้อมูลที่เกี่ยวข้องต่อไปในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!