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

May be interested

  • The Module in AngularJSThe Module in AngularJS
    angularjs supports module-oriented approach. the module is used to distinguish the logic, service and application processing ... and make the code clear.
  • AJAX - the magic combination of web technologyAJAX - the magic combination of web technology
    the technical topic is always dry and uninteresting, but the story of ajax's development process in the space of multimedia internet applications has created an incredible attraction throughout 2005.
  • View components in AngularJSView 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.
  • HTML DOM element in AngularJSHTML DOM element in AngularJS
    the directives below can be used to bind application data to attributes in the html dom element.
  • Create the first AngularJS applicationCreate the first AngularJS application
    to start, we start with creating the actual xinchao application by using angularjs, we will show you the specific parts of an angularjs application.
  • Multilingual (i18n) in AngularJSMultilingual (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.
  • Expression in AngularJSExpression in AngularJS
    expression is used to bind application data to html tags. expression is written in {{expression}}. expression has a similar way of operating as the ng-bind directive.
  • Controller component in AngularJSController component in AngularJS
    an angularjs application works primarily based on the controller component to control the flow of data in the application.
  • MVC structure in AngularJSMVC structure in AngularJS
    model view controller or mvc is a popular call, a software design model for web-based applications.
  • Create the table in AngularJSCreate the table in AngularJS
    table data is often repeated in natural order. in angularjs, ng-repeat directive can be used to draw tables easily. below is an example of how to use ng-repeat to create tables.