Basics -
I. AngularJS2 is framework to build heavy javaScript applications.
It is mainly used to create SPA(Single Page Application.)
AngularJS2 is completely independent of AngularJS framework.
SPA vs MPA (Multi Page Application)
In multi page app each time a request is submitted a new page is served by the server and rendered.
This approach is OK for simple applications.
But in case of rich use interface page becomes complex and to be loaded with a lot of data.
Generating complex pages on server and transferring them to client over internet and rendering them in browser takes time and degrades user experience.
Introduction of AJAX improved MPA by refreshing a part of page( not full page) but increased page complexity.
SPA is a evolution of MPA+AJAX pattern,where only shell page is generated on the server and UI is rendered by browser javaScript Code. SPA requests markup (HTML) and data separately and renders page directly in browser.
In SPA only a part of shell page changes instead whole page.
eg. Gmail is SPA
SPA Advantages :
1.Faster page loading
2.Improved user interface because data is loaded in the background from server.
3.No need to write code to render page on server.
4.decoupling of Front end and Back end Development
5.can use same back end code(Web development) for Mobile development.
SPA Disadvantages :
1.Heavy frameworks to be loaded in browsers
2.UI code is not compiled hence its harder to debug.
3.search engine optimization problems
II. Typescript is used to develop angularJS2 app.
TypeScript is a super set of javaScript. (Any valid JavaScript code is TypeScript code).
TypeScript = JavaScript + additional Features
Why to use TypeScript instead of JavaScript?
These additional features are --> (modules,classes,interfaces,access modifiers, intellisense, compile Time checking)
III.Ang2 Architecture -
Main parts of ng2 are -
1.Component - View Part
2.Directive
3.Router
4.Service -Service Part
Component - {} encapsulates template,data and behavior (properties and methods) of view. (Is a class)
Main Component is called as Root Component.
Root Component has many sub components which help to divide app into smaller parts.
Components are completely decoupled from DOM .
In JavaScript we first select DOM element and then modify it.
In Ang2 we bind DOM element with component.
Eg. component class variable - DOM element
Component class method - DOM event
Service - {} A class, which holds non-view logic like Business logic, Data Access , Logging etc.
Router - {} For navigarion
Directive -{} which modifies DOM (like Component)
Unlike Component, it does not have html markup for view.
I. AngularJS2 is framework to build heavy javaScript applications.
It is mainly used to create SPA(Single Page Application.)
AngularJS2 is completely independent of AngularJS framework.
SPA vs MPA (Multi Page Application)
In multi page app each time a request is submitted a new page is served by the server and rendered.
This approach is OK for simple applications.
But in case of rich use interface page becomes complex and to be loaded with a lot of data.
Generating complex pages on server and transferring them to client over internet and rendering them in browser takes time and degrades user experience.
Introduction of AJAX improved MPA by refreshing a part of page( not full page) but increased page complexity.
SPA is a evolution of MPA+AJAX pattern,where only shell page is generated on the server and UI is rendered by browser javaScript Code. SPA requests markup (HTML) and data separately and renders page directly in browser.
In SPA only a part of shell page changes instead whole page.
eg. Gmail is SPA
SPA Advantages :
1.Faster page loading
2.Improved user interface because data is loaded in the background from server.
3.No need to write code to render page on server.
4.decoupling of Front end and Back end Development
5.can use same back end code(Web development) for Mobile development.
SPA Disadvantages :
1.Heavy frameworks to be loaded in browsers
2.UI code is not compiled hence its harder to debug.
3.search engine optimization problems
II. Typescript is used to develop angularJS2 app.
TypeScript is a super set of javaScript. (Any valid JavaScript code is TypeScript code).
TypeScript = JavaScript + additional Features
Why to use TypeScript instead of JavaScript?
These additional features are --> (modules,classes,interfaces,access modifiers, intellisense, compile Time checking)
III.Ang2 Architecture -
Main parts of ng2 are -
1.Component - View Part
2.Directive
3.Router
4.Service -Service Part
Component - {} encapsulates template,data and behavior (properties and methods) of view. (Is a class)
Main Component is called as Root Component.
Root Component has many sub components which help to divide app into smaller parts.
Components are completely decoupled from DOM .
In JavaScript we first select DOM element and then modify it.
In Ang2 we bind DOM element with component.
Eg. component class variable - DOM element
Component class method - DOM event
Service - {} A class, which holds non-view logic like Business logic, Data Access , Logging etc.
Router - {} For navigarion
Directive -{} which modifies DOM (like Component)
Unlike Component, it does not have html markup for view.