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 AngularJSng-app = "" ng-controller = "sinhvienController" > Ho va Ten MSSV Diem thing-repeat = "sinhvien in sinhvienk60" > {{ sinhvien.HovaTen }} {{ sinhvien.MSSV }} {{ sinhvien.Diemthi }}
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.
Follow tutorialspoint
Previous post: Include syntax in AngularJS
Next lesson: View component in AngularJS
You should read it
May be interested
- The Module in AngularJSangularjs 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 technologythe 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 AngularJSangularjs 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 AngularJSthe directives below can be used to bind application data to attributes in the html dom element.
- Create the first AngularJS applicationto 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 AngularJSangularjs 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 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 AngularJSan angularjs application works primarily based on the controller component to control the flow of data in the application.
- MVC structure in AngularJSmodel view controller or mvc is a popular call, a software design model for web-based applications.
- Create the table in AngularJStable 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.