Home>Web design tutorial>Javascript tutorial

AngularJs Understanding Angular Templates

Author：Eve Cole Update Time：2025-08-23 06:32:01

angular template is a declaration specification, which is rendered into the view the user sees in the browser together with the information of the model and controller. It is a static DOM, including HTML, CSS, angular special elements and angular specified element attributes. Angular elements and attributes indicate angular to extend behavior and to convert template DOM to dynamic view DOM.

Here is the type of an angular element already attribute that we can use in template:

  1. Directive (//www.VeVB.COM/article/91739.htm) - An attribute or element that extends an existing DOM element or represents a reusable DOM component, i.e. a control.
  2. Markup (http://code.angularjs.org/1.0.2/docs/api/ng.$interpolate) - Bind expressions into elements through double brace notation {{}}, which is a built-in angular markup.
  3. Filter (http://code.angularjs.org/1.0.2/docs/guide/dev_guide.templates.filters) - Used to format the data we show to users.
  4. Form controls (//www.VeVB.COM/article/91744.htm) - Let's verify user input.

Note: In addition to declaring the above elements in the template, we can also access these elements in the javascript code.

The following code snippet shows a simple angular template consisting of standard HTML tags and angular directive, brace-bound expression ({{expression}}, //www.VeVB.COM/article/91742.htm).

 <!DOCTYPE html><!--ng-app, define the application scope, create root scop--><html ng-app><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>template</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <style type="text/css"> .ng-cloak { display: none; } </style></head><!-- ng-cloak, class that will be removed after compilation ng-controller, a directive, used to specify that the corresponding controller of the current template is MyController--><body ng-controller="MyController"><!-- ng-model, directive, used to specify that the corresponding model of the input value is foo. --><input type="text" ng-model="foo" value=""/><!-- ng-click, directive, what you need to do after clicking can be expression, such as buttonText = '1'; or it can be a calling function, as shown below. {{buttonText}}, used to display the value of buttonText that can be or obtained in the current scope chain--><button ng-click="changeFoo()">{{buttonText}}</button><script src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript"> function MyController($scope) { $scope.buttonText = "Default stuff";//Initialize model buttonText $scope.foo = "Modify me";//Initialize model foo $scope.changeFoo = function() {//Declare changeFoo this.buttonText = this.foo;//Assign the value of foo to buttonText //This used here points to the current $scope. }; }</script></body></html>

In a simple single page application, the template consists of HTML, CSS, and angular directive, all contained in an HTML file (usually called index.html). But in some more complex applications, we can display multiple views in one page by using "partials", that is, store the template segments in a separate HTML file. We can use the $route service (http://code.angularjs.org/1.0.2/docs/api/ng.$route) and ngView directive (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngView) in the main page to "include" those partials. An example of this technique is shown in the seventh and eighth steps of angular tutorial (http://code.angularjs.org/1.0.2/docs/tutorial/index). (I'll play with this part later-_-!)

The above is a collection of information about AngularJs Understanding Angular Templates. We will continue to add relevant information in the future. Thank you for your support for this site!

Related Articles