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:
- Directive（https:///article/) - An attribute or element that extends an existing DOM element or represents a reusable DOM component, i.e. a control.
- Markup (/1.0.2/docs/api/ng.$interpolate) - Bind expressions to elements through double brace notation {{}}, which is a built-in angular mark.
- Filter (/1.0.2/docs/guide/dev_guide.) - Used to format the data we show to users.
- Form controls （https:///article/)- 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, which is composed of standard HTML tags and angular directive, brace-bound expression ({{expression}},https:///article/)composition.
<!DOCTYPE html>
<!--ng-app，Define application scope，Created hereroot 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，It will be removed after compilationclass
ng-controller，onedirective，Used to specify the corresponding corresponding to the current templateControllerforMyController
-->
<body class="ng-cloak" ng-controller="MyController">
<!--
ng-model，directive，Used to specifyinputThe corresponding value ofmodelforfoo。
-->
<input type="text" ng-model="foo" value=""/>
<!--
ng-click，directive，Things to do after clicking，Can beexpression，like buttonText = '1'；
也Can be调用函数，like下面所示。
{{buttonText}}，Used to show the currentscopeCan or can be obtained in the chainbuttonTextValue of
-->
<button ng-click="changeFoo()">{{buttonText}}</button>
<script src="../angular-1.0." type="text/javascript"></script>
<script type="text/javascript">
function MyController($scope) {
$ = "Default stuff";//Initialize model buttonText $ = "Modify me";//Initialize model foo $ = function() {//Declare changeFoo = ;// Assign the value of foo to buttonText //The this used here refers 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 it). 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 (/1.0.2/docs/api/ng.$route) and ngView directive (/1.0.2/docs/api/: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 (/1.0.2/docs/tutorial/index). (I'll play with this part later-_-!)
The above is a compilation of the information for AngularJs Understanding Angular Templates. We will continue to add relevant information in the future. Thank you for your support for this website!