What is angular JS?
Angular JS Directives
Below are the important parts of angular JS.
- Ng-app: This links the Angular application to HTML.
- Ng-model: This binds the data to HTML input controls.
- Ng-bind: this binds data to HTML tags.
- Ng-init: This initializes the application data.
- Ng-repeat: This repeats HTML elements for each item in a collection.
- Scope: The object refers to a model. It controls the flow of data in the application and contain attributes, properties and functions.
MY first Angular JS Program:
Please follow the below link at JSFiddle for example.
Explanation of example:
- Create an app: This tells which part of HTML contains Angular JS app. It is required to tell from where an Angular JS application starts. This can be done by adding an ng-app attribute to the HTML element from where the program begins.
- Create a view and Controller: This tells Angular JS which controller to use for the respective view. Can add multiple controllers to an app. This can be done by adding ng-controller attribute to the html element under an app. View: Views are the html pages or components.
And then define the controller into the app module. Different controllers can be added with different views.
Controller: This code registers a controller function in the angular module.
- Using Ng- model: This binds the value of data to html.
- Using ng-repeat: This directive repeats HTML elements for each item in a collection. In the above example used ng-repeat to show the data of players object.
- Expressions: In the above example I explained the different types of expressions through numbers, strings, object and array.
- Filters in angular JS: These are used to manipulate the data like uppercase, lowercase etc. They can be added in the expressions or directives using pipe.