HomeProgramAngularJSAjax in AngularJS

Ajax in AngularJS

AngularJS provides a $ http control that acts as a service to read data from the server. The server can create calls to the database to receive the logs. AngularJS needs data in JSON format. When data is available, $ http can be used to receive data from the server in the following way:

 function sinhvienController ( $scope , $http ) { var url = "dulieuSV.txt" ; $http . get ( url ). success ( function ( response ) { $scope . sinhvienk60 = response ; }); }

Here the dulieuSV.txt file contains records of students. $ http service creates an ajax call and retrieves the result returned to the student object. " born " model can be used to draw tables with HTML.

Examples:

dulieuSV.txt

 [ { "HovaTen" : "Tran Minh Chinh" , "MSSV" : 20150456 , "Diemthi" : "8.0" }, { "HovaTen" : "Nguyen Thi Chinh" , "MSSV" : 20150457 , "Diemthi" : "9.0" }, { "HovaTen" : "Ha Kieu Linh" , "MSSV" : 20150458 , "Diemthi" : "8.5" }, { "HovaTen" : "Ho Ngoc Ha" , "MSSV" : 20150459 , "Diemthi" : "9.5" } ]

viduAJAX.html

 Vi du AJAX trong AngularJS

 

 Ung dung AngularJS  ng-app = "" ng-controller = "sinhvienController" >   Ho va Ten   MSSV   Diem thi  ng-repeat = "sinhvien in sinhvienk60" > {{ sinhvien.HovaTen }} {{ sinhvien.MSSV }} {{ sinhvien.Diemthi }}

src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">

Result:

To run this example, you need to create viduAJAX.html and dulieuSV.txt to a webserver . Open the file viduAJAX.html with the URL on the server on a web browser and see the results.

Ajax in AngularJS Picture 1

Follow tutorialspoint

Previous post: Include syntax in AngularJS

Next lesson: View component in AngularJS

4 ★ | 1 Vote

You should read it

May be interested

  • View components in AngularJSPhoto of View components in AngularJS
    angularjs supports single page application through multiple views on a single page. to do this, angularjs provides ng-view and ng-template directive and $ routeprovider service.
  • Scope in AngularJSPhoto of Scope in AngularJS
    scope is a special javascript object with the role of linking controllers and views. scope contains information as model data. in the controller, model data can be accessed via the $ scope object.
  • The Service in AngularJSPhoto of The Service in AngularJS
    angularjs supports the concept of seperation of concerns - divide to use service structure. service is javascript functions and is responsible for certain tasks.
  • Multilingual (i18n) in AngularJSPhoto of Multilingual (i18n) in AngularJS
    angularjs provides multi-lingual functions (i18n) with 3 types of filters, currency, date and number. we just need to combine the js corresponding to the location depending on the country. by default it will attach to the location in the web browser.

AngularJS