บริการ AngularJS (บริการ)
ใน AngularJS คุณสามารถสร้างบริการของคุณเองหรือใช้บริการในตัว
บริการคืออะไร?
ใน AngularJS บริการเป็นฟังก์ชั่นหรือวัตถุที่สามารถใช้ในแอปพลิเคชัน AngularJS ของคุณ
AngularJS มีบริการในตัวมากกว่า 30 รายการ
มีบริการ $ ตำแหน่งที่สามารถส่งคืนที่อยู่ URL ของหน้าปัจจุบัน
ตัวอย่าง
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> URL หน้าปัจจุบัน: </p> <h3> {{myurl}} </h3> </div> <p> อินสแตนซ์นี้ใช้บริการ $ ในตัวเพื่อรับ URL ของหน้าปัจจุบัน </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope, $ ตำแหน่ง) {$ spope.myurl = $ location.absurl ();});ผลการทำงาน:
URL ของหน้าปัจจุบัน:
http://www.runoob.com/try/try.php?filename=try_ng_services
อินสแตนซ์นี้ใช้บริการ $ location ในตัวเพื่อรับ URL ของหน้าปัจจุบัน
หมายเหตุ: บริการ $ ตำแหน่งจะถูกส่งผ่านเป็นพารามิเตอร์ในคอนโทรลเลอร์ หากคุณต้องการใช้มันคุณต้องกำหนดในคอนโทรลเลอร์
ทำไมต้องใช้บริการ?
$ http เป็นบริการที่ใช้กันมากที่สุดในแอปพลิเคชัน AngularJS บริการส่งคำขอไปยังเซิร์ฟเวอร์และแอปพลิเคชันตอบสนองต่อข้อมูลที่ส่งโดยเซิร์ฟเวอร์
AngularJS จะตรวจสอบแอปพลิเคชันและจัดการกับการเปลี่ยนแปลงเหตุการณ์เสมอ AngularJS ใช้บริการ $ location ดีกว่าการใช้ Window. -Location Object
บริการ $ http
$ http เป็นบริการที่ใช้กันมากที่สุดในแอปพลิเคชัน AngularJS บริการส่งคำขอไปยังเซิร์ฟเวอร์และแอปพลิเคชันตอบสนองต่อข้อมูลที่ส่งโดยเซิร์ฟเวอร์
ตัวอย่าง
ใช้บริการ $ http เพื่อขอข้อมูลจากเซิร์ฟเวอร์:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <p> ยินดีต้อนรับ: </p> <> {{myWelcome}} <> </div> <p> บริการคำขอ $ http ขอข้อมูลจากเซิร์ฟเวอร์และค่าที่ส่งคืนจะถูกวางไว้ในตัวแปร "myWelcome" </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope, $ http) {$ http.get ("welcome.htm")ผลการทำงาน:
ข้อความต้อนรับ:
ยินดีต้อนรับสู่การเยี่ยมชม
บริการ $ http ร้องขอข้อมูลจากเซิร์ฟเวอร์และค่าที่ส่งคืนจะถูกวางไว้ในตัวแปร "mywelcome"
ข้างต้นเป็นอินสแตนซ์บริการ $ http ที่ง่ายมาก สำหรับแอปพลิเคชันบริการ $ http เพิ่มเติมโปรดตรวจสอบการสอน AngularJS HTTP
$ บริการหมดเวลา
บริการ AngularJS $ TIMEOUT สอดคล้องกับฟังก์ชั่น JS Window.SetTimeOut
ตัวอย่าง
ข้อมูลจะแสดงในสองวินาที:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <p> ข้อมูลจะปรากฏขึ้นหลังจากสองวินาที: </p> <h1> {{myheader}} </h1> </div> <p> $ การเข้าถึงการหมดเวลาจะดำเนินการฟังก์ชั่นที่ระบุหลังจากจำนวนมิลลิวินาทีที่ระบุ </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope, $ timeout) {$ scope.myheader = "Hello World!"; 2000);}); </script> </body> </html>ผลการทำงาน:
ข้อมูลจะแสดงในสองวินาที:
วันนี้คุณเป็นอย่างไรบ้าง?
การเข้าถึงการหมดเวลา $ ดำเนินการฟังก์ชั่นที่ระบุหลังจากจำนวนมิลลิวินาทีที่ระบุ
$ Interval Service
บริการช่วงเวลา AngularJS $ สอดคล้องกับฟังก์ชั่น JS Window.SetInterval
ตัวอย่าง
แสดงข้อมูลทุกสองวินาที:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" <p> เวลาปัจจุบันคือ: </p> <h1> {{thetime}} </h1> </div> <p> $ การเข้าถึงช่วงเวลาเรียกฟังก์ชั่นหรือคำนวณนิพจน์ในช่วงเวลาที่ระบุ (เป็นมิลลิวินาที) </p> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope, $ Interval) {$ scope.TheTime = วันที่ใหม่ () Tolocaletimestring (); 1000);}); </script> </body> </html>เอฟเฟกต์การทำงาน:
ตอนนี้เวลาคือ:
3:41:09 น
$ Interval Access เรียกใช้ฟังก์ชันหรือนับในช่วงเวลาที่กำหนด (เป็นมิลลิวินาที)
สร้างบริการที่กำหนดเอง
คุณสามารถสร้างการเข้าถึงที่กำหนดเองลิงก์นั้นไปยังโมดูลของคุณ:
สร้างการเข้าถึงชื่อ hexafy:
app.service ('hexafy', function () {this.myfunc = function (x) {return x.toString (16);}});ในการใช้การเข้าถึงแบบกำหนดเองคุณต้องเพิ่มอย่างอิสระเมื่อกำหนดตัวกรอง:
ตัวอย่าง
ใช้บริการที่กำหนดเอง hexafy เพื่อแปลงตัวเลขเป็น hexafy:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> hexagram ของ 255 คือ: </p> <h1> {{hex}} </h1> </div> <p> บริการที่กำหนดเองใช้เพื่อแปลงหมายเลข hexagram: </p> {this.myfunc = function (x) {return x.toString (16);}}); app.controller ('myctrl', ฟังก์ชั่น ($ scope, hexafy) {$ scope.hex = hexafy.myfunc (255);};ผลการทำงาน:
ระบบเลขฐานสิบหกของ 255 คือ:
FF
บริการที่กำหนดเองสำหรับการแปลงหมายเลขเลขฐานสิบหก:
ในตัวกรองใช้บริการที่กำหนดเอง
เมื่อคุณสร้างบริการที่กำหนดเองและเชื่อมต่อกับแอปของคุณคุณสามารถใช้มันในคอนโทรลเลอร์คำสั่งตัวกรองหรือบริการอื่น ๆ
ใช้บริการ hexafy ในตัวกรอง myformat:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ตัวกรอง: <H1> {{255 | myFormat}} </h1> </div> <pristr> var app = angular.module ('myapp', []); app.service ('hexafy', ฟังก์ชั่น () {this.myfunc = function (x) {return x.toString (16);}}); ฟังก์ชั่น (x) {return hexafy.myfunc (x);เอฟเฟกต์การทำงาน:
ใช้บริการในตัวกรอง:
FF
เมื่อได้รับค่าในอาร์เรย์ของวัตถุคุณสามารถใช้ตัวกรอง:
สร้างบริการ hexafy:
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <p> ใช้ตัวกรองเมื่อได้รับอาร์เรย์ [255, 251, 200] ค่า: </p> <ul> <li ng-repeat = "x in counts"> {{x | MyFormat}} </li> </ul> <p> ตัวกรองใช้บริการเพื่อแปลงทศนิยมเป็น hexadecimal </p> </div> <script> var app = angular.module ('myapp', []); app.service ('hexafy', function () {this.myfunc = function (x) {return x.toString (16);}}); app.filter ('myformat' hexafy.myfunc (x);};}]); app.controller ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.counts = [255, 251, 200];เอฟเฟกต์การทำงาน:
ใช้ตัวกรองเมื่อได้รับอาร์เรย์ [255, 251, 200] ค่า:
ตัวกรองใช้บริการเพื่อแปลงทศนิยมเป็นเลขฐานสิบหก
ข้างต้นเป็นการรวบรวมข้อมูลเกี่ยวกับบริการ AngularJS เราจะเพิ่มในภายหลัง สำหรับเพื่อนที่ต้องการโปรดดู