AngularJS lets you extend HTML with new attributes called Directives.
AngularJS directives are extended HTML attributes with the prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init directive initialize application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-app directive also tells AngularJS that the <div> element is the "owner" of the AngularJS application.
The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.
Data binding in AngularJS, synchronizes AngularJS expressions with AngularJS data.
{{ firstName }} is synchronized with ng-model="firstName".
In the next example two text fields are synchronized with two ng-model directives:
Using ng-init is not very common. You will learn how to initialize data in the chapter about controllers. |
The ng-repeat directive repeats an HTML element:
The ng-repeat directive used on an array of objects:
AngularJS is perfect for database CRUD (Create Read Update Delete) applications. Just imagine if these objects were records from a database. |
The ng-app directive defines the root element of an AngularJS application.
The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.
Later you will learn how ng-app can have a value (like ng-app="myModule"), to connect code modules.
The ng-init directive defines initial values for an AngularJS application.
Normally, you will not use ng-init. You will use a controller or module instead.
You will learn more about controllers and modules later.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-model directive can also:
The ng-repeat directive clones HTML elements once for each item in a collection (in an array).