AngularJS instruction for basic study notes

  • 2020-06-07 04:02:58
  • OfStack

AngularJS extends the HTML attribute with instructions.

AngularJS instruction
The AngularJS directive is an extended HTML attribute with the prefix ng-.

The ES12en-ES13en directive is used to initialize AngularJS application.

The ES18en-ES19en directive is used to initialize application data.

The ES23en-ES24en directive is used to bind the values of HTML controls (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 ES34en-ES35en directive also tells AngularJS where it is < div > The element is the root element of AngularJS application, or scope.

Data binding

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

In AngularJS data binding, AngularJS expressions are updated synchronously using AngularJS data.

{{firstName}} Update data synchronously via ES57en-ES58en ="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 USES the ES65en-ES66en directive, which is common in AngularJS development. You'll see better ways to initialize data in controller 1.
Repeat the HTML element
The ng-ES72en directive is used to repeatedly create 1 HTML element:


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

Use the ES78en-ES79en instruction 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 ideal for database CRUD (create, read, update and delete) operations. Imagine 1, what if these objects came from the database?

ng - app instructions

The ES94en-ES95en directive defines the root element of AngularJS application.

When the Web page is loaded, the ng-ES102en directive turns auto-ES104en (automatically initialized) application. Automatically initializes and directs AngularJS application execution.

In later sections you will learn how to assign a value to the ng-app directive (for example, ES112en-ES113en ="myModule") in connection with the module.

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

In general, the ng-init directive is not required. Instead, the controller or module is used for initialization.

You will learn about controllers and modules in later chapters.

ng - model instructions
The ng-ES136en directive is used to bind the value of HTML controls (input, select, textarea, etc.) to application data.

The ng-model directive can also be used to:

Provide data validation (such as validation Numbers, email addresses, required fields).
Provide the status of the data (e.g. invalid, dirty, touched, error).
Provides the CSS style class for the HTML element.
Bind the HTML element to the HTML form.

ng - repeat instructions

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

This is the end of this article, I hope you enjoy it.


Related articles: