AngularJS commands and AngularJS tutorials

AngularJS commands and AngularJS tutorials

Anyone familiar with HTML knows that HTML has many attributes. For example, the href attribute of the <a> tag can be used to specify the URL address of the link. The type attribute of the <input> tag can be used to specify the input type. AngularJS commands are used to add functions to AngularJS applications by extending HTML attributes.

AngularJS commands are used to expand HTML. These are all special attributes starting with the ng-prefix. We will discuss the following commands:

Commonly used AngularJS commands

The ng-app command initializes an AngularJS application.

The ng-init command initializes application data.

The ng-model command binds the element value (for example, the value of the input field) to the application.

Ng-app command

The ng-app command starts an AngularJS application. It defines the root element. It automatically initializes or starts applications that load web pages containing AngularJS applications. It is also used to load AngularJS applications of various AngularJS modules. In the following example, the default AngularJS application uses the ng-app attribute of the div element.

<div ng-app="">...</div>

Ng-init command

The ng-init command initializes the data of an AngularJS application. It is used to set the variables used in the application. In the following example, the countries array is initialized. Use the JSON syntax to define the countries array.

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},{locale:'en-GB',name:'United Kingdom'},{locale:'en-FR',name:'France'}]">...</div>

Ng-model command

The ng-model command defines the model/variable used in AngularJS applications. In the following example, we define a model named "name.

<div ng-app="">...<p>Enter your Name: <input type="text" ng-model="name"></p></div>

Ng-repeat command

The ng-repeat command repeats every item in the html Element Set. In the example below, we have iterated the array countries.

<div ng-app="">...<p>List of Countries with locale:</p><ol><li ng-repeat="country in countries">{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}</li></ol></div>

AngularJS command example

<Div ng-app = "" ng-init = "firstName = 'john'"> <p> in the input box, enter: </p> <p> Name: <input type = "text" ng-model = "firstName"> </p> <p> your input is: {firstName }}</p> </div>

The ng-app Command tells AngularJS that the current <div> element is an AngularJS application. The ng-init command is used to initialize data, which is equivalent to defining variables in javascript. Data Binding in AngularJS synchronizes AngularJS expressions with AngularJS data. {FirstName} is synchronized through ng-model = "firstName. The above example will synchronously display the content you entered in the input box on the page.

Note:

A web page can contain multiple AngularJS applications running in different elements.
Using ng-init to initialize data is not very common. You will learn a better way to initialize data in subsequent chapters.

Ng-repeat command

The ng-repeat command repeats an HTML element, which is equivalent to an each loop in javascript.

<Div ng-app = "" ng-init = "names = ['jani', 'hege ', 'Kai'] "> <p> Use ng-repeat to loop the array </p> <ul> <li ng-repeat =" x in names ">{{ x }} </li> </ul> </div>

The above example will be parsed into the following HTML

<ul><li>Jani</li><li>Hege</li><li>Kai</li></ul>

Ng-repeat acts on the object array:

<Div ng-app = "" ng-init = "names = [{name: 'jani', country: 'norway'}, {name: 'hege', country: 'sweden '}, {name: 'Kai', country: 'denmark'}] "> <p> loop object: </p> <ul> <li ng-repeat = "x in names"> {x. name + ',' + x. country }}</li> </ul> </div>

It will be parsed into the following HTML:

<ul><li>Jani, Norway</li><li>Hege, Sweden</li><li>Kai, Denmark</li></ul>

Custom commands

In addition to the built-in commands of AngularJS, we can also create custom commands. You can use the. directive function to add custom commands. To call a custom command, you must add a custom command name to the HTMl element. Use the camper method to name an instruction, askh5Directive, but when using it, it needs to be separated by-: askh5-directive

<Body ng-app = "myApp"> <askh5-directive> </askh5-directive> <script> var app = angular. module ("myApp", []); app. directive ("askh5Directive", function () {return {template: "
The preceding example is parsed as follows:
<H1> Custom commands! </H1>
You can call commands in the following ways:
Element name: <askh5-directive> </askh5-directive>

Property: <div askh5-directive> </div>

Class Name: <div class = "askh5-directive"> </div>

Note: <! -- Command: askh5-directive -->
Restrict
The restrict value can be:
E. Only element names are allowed.

A is only applicable to attributes.

C is only applicable to Class names.

M is only applicable to comments.
The default restrict value is EA, that is, the command can be called through the element name and attribute name.
Var app = angular. module ("myApp", []); app. directive ("askh5Directive", function () {return {restrict: "A", template: "
The AngularJS above will only allow attribute calls.
Related reading:
AngularJS expression in AngularJS getting started tutorial
The above content is the AngularJS instruction for getting started with AngularJS, which I hope to help you!