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:

Table of Contents

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.

images 1 of Include syntax in AngularJS — *Images 1 of Include syntax in AngularJS*

Follow tutorialspoint

Previous article: Form in AngularJS

Next article: Ajax in AngularJS

Isabella Humphrey

Update 25 May 2019

« PREV : Ajax in AngularJS...

Form in AngularJS... : NEXT »