Angular 2 - Fundamentals

This is very first post in the series of Angular 2 learning. In this post i am going to cover the basic concept of Angular 2. We will start with very basic fundamentals and will evolve Angular 2 slowly.

TYPE SCRIPT -

Angular 2 is written in Typescript, but it is not mandatory to use typescript if you want to build application in Angular 2. The biggest benefit of using Typescript is "Type".

As we know javascript is not type safe, hence refactoring/managing an application is pretty tedious. with Typescript we get type safety. There is typescript compiler(or transpiler) available which will convert your typescript into a javascript file.

So Typescript is only for compile time. Once your code is transpile, you get javascript as a output which is used by the application.

Please note every javascript is a typescript, hence Typescript is a superset of javascript. you can always copy your entire javascript code into typescript file and compile it.

Typescript also support "Interface" and we all know importance of interfaces in java/c#.

Components -

I am sure from various resource you must have seen that Angular 2 is component based framework. let's understand what does it mean.

Angular 2 components are evolved from the idea of webcomponent. The concept of webcomponent is to create resuable UI widgets. Using web-component you can visualize the app as a chunk of DOM elements, rather than a one single large page. The idea here is to compose the unit of functionality in a component, and reuse it across. This also means the CSS of this element will be limited to the component only.

In the webcomponent the HTML is hidden in form of Shadow DOM.

Shadow DOM -

Shadow DOM concept came while implementing web components. Shadow DOM is the part of the DOM, in hidden state.which means you are creating an HTML element, and innerHTML of that element is hidden( of course chrome gives you option by which you can see it). but as webcomponent talks about composition, the HTML and CSS are composed in the component and are understood by browser in form of shadow DOM.

With this architecture, all the css and functionality is very much encapsulated from the rest of the DOM. Ofcourse, javascript is not part of the shadow.

It is not actually directly part of the DOM, but its subtree which is connected with the DOM via rootNode. This also give an opportunity to browser to optimize the DOM manipulation. Because once there are changes in the Shadow DOM, browser need not to refresh the entire DOM.

Does it means the Angular component are drawn in shadow DOM? Nope.  Web component and shadow DOM are new concepts and not all browser supports it, so Angular 2 gives us a chance to configure our app according to our need.

Component in Angular 2 -

For every component in Angular 2 you can define the state as -

None - All elements are draws normally, no shadow DOM concept.

Emulated - its in between of None and Native, Of course the DOM will be visible, but CSS will be scoped within the component and the root node will get some kind of proxy id associted. This is default.

Native - Shadow DOM is completly enabled.

Example - screenshot below compares these 3 scenarios -

How do we use API -

@Component({

  selector: '..',

  templateUrl: '..',

  styleUrls: ['..'],

  encapsulation: ViewEncapsulation.None

})

Components vs Directives -

Directive add behavior to the DOM element, whereas component creates its own view with its behavior.

Component is generally used to create UI widgets, it is a directive with a view..