Introduction to AngularJS
May 08, 2021 AngularJS
Table of contents
Introduction to AngularJS
AngularJS is a JavaScript framework. It can be added to an HTML page by using the hashtag.
AngularJS extends HTML through the directive and binds data to HTML through expressions.
AngularJS is a JavaScript framework
AngularJS is a JavaScript framework. It is a library written in JavaScript.
AngularJS is published as a JavaScript file and can be added to a Web page via the script tab:
|
We recommend putting the script at the bottom of the element.
This increases the speed at which web pages load because HTML loads are not subject to script loading. |
|---|
AngularJS extends HTML
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds element values, such as those of an input field, to an application.
The ng-bind directive binds application data to HTML views.
AngularJS instance
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</body>
</html>
Try it out . . .
Examples:
When the page is loaded, AngularJS turns on automatically.
The ng-app directive tells AngularJS that the element is the "owner" of the AngularJS application.
The ng-model instruction binds the value of the input field to the application variable name.
The ng-bind instruction binds the application variable name to the innerHTML of a paragraph.
|
If you remove the ng-app instruction, HTML displays the expression directly and does not evaluate the result of the expression. |
|---|
What is AngularJS?
"AngularJS is HTML specifically designed for applications."
AngularJS makes it easier to develop modern single-page applications (SPAs: Single Page Applications).
- AngularJS binds application data to HTML elements.
- AngularJS can clone and repeat HTML elements.
- AngularJS can hide and display HTML elements.
- AngularJS can add code "behind" HTML elements.
- AngularJS supports input validation.
AngularJS instructions
As you can see, the AngularJS directive is an HTML property with ng as the prefix.
The ng-init instruction initializes the AngularJS application variable.
AngularJS instance
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
Try it out . . .
|
HTML5 allows extended (homemade) properties,
starting with data-.
The AngularJS property starts with ng- but you can use data-ng- to make the page valid for HTML5. |
|---|
With valid HTML5:
AngularJS instance
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
Try it out . . .
AngularJS expression
The AngularJS expression is written in double braces: .
The AngularJS expression binds data to HTML, which is similar to the ng-bind instruction.
AngularJS "outputs" the data where the expression is written.
AngularJS expressions are much like JavaScript expressions: they can contain text, operators, and variables.
Examples .
AngularJS instance
<html>
<body>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</body>
</html>
Try it out . . .