Angular 2

Welcome Party

a [mostly] live coding presentation

Vitor Fernandes

Toptal Developer at KWAN: Love, Respect, Community

Organizer at AngularJS Portugal

github.com/vmlf01

linkedin.com/in/vfernandes

Agenda

• Quick Start: Angular 2 Welcome App

• Big Picture: Angular 2 Building Blocks

• Adding Stuff to the App

  • Components, Events, Router, Forms, HTTP

• Angular 2 Story

Quick Start:

Welcome App

Quick Start: Welcome App

• Original Bootstrap Theme: Evento

• AngularClass angular2-webpack-starter kit

http://shapebootstrap.net/item/1524963-evento-free-music-event-template/live-demo

https://github.com/AngularClass/angular2-webpack-starter

Quick Start: Welcome App

$ git clone https://github.com/vmlf01/angular2-hello-world

$ cd angular2-hello-world
$ git checkout step1
$ npm install
$ npm start

Quick Start: Welcome App

• src/index.html

• src/app/main/app.component.ts
  • @Component() decorator
  • selector
  • templateUrl
  • styleUrls

Quick Start: Welcome App

• src/app/providers/data.service.ts
  • @Injectable() decorator

• src/app/app-logo/app-logo.component.ts
  • inline template
  • inline styles

Quick Start: Welcome App

• src/app/event-details/event-details.component.ts
  • @Input() decorator
  • attribute bindings
  • property bindings
  • event bindings

Quick Start: Welcome App

• src/app/main/app.module.ts
  • @NgModule() decorator
  • Putting it all together
  • Application bootstrap

Big Picture:

Building Blocks

Big Picture: Building Blocks

Big Picture: Building Blocks

• Components are the basic Angular building block
• A Component is a highly cohesive loosely coupled part of the application UI
• Easier to re-use
• Easier to test

Big Picture: Building Blocks

• Components contain:
  • Code
  • Template
  • Styling
  • Metadata

Big Picture: Building Blocks

• Services are auxiliary pieces of code
  • Logging
  • Data access
  • Calculation logic
  • Validation logic
• Services are singletons within their
  DI Container

Big Picture: Building Blocks

• Angular modules consolidate components, services, directives and pipes into cohesive blocks of functionality
• Every Angular app has at least one module: the root module
• We can also load additional feature modules on-demand

Angular sidekick: TypeScript

• TypeScript advantages:
  • Decorators
  • Types
  • Easier Class definition
  • ES2015 & ES.Next features now
  • Static checking
  • True IntelliSense

Adding a

Slideshow Component

(back to live coding)

Reacting to

Events

(back to live coding)

Reacting to Events

$ git checkout step2
$ npm start

Using Router

to Navigate Pages

(back to live coding)

Using Router to Navigate

$ git checkout step3
$ npm start

Handling

Forms & Validations

(back to live coding)

Handling Forms & Validations

$ git checkout step4
$ npm start

Talking

to the API

(back to live coding)

Talking to the API

$ git checkout step5
$ npm start

Angular 2 Story:
How Did We Get Here?

Angular 2 Story

• Location: ng-europe October 2014
• Scenario:
  • Angular 1.3 was just released, but...
  • Angular 2 takes center stage, and...
  • Igor Minar & Tobias Bosch do a presentation on Angular 2.0 Core by comparing it with Angular 1.3

Angular 2 Story

https://www.youtube.com/watch?v=gNmWybAyBHI

Angular 2 Story

https://www.youtube.com/watch?v=gNmWybAyBHI

Angular 2 Story

https://www.youtube.com/watch?v=gNmWybAyBHI

Angular 2 Story

https://www.youtube.com/watch?v=gNmWybAyBHI

Angular 2 Story

• Complete armaggeddon:
  • Controller is dead
  • DDO is dead
  • $scope is dead
  • angular.module is dead
  • jqLite is dead

Angular 2 Story

• No migration path announced
• It's the end of the world as we know it
• PANIC!
• Companies don't know what to do
• Developers don't know what to do

Angular 2 Story

• 2 years later, here we are:
  • Angular 2 Final released September 2016
  • Angular 1.5.8 released July 2016
  • Angular 1 still very much alive
  • 700K Angular 2 vs 1.2M Angular 1 active visitors to Angular docs

Angular 2 Story

• Angular is no longer just a web framework
• Angular is an application platform
  • Browser
  • Server
  • Mobile
  • Desktop

Angular 2 Story

• Angular 2 improvements over Angular 1:
  • Faster
  • Asynchronous module loading
  • Server-side initial rendering
  • RxJs support
  • Better tooling

Q & A

Next Steps

• TypeScript
• RxJs
• Flux Architecture Pattern
• Unit Testing
• E2E Testing
• Server-side Rendering
• Asynchronous Module Loading

Additional Resources

• https://angular.io/
• http://blog.thoughtram.io/
• http://onehungrymind.com/
• https://www.barbarianmeetscoding.com/blog/categories/angular2-step-by-step/
• http://courses.angularclass.com/p/angular-2-fundamentals
• https://angular-university.io/course/getting-started-with-angular2
• https://www.ng-book.com/2/

Sponsors

http://kwan.pt/

Sponsors

https://www.ng-book.com/2/

Other events

https://www.meetup.com/gdglisbon/events/234921618/

GDGLx Sessions #4

Angular:

One framework.

November 17, 2016

Community

meetup.com/angularjs-portugal

gitter.im/AngularPortugal/Home

Always looking for speakers!