AngularJS instructions
May 08, 2021 AngularJS
Table of contents
AngularJS Instructions
AngularJS extends HTML with a new property called the directive.
AngularJS instructions
The AngularJS directive is an extended HTML property with the prefix ng- .
The ng-app instruction initializes an AngularJS application.
The ng-init instruction initializes application data.
The ng-model directive binds element values, such as those of an input field, to an application.
AngularJS instance
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div>
Try it out . . .
The ng-app directive tells AngularJS that the element is the "owner" of the AngularJS application.
|
A Web page can contain multiple AngularJS applications running in different elements.
|
|---|
Data binding
The expression in the instance above, the firstName, is an AngularJS data binding expression.
Data binding in AngularJS synchronizes the AngularJS expression with the AngularJS data.
The synchronization is done by ng-model, "firstName".
In the next instance, the two text fields are synchronized by two ng-model instructions:
AngularJS instance
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>
Try it out . . .
|
Using ng-init is not very common. You'll learn a better way to initialize your data in the Controller chapter. |
|---|
Repeat HTML elements
The ng-repeat instruction repeats an HTML element:
AngularJS instance
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>
Try it out . . .
The ng-repeat instruction is used on an array of objects:
AngularJS instance
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Try it out . . .
|
AngularJS perfectly supports the database's CRUD (Add Create, Read Read, Update Update, Delete Delete) application.
Think of objects in an instance as records in a database. |
|---|
ng-app instructions
The ng-app directive defines the root element of the AngularJS application.
The ng-app instruction automatically boots (auto initializes) the application when the page loads.
You'll learn later how ng-apps connect to code modules with a value, such as ng-app "myModule."
ng-init instruction
The ng-init directive defines the initial value for the AngularJS application.
Typically, ng-init is not used. You will use a controller or module instead of it.
You'll learn more about controllers and modules later.
ng-model instruction
The ng-model directive binds HTML elements to application data.
The ng-model instruction can also:
- Provides type validation (number, email, required) for application data.
- Provides state (invalid, dirty, touched, error) for application data.
- Provide cSS classes for HTML elements.
- Bind HTML elements to HTML forms.
ng-repeat instruction
The ng-repeat directive clones HTML elements once for each item in the collection (in the array).