Include syntax in AngularJS

HTML does not support embedding HTML web pages in HTML pages. To achieve this function, the following methods can be used:

HTML does not support embedding HTML web pages in HTML pages. To achieve this function, the following methods can be used:

Using Ajax - Create a server call to get the corresponding HTML page and set it in the innerHTML element of the HTML control.

Using Server Side Includes - JSP, PHP and other web server technologies can include HTML pages in a dynamic web page.

With AngularJS, we can embed the HTML page using the ng-include directive.

 ng-app = "" ng-controller = "sinhvienController" >  ng-include = "'main.html'" > 

ng-include="'tenMonHoc.html'">

For example:

cuphapInclude.html

 Include Cu Phap in AngularJS  src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > 

 

 Cavalier AngularJS  ng-app = "ungdungAngularjs" ng-controller = "sinhvienController" >  ng-include = "'main.html'" >  ng-include = "'tenMonHoc.html'" > 

main.html

 border = "0" > Nhap ho:  type = "text" ng-model = "sinhvien.ho" > Nhap ten:  type = "text" ng-model = "sinhvien.ten" > Ho and Ten: {{sinhvien.hoten ()}} 

tenMonHoc.html

 Mon Hoc:   Ten   Exam scores  ng-repeat = "printable version of the account.tenMonHoc" > 

Result:

To run this example, you need to create the cuphapInclude.html, main.html, tenMonHoc.html files with the webserver. Open the cuphapInclude.html page using the URL address on the server and see the results.

Include syntax in AngularJS Picture 1Include syntax in AngularJS Picture 1

Follow tutorialspoint

Previous article: Form in AngularJS

Next article: Ajax in AngularJS

4 ★ | 2 Vote