Introduction
One framework for all
What makes Angular 2 good?
Modular acrchitecture
Much better performance than Angular 1
Improved changed detection
Ahead of time (AOT) compiler
It's made to scale
Modules
Dependency injection (that makes sense)
Typescript & tooling
Supporting projects cli, universal, nativescript
Structure of Angular 2 app

Angular 2 Modules
Are collection of components, directives, pipes and services
Provide mechanism to group related piece of functionality
4 types of modules
Root module ( one one in app )
Feature module ( optional )
Built-in modules ( BrowserModule, FormsModule etc )
Third party modules ( Angular Material )
An angular 2 application is collection of modules, starting from RootModule
Modules can import another module to extend functionality
Structure of module
import { NgModule } from '@angular/core';
@NgModule({
imports: [],
declaritions: [],
providers: [],
exports: [],
bootstrap: []
})
export class MyModule {}
imports: other modules required by module ( built-in, feature or thirt party module)
declarations: components, directives and pipes defined in our module
providers: services defined in our module
exports: components, directives and pipes availablefor other module
bootstrap: the root component of application
Structure of root module
import { NgModule } from '@angular/core';
@NgModule({
imports: [BrowserModule, MyFeatureModule, ThirdPartModule],
declaritions: [RootComponent, OtherComponent, MyPipe, MyDirective],
providers: [ MyService ],
bootstrap: [ RootComponent ]
})
export class AppModule {}
no exports property
only one root module in an aplication
only root module have property bootstrap
root module always imports
BrowserModule
BrowserModule exports common elements of the framework (NgIf, NgFor etc)
Root Module example
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/plateform-browser';
import { AppComponent } from './app/app.component';
@NgModule({
imports: [BrowserModule],
declaritions: [AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule {}
Structure of feature module
Goal is to encapsulate some functionality of application
import { NgModule } from '@angular/core';
@NgModule({
imports: [CommonModule, SomeOtherFeatureModule],
declaritions: [MyComponent, MyPipe, MyDirective],
providers: [ MyService ],
exports: [ MyComponent, MyDirective ] // must have
})
export class MyFeatureModule {}
declaritions elements are private by default
to make an element public we need to add it to
exports
arrayno root component in feature module
services are public by default ( not required in exports )
Basic structure of a component
import { Component } from '@angular/core';
@Component({
selector: 'my-widget',
styles: ['p{color: red}'],
template: `<p>I am a widget</p>`
})
export class WidgetComponent {}
<my-widget></my-widget>
template: Usually html but can be other language depending on plateform
styles: by default style only applied to component, won't leak outside ( ~shadow root )
always use prefix for selector
avoid collisons with third party components and future html element
Folder Structure
dist
|
src
├───app
│ ├───about
│ ├───cool
│ ├───home
│ ├───posts
│ ├───shared
│ ├───simple-form
│ └───widgets
│ ├───widget1
│ ├───widget2
│ └───widget3
├───assets
│ ├───fonts
│ └───sass
└───environments
Leave root folder for configuration files
Put all code in
src
folderAfter build bundle files created in dist folder
Always create one folder per module
Create import barrels with files called
index.ts
Bootstraping an application
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
Function used to bootstrap an application depending on target plateform
Other plateform can be the server ( Angular Universal ) or a amartphone ( Nativescript )
Two types of bootstraping...
Just in time compilation ( JIT )
Ahead of time compilation (AOT )
Call to
enableProdMode
modifies how change detection works
JIT vs AOT
Characteristic
JIT
AOT
Compilation Target
Browser
Server
Compilation Context
Runtime
Build
Bundle Size
Huge ( ~3MB )
Smaller ( ~400KB)
Execution Performance
Slow
Better
Startup Time
Takes time
Shorter
AOT: compiles component templates in server
With AOT compiler not shipped to browser
Loading app in browser webpack ( index.html )
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ng2crud</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Component Tree

Regestring component to the module
@NgMOdule({
declarations: [RootComponent, HeaderComponent, BodyComponent, MessageComponent],
bootstrap: [ RootComponent ]
})
export class AppModule {}
All components used have to be defined in module
Passing
To run Angular 2, we depend on these four libraries:
es6-shim
zone.js
reflect-metadata
SystemJS
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
es6-shim
A shim is code that helps adapt between cross browsers to a standardized behavior.
By using different shims we’re able to get standardized behavior across different browsers (and environments).
Zones
it is a library used by Angular, primarily for detecting changes to data. (If you’re coming from Angular 1, you can think of zones as an automatic version of $digest.
Reflect Metadata
Angular itself was written in Typescript, and Typescript provides annotations for adding metadata to code. Roughly speaking, the reflect-metadata package is a polyfill that lets us use this metadata.
SystemJS
SystemJS is a module loader. That is, it helps us create modules and resolve dependencies. Module loading in browser-side javascript is surprisingly complicated and SystemJS makes the process much easier.
Component
What if we wanted to have a <weather>
tag that shows the weather? Or what if we wanted to have a <login>
tag that creates a login panel?
That is the idea behind components: we teach the browser new tags that have new functionality.
If you have a background in Angular 1, Components are the new version of directives.
Create Component
<hello-world></hello-world>
A basic Component has two parts:
A Component annotation - metadata added to your code
A component definition class
// annotation
@Component({
// ...
})
// class
class HelloWorld{ }
Demo Hello World
<!doctype html>
<html>
<head>
<title>First App - Hello world</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<hello-world></hello-world>
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app.js')
.then(null, console.error.bind(console));
</script>
</body>
</html>
inside host component
// app.ts
import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/core";
@Component({
selector: 'hello-world',
template: `
<div>
Hello world
</div>
`
})
class HelloWorld { }
bootstrap(HelloWorld);
Display Dynamic Data
// app.ts
@Component({
template: `<div> {{ name }}</div>`
})
class HelloWorld {
name = "Hello Hemant";
}
Working with arrays
import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/core";
@Component({
selector: 'hello-world',
template: `
<ul>
<li *ngFor="let name of names">Hello {{ name }}</li>
</ul>
`
})
class HelloWorld {
names: string[];
constructor() {
this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
}
}
bootstrap(HelloWorld);
Last updated
Was this helpful?