FROM ZERO TO HERO

ANGULAR 2

Ouadie LAHDIOUI

WHO AM I ?

• IT consultant @ OCTO Technology
• Passionate about Agile & Software craftsmanship
• The Moroccan AngularJS developer community

lahdioui​ouadie

www.ngmorocco.org

OUADIE-lahdioui​

WHO ARE YOU ?

  • Front-End developers ?
  • Back-End developers ?
  • Something else ? something in between !?

HEROES don't always wear capes

Sometimes they code with angular

ANGULAR 2 FINAL RELEASE

WHY ANGULAR ?

ONE TEAM + CORE COMPETENCE + ONE CODE BASE

=

LOTS OF STUFF

MULTI PLATFORMS

PUTTING THE PIECES TOGETHER

  • Mobile
  • Web components
  • Web workers
  • TypeScript
  • Zones
  • Isomorphic
  • Server rendering
  • Intellisence
  • DI, CLI, HTTP 2
  • …

STRONG COMMUNITY

WHAT IS THE DIFFERENCE BETWEEN

ANGULARJS 1 and Angular 2 ?

ANGULARJS 1 VS ANGULAR 2

  • Goodbye $scope
  • No more controllers
  • Component based UI
  • New build-in directives
  • Better performance
  • Better mobile support

FROM FRAMEWORK TO PLATFORM

ANGULARJS 1.X

ANGULAR 2.X

CONCEPTS*

ANGULAR 2

* SOME OF THEM

ANGULAR 2

IS BUILt

USING TYPESCRIPT

TYPE SCRIPT

ES7 (ECMASCRIPT 2016)

TYPESCRIPT

ES5 (ECMASCRIPT 5)

ES6 (ECMASCRIPT 2015)

*.ts

*.js

transpilation

YOU CAN

USE

TYPESCRIPT, ES6 OR ES5

 

ANGULAR 2 APP IS A TREE OF

SELF-DESCRIBING

COMPONENTS

COMPONENTS

Without components

With components

Application

DashBoard

Angular 2 APP

Login

Search

Toolbar

THIS IS A COMPONENT

Application 

// my-roor-app.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'my-root-app',
  templateUrl: './my-root-app.component.html',
})
class Application { /* ... */ }
<!-- index.html -->
<my-root-app>Your application is loading...</my-root-app>

COMPONENTS have templates

<div> Hello {{ name }} </div>

{{ expression }}

[ props ]

( event )

<img [src]="imageUrl" />
<button (click)="doIt()"></button>

WHAT ABOUT TWO WAY DATA BINDING ?

[( ngmodel )]

<input [(ngModel)]="name" />

BANANA IN A BOX

COMPONENTS still have DIRECTIVES

  • No more ng-show, ng-hide, ng-click but functionality is still available
  • 3 types of Angular2 Directives :
    • Components
    • Attribute Directives : ngStyle, ngClass, …
    • Structural Directives : ngIf, ngSwitch, ngFor, …
<div [ngStyle]="setStyles()">
  <p *ngFor="let player of players">...</p>
</div>

COMPONENTS CAN DISPLAY FORMATED DATA > PIPES

PIPE 1

DATA

PIPE 2

PIPE 3

PIPE 4

<p>
    The chained mario's birthday is 
    {{  birthday | date:'fullDate' | uppercase}}
</p>
  • Angular 2 comes with a stock of build-in pipes :

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, PercentPipe ...

COMPONENTS ARE ROUTABLE

  • Angular2 router = Complete rewrite
  • Inspired by the UI-Router (Nested views, ....)

index.html

menu

<router-outlet>

COMPONENT

COMPONENT

COMPONENT

/component1

/component2

/component3

<router-outlet>

COMPONENTS INJECT SERVICES

Service is a class that encapsulates some sort of functionality and provides it as a service for the rest of the application.

export class UserService {
  private users: User[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger
  ) { ... }

  getAllUSers() {
    return this.users;
  }
}

DEPENDENCY INJECTION

ANGULAR APPS

ARE MODULAR

THANKS TO ECMASCRIPT 6

Angular 2 APP

aNGULAR

HAS ITS OWN MODULAR SYSTEM

a.k.a @ngmodule

be careful

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
  • Every Angular app has at least one module (AppModule)
  • You must bootstrap your root module
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

UPGRADING from

ANGULARJS 1.x to Angular 2.x

UPGRADING FROM Angular 1.x to angular 2.x

sudo rm -rf yourAngularProject
  • Following The Angular Style Guide
  • Using a Module Loader
  • Migrating to TypeScript
  • Using Component Directives

LIVE CODING

github.com/ouadie-lahdioui/DevoxxMorocco2016

Thank you

lahdioui​ouadie

slides >

www.slides.com/ouadielahdioui

OUADIE-lahdioui​

Made with Slides.com