AngularJS Basic Learning Notes Instructions_AngularJS

AngularJS extends HTML attributes through directives.

AngularJS Directives
AngularJS directives are extended HTML attributes with the ng- prefix.

The ng-app directive is used to initialize the AngularJS application.

The ng-init directive is used to initialize application data.

The ng-model directive is used to bind the values ​​of HTML controls (such as input, select, textarea, etc.) to application data.

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

The ng-app directive also tells AngularJS that the <div> element it is located in is the root element of the AngularJS application, that is, the scope.

Data Binding

In the above example, {{ firstName }} is an AngularJS data binding expression.

In AngularJS data binding, AngularJS expressions use AngularJS data to update synchronously.

　{{ firstName }} updates data synchronously through ng-model="firstName".

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number"  ng-model="quantity">
Costs:  <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

Note Using the ng-init directive is very common in AngularJS development. In the Controllers section you'll see better ways to initialize data.
Repeat HTML element
The ng-repeat directive is used to repeatedly create an HTML element:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

Use the ng-repeat directive on an array of objects:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
 <li ng-repeat="x  in names">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

Note AngularJS is very suitable for database CRUD (i.e. create, read, update and delete) operations. Imagine if these objects came from a database?

ng-app directive

The ng-app directive defines the root element of the AngularJS application.

When the Web page is loaded, the ng-app instruction will auto-bootstrap (automatically initialize) the application. That is, automatically initialize and guide the execution of AngularJS application.

In the following chapters you will learn how to assign a value to the ng-app directive (for example, ng-app="myModule") to associate it with the module.

ng-init directive
　The ng-init directive is used to initialize values ​​for AngularJS application.

Generally, there is no need to use the ng-init instruction. Instead, use a controller or module to perform initialization work.

You will learn about controllers and modules in the following chapters.

ng-model directive
The ng-model directive is used to bind the values ​​of HTML controls (such as input, select, textarea, etc.) to application data.

The ng-model directive can also be used:

Provide data verification (such as verification number, email address, required fields).
Provide the status of the data (such as invalid, dirty, touched, error).
Provides CSS style classes for HTML elements.
Bind HTML elements to HTML forms.

ng-repeat directive

The ng-repeat directive is used to generate a corresponding HTML element for each element in the data collection (or array).

The above is the entire content of this article, I hope you all like it.