Angular (before hands on) -01

Here I'm mainly talking about angular 2. After AngularJS, angular2 is released with major changes in the Framework.

Changes happened
The major change was transferring to TYPESCRIPT from JS. And angular 2 is based on a Component service architecture. AngularJS had an MV* architecture.

Let's take a look at the core features of this framework...

Module: modules are used to separate the functionality of the application. When you create your initial angular application When you take a module code. (ex:- app.module.ts) there are imports, declarations, bootstrap and can see annotations too.

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { } 

@NgModule annotation makes this class a module and define the imports, declarations, and bootstrapping options. using imports can get the functionality of another module class into your module. Here BrowserModule imports as default because it is needed by default for a web application.

Here you import the AppComponent and add it to the bootstrap so that those components are loaded to the module and can access its functionality. Need to declare that because otherwise, you won't use that component across other components.

export keyword is used to the class AppModule so that other modules can use this class. ( just like the import-export scenario in real life)

The architecture of Angular 2 is simply a component service architecture where the Service layer is the shared piece of code sharable by multiple components.

Component 

Component of Angular is consist of Class, Metadata, Template. 

import { Component } from '@angular/core';

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   appTitle: string = 'Welcome';
} 

Class is similar to a java class consists of properties and methods.
Metadata used to extend the functionality.
Template used to define the HTML view. 

see inside of the class there is a property defined. not like JS, typescript is strongly typed. so the property type is not the same for any.

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Ravinda's web space</div>
   </div>
'

selector: you can see a selector is defined to the template URL.
the template is not a complete HTML file, It's a piece of HTML that can be put inside of a body tag.
So using the selector name we can refer it from the Main HTML page.