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

architecture

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 array

  • no 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 folder

  • After 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

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:

  1. A Component annotation - metadata added to your code

  2. 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?