Angularjs and ts(Angular 5)


AngularJS is a JavaScript framework. It is written in JavaScript.AngularJS extends HTML attributes with DIRECTIVES, and binds data to HTML with EXPRESSIONS.With AngularJS we can create single page applications(SPA)

The following are the key features of AngularJs:

  1. Modules.
  2. Directives.
  3. Expressions.
  4. Controller.
  5. Scope.
  6. Data Binding.
  7. Validations.
  8. Filters.
  9. Services.
  10. Routing.
  11. Dependency Injection.
  12. Testing.

Here in the above example ng-app,ng-model,ng-bind are directives.HTML attributes with ng prefix are directives.ng-app defined an application and ng-controller defines a controller.AngularJS expressions can be written inside double braces: {{ expression }}.AngularJS expressions can also be written inside a directive: ng-bind="expression"


The digest cycle inAngularJS
Compilation phase-
The  compilation phase is the phase which include two steps Traversing the  DOM and collecting all the directives and       then linking the directives to the appropriate JavaScript functionality in the AngularJS built-in library or custom directive       code. The directives are combined with a scope to produce the dynamic page
binding phase-In this the changes in scope are reflected in the DOM.

In AngularJS,there are watchers for every scope variable that we declare.It keeps a watch list with the variable and the data.Digest cycle can be considered as a loop, during which AngularJS checks if there are any changes to all the variables watched by all the $scope



The module is a container for the different parts of an application.The module is a container for the application controllers.



controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.



Data binding in AngularJS is the synchronization between the model and the view.When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times(w3 schools)

The data model is a collection of data available for the application.



In addition to default angular directives we can create our own directives.Directives should be accessed with camel space



Services are designed to a specific task only.For example services are used to perform http operations.Services are injected in to the controller or to another service,or directive.


Both .service() and .factory() are both singletons.Factories returns object where are services while services are constructor functions of the object.See the below  example for factory and compare that with the example of services.




Scope is an object refers to the application model.Scope that is accessible from current component e.g Controller, Service only. $rootScope refers to an object which is accessible from everywhere of the application. You can think $rootScope as global variable and $scope as local variables.


Filters are used to change modify the data and can be clubbed in expression or directives.Example for filters include uppercase,lowecase,currency,orderby etc.These are implemented using pipe character.Seethe following example to get a better understanding.





We can specify functions to run at configuration and run time for a module by calling the config and run methods. These functions are injectable with dependencies just like the factory functions above.


Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies(SEE S.O.L.I.D PRINCIPLE OOPS).The AngularJS injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.values,factory,service,provided,constant ,can be injected in to each other and to controllers in angular js

See the following example where a  service is injected in to a controller


Protractor is an end-to-end test framework for Angular and AngularJS applications.Jasmine is used to perform unit testing.Unit testing, as the name implies, is about testing individual units of code.


AngularJS supports SPA using routing module ngRoute. This routing module acts based on the url. When a user requests a specific url, the routing engine captures that url and renders the view based on the defined routing rules.


Typescript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. There are four main principles to Object Oriented Programming: Encapsulation, Inheritance, Abstraction, and Polymorphism. TypeScript can implement all four of them with its smaller and cleaner syntax . Typescript can make use of all the functions we commonly use in javascript asit is a superset of javascript.The following is an example for a class using typescript

In typescript we can specify the type of data we are going to use.For example in the previous example we use number and specify the variable types as number.


Angular help us create apps in a component based architecture.Using angular cli we can create a new component using  ng generate component [name] .



A component has a lifecycle managed by Angular.Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM . After creating a component/directive by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:

ngOnChanges() Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.

Called before ngOnInit() and whenever one or more data-bound input properties change.

ngOnInit() Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component’s input properties.

Called once, after the first ngOnChanges().

ngDoCheck() Detect and act upon changes that Angular can’t or won’t detect on its own.

Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

ngAfterContentInit() Respond after Angular projects external content into the component’s view / the view that a directive is in.

Called once after the first ngDoCheck().

ngAfterContentChecked() Respond after Angular checks the content projected into the directive/component.

Called after the ngAfterContentInit() and every subsequent ngDoCheck().

ngAfterViewInit() Respond after Angular initializes the component’s views and child views / the view that a directive is in.

Called once after the first ngAfterContentChecked().

ngAfterViewChecked() Respond after Angular checks the component’s views and child views / the view that a directive is in.

Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

ngOnDestroy() Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

Called just before Angular destroys the directive/component.


In the component we use decorators that defined the selector,the template and other metadata that is used while rendering the component.



@Input is a decorator to mark an input property and @Output is a decorator to mark an output property.@Input decorator binds a property within one component (child component) to receive a value from another component (parent component).@Output decorator binds a property of a component to send data from one component (child component) to calling component (parent component).


A provider is an instruction to the DI system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.


We already know what is dependancy injection from previous angularjs explanation.See above example to understand injection of a service in to a component.In angular you can create a Singleton Service by moving the Provider registration to the topmost component of the Component Tree. You can also move it to the root module (AppModule in the example) or even register it at the time of bootstrap.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *