Instructions for AngularJS basic learning notes and angularjs learning notes

Instructions for AngularJS basic learning notes and angularjs learning notes

AngularJS extends HTML attributes by using commands.

AngularJS commands
AngularJS commands are extended HTML attributes with a ng-prefix.

The ng-app command is used to initialize AngularJS application.

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

The ng-model command is used to bind the values of HTML controls (such as input, select, and textarea) 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 command also tells AngularJS that its <div> element is the root element of AngularJS application, that is, the scope.

Data Binding

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

In AngularJS data binding, AngularJS expressions use AngularJS data for Synchronous updates.

{FirstName} synchronously updates data 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 uses the ng-init command in AngularJS development. In the controller section, you will see better data initialization methods.
Repeat HTML elements
The ng-repeat command 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 command on the object array:

<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 (that is, create, read, update, and delete) operations. Imagine what if these objects come from databases?

Ng-app command

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

After the Web page is loaded, the ng-app command automatically initializes the application. That is, it automatically initializes and directs AngularJS application to execute.

In the subsequent sections, you will learn how to specify a value for the ng-app command (for example, ng-app = "myModule") to associate with the module.

Ng-init command
The ng-init command is used to initialize the value of AngularJS application.

Generally, the ng-init command is not required, but the Controller or module is used for initialization.

In the following sections, you will learn about controllers and modules.

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

The ng-model command can also be used:

Provide data verification (such as verification numbers, email addresses, required ).
Provide the status of the data (such as invalid, dirty, touched, error ).
Provides CSS style classes for HTML elements.
Binds HTML elements to HTML forms.

Ng-repeat command

The ng-repeat command is used to generate an HTML element for each element in a data set (OR array.

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