Angular template is a declarative specification that, along with model, controller information, renders the view that the user sees in the browser. It is a static DOM that includes HTML, CSS, angular special elements, and angular-specified element attributes. Angular elements and attributes instruct the angular to extend the behavior and to convert the template DOM to the DOM of the dynamic view.
The following are the types of element attributes that we can use in template angular elements:
Note: In addition to declaring the above elements in a template, we can access these elements in JavaScript code.
The following code fragment shows a simple angular template, which is bound by standard HTML tags and angular directive, curly braces expression ({{expression}},http:// www.jb51.net/article/91742.htm) composition.
<! DOCTYPE html>
<!-ng-app, define the scope of application, create root scop here->
<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, the class that will be removed after compilation
ng-controller, a directive, used to specify the Controller corresponding to the current template as MyController
->
<body class = "ng-cloak" ng-controller = "MyController">
<!-
ng-model, direct, used to specify the model corresponding to the input value as foo.
->
<input type = "text" ng-model = "foo" value = "" />
<!-
ng-click, directive, what needs to be done after clicking, can be expression, such as buttonText = '1';
It can also be a calling function, as shown below.
{{buttonText}}, used to display the value of buttonText that can be 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 refers to the current $ scope.
};
}
</ script>
</ body>
</ html>
In a simple single-page application, templates consist 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", where the template fragment is stored 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 in the main page (http:// Code.angularjs.org/1.0.2/docs/api/ng.directive:ngview) to collaborate with "include" those partials. An example of this technique is shown in the seventh to eighth step of angular tutorial (http://code.angularjs.org/1.0.2/docs/tutorial/index). (I'll play-_-! later)
The above is the Angularjs understanding angular templates data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
