What is angular JS?
Angular JS is JavaScript library to design single page applications. It extends HTML DOM with additional attributes and makes it more responsive to user actions. Angular JS is a framework for web apps. It lets you use HTML as you template language. Angular JS’s data binding and dependency injection eliminate much of the code you currently have to write.
Angular JS Directives
Below are the important parts of angular JS.
- Ng-app: This links the Angular application to HTML.
- Ng-Controller: Controllers are JavaScript functions which bounds to a particular scope.
- 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.
https://jsfiddle.net/mayurdubey/rwjvrk7s/7/
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.
The $scope parameter model is passed to the controller function. The controller function adds a “myname” JavaScript object, and in that object adds a title or name field.
- 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.
