Angular Javascript

Injector ANGULAR JS

Each application is made up of objects which collaborate together to get the things done and these objects need to be instantiated for them to work and for the app to perform. In angular js, most of these objects are instantiated with the help of injector services. The injector services create two types of objects, services and specialized objects.

• Services: These are the injector objects whose services API is defined by the developer writing the service.
• Specialized: These are the objects created for specific Angular Framework API and examples are Controllers, Directives, Filters or animations.

As we said above that injector instantiates objects and create objects but it also needs to know how to create these objects for which recipe is registered. There are five commonly used recipe i,e. Value, Constant, provider, service, factory. The most commonly used service is Provider.

CREATE A MODULE IN ANGULAR JS

angular.module('myapp',[]).controller('controllers',function($scope){ $scope.lastname="Dhiman"; $scope.quantitiy=200; $scope.price=300;

{{lastname}}

Price of an item is {{quantitiy * price | currency}}

Explain $scope and $rootscope in Angular JS

1. scope: This is an instance object of ng-controller on a page and is used to pass a value in expressions in a page. For example
   function scopefunction1($scope) { $scope.controllername= "Rita Dhiman"; }

   If you use {{controllername}}

2. $rootScope : This is a parent object of all “$scope” angular objects which area created in a web page. Angular js first encounters any ng-app directive and then creates $rootScope object in memory.

FILTERS IN ANGULAR JS

Filters are used to modify data in Angular JS, few of the commonly used Angular JS filters are:

uppercase: It converts the text to uppercase
Example:Name converted to Upper Case: {{fullName | uppercase}}
lowecase: It converts the text to lowercase
Example:Name converted to lowerCase: {{fullName | lowercase}}
currency: Puts currency symbol and format the text in a currency format instead of an ordinary text
Example:Price to currency filter: {{price | currency}}
Date: It formats the text in date format

AngularJS supports inbuilt internationalization for only three types of filters, which are Currency, Date, and Numbers.

EXPRESSIONS IN ANGULAR JS

Expressions are used to bind application data with HTML and are quite similar to ng-bind directive of Angular JS. Expressions are written inside double curly bracket such as {{ }}

Depending upon the requirements, expressions could be used as:

1. Numbers
   Example: Expense on Cookies: {{cost * quantity}} Rs
2. String
   Example: Hello {{people.firstname + " " + peopl.lastname}}!
3. Object
   Example: Phone No: {{employee.phoneno}}
4. Array
   Example: Marks(subject): {{subject[7]}}

Example of use of expressions in Angular JS:

Hello {{employee.firstname + " " + employee.lastname}}!

Expense on Books : {{cost * quantity}} Rs

Roll No: {{employee.phoneno}}

Employee No: {{emmployeeid[3]}}

MV (MODEL VIEW CONTROLLER) IN ANGULAR JS

MVC is a designing software design pattern used for developing web applications and is made up of following three parts:

1. Model : This is responsible for maintaining data in Angular Js.
2. View : This is responsible for displaying all or a part of data to the user
3. Controller : These are Javascript functions of software code that interacts between the Model and View. As name suggests, controllers controls the the flow of data from the server to HTML UI and provides data and logic to HTML UI.

MVC separates the logic code from the user interface layer therefore it is good to use it. The main function of Controller is to receive all requests needed for application and interacts with Model to prepare any data needed by the View.

FEATURES OF ANGULAR JS

1. Data-binding
2. Scope(Scope is an object instance of ng-controller on a page)
3. Controller
4. Directives
5. Filters
6. Templates
7. Routing
8. Model View Whatever(MVW)
9. Deep Linking
10. Dependency Injection
11. Services

DIRECTIVES IN ANGULAR JS

Directives are markers on Document Object Model(DOM) such as elements, attributes, css etc. and can be used to create custom html tags that can serve as new widgets. Angular JS has also its own built-in directives like, ng-app, ng-bind, ng-model.

An Angular Js application consists of the following three directives:

1. ng-app : This defines an angularJs application to HTML. It clears that the application is going to be angular js based.
   
2. ng-model : This directive binds the value of angular js appplication data to the html input controls.This is always used with html input controls and defines the model/variable to be used in Angular JS application. It sets the value of a variable by defining a model name which can be used any where in application with ng-bind or expressions.

   Example of ng-model:

   This value of this p is always equal to {{colorthis}}

3. ng-bind : This directive binds the angular js application data to the html tags.ng-bind is used for html tags. It gets the value from ng-init or ng-model methods in Angular JS unlike ng-model which sets the variable.

   Example of ng-bind

   Hello !