HTML is used to created static pages, but AngularJS takes it one step ahead by providing functionality to add new attributes to the HTML tags. These attributes which AngularJS provides are called directives and they have a prefix ng-.

Example.

Name:

You wrote: {{ company }}

ng-app attribute is used to initialize the AngularJS application. If we put the ng-app attribute in the tag itself, then whole web page will be considered as an AngularJS application. But if we want only some portion of our webpage to act as an AngularJS application, then instead of putting the ng-app tag inside the tag we can put it in that particular portion which will contain AngularJS code. There can be more than one AngularJS applications in a single webpage.
ng-init attribute is used to initialize variables. In the above example the value of company is being set to pixxstudios. The scope of this particular variable will be inside this particular AngularJS application. We can define multiple variable inside a single ng-init.

ng-model attribute is used for the binding purpose. In the above example we are binding the input text field value to the variable company using ng-model. Whenever the user enters anything inside the input field, the value ‘pixxstudios’ inside company will be overwritten by that value.

ng-repeat directive

ng-repeat directive is used to iterate through data. For purpose of explaining we are initializing an array using ng-init in the below example, but in the real world scenario we make use of controllers to define data and not ng-init.

Looping in AngularJS

  • {{ var }}

Here each variable will be printed on the screen. What ng-repeat does is extract the data inside array ‘arr’ one value at a time, stores it inside the variable ‘var’ and the value inside ‘var’ is displayed on the screen using data-binding expression {{ var }}.

Next step in ng-repeat is to use filters. Please goto the following post to learn more about filters.

Related Posts

Leave a Reply