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:

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 1

Follow tutorialspoint

Previous article: Form in AngularJS

Next article: Ajax in AngularJS

4 ★ | 2 Vote

May be interested

  • 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.
  • Scope in AngularJSScope 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.
  • Header File in CHeader File in C
    a file header is a file with the .h format containing function declarations and macro definitions and can be shared across multiple source files. there are two types of file headers: the file that the programmer writes and the file that comes with your compiler.
  • Basic SQL syntaxBasic SQL syntax
    sql has a set of rules and instructions called syntax (syntax). this article will quickly list for you the basic sql syntax.
  • What is syntax error?What is syntax error?
    computer language has really strict rules and syntax errors mean you have broken one of those rules.