Latest web development tutorials

AngularJS Http

$ http AngularJS เป็นบริการหลักสำหรับการอ่านข้อมูลจากเซิร์ฟเวอร์ระยะไกล

อ่านไฟล์ JSON

ต่อไปนี้เป็นไฟล์ JSON ที่เก็บไว้บนเว็บเซิร์ฟเวอร์:

http://www.w3big.com/try/angularjs/data/sites.php

{ "ไซต์": [ { "ชื่อ": "กวดวิชา" "URL": "www.w3big.com ", "ประเทศ": "CN" }, { "ชื่อ": "Google", "URL": "www.google.com", "ประเทศ": "สหรัฐอเมริกา" }, { "ชื่อ": "Facebook", "URL": "www.facebook.com", "ประเทศ": "สหรัฐอเมริกา" }, { "ชื่อ": "ไมโคร", "URL": "www.weibo.com ", "ประเทศ": "CN" } ] }

AngularJS $ http

บริการ AngularJS $ HTTP จะใช้ในการอ่านข้อมูลบนเว็บเซิร์ฟเวอร์

$ Http.get (URL) ฟังก์ชั่นใช้ในการอ่านข้อมูลเซิร์ฟเวอร์

AngularJS ตัวอย่าง

<div NG-App = "แอปของฉัน" NG-ควบคุม = "siteCtrl"> <ul> <li NG-ซ้ำ = "x ในชื่อ "> {{x.Name + ',' + x.Country}} </ li> </ ul> </ div> <script> var App = angular.module ( 'MyApp' []); app.controller ( 'siteCtrl' ฟังก์ชั่น ($ ขอบเขต $ HTTP) {$ http.get ( "http://www.w3big.com /try/angularjs/data/sites.php ") .success (ฟังก์ชั่น (การตอบสนอง ) {$ = scope.names response.sites;});}); </ script>

ลอง»

การประยุกต์ใช้การวิเคราะห์:

? หมายเหตุ: ได้รับรหัสการร้องขอดังกล่าวข้างต้นเป็นเซิร์ฟเวอร์เว็บไซต์ที่คุณไม่สามารถคัดลอกโดยตรงกับการทำงานในท้องถิ่นของคุณจะมีปัญหาข้ามโดเมนแก้ปัญหาคือการคัดลอกข้อมูล Customers_JSON.php ไปยังเซิร์ฟเวอร์ของคุณเองกับ: PHP อาแจ็กซ์ ปัญหาข้ามโดเมนทางออกที่ดีที่สุด

แอพลิเคชัน AngularJS กำหนดโดย NG-App ดำเนินการประยุกต์ใช้ใน <div> ใน

การเรียนการสอน NG-ควบคุมชื่อวัตถุตั้งตัวควบคุม

ฟังก์ชั่น CustomersController เป็นมาตรฐาน JavaScript ตัวสร้างวัตถุ

วัตถุควบคุมยังสถานที่ให้บริการ: $ scope.names

$ http.get () อ่านข้อมูล JSON คงที่จากเว็บเซิร์ฟเวอร์

เซิร์ฟเวอร์แฟ้มข้อมูล: http://www.w3big.com/try/angularjs/data/sites.php

เมื่อโหลด JSON ข้อมูลจากเซิร์ฟเวอร์, $ scope.names เป็นอาร์เรย์

หมายเหตุ รหัสนี้ยังสามารถนำมาใช้ในการอ่านข้อมูลในฐานข้อมูล