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!

Made with Slides.com