Angular

ES6 and components

Getting ready for 2.0

Bob Bijvoet

FrontMen

Currently:

Architect at Nuon

Before at ING, Malmberg

Organizes Angular meetups

Angular now

Very opinionated

Angular way or the highway

Terrible DDO

Maybe a bit slow

2 way binding as default

Angular future

Use of NEWEST standards!

Like:

Web components (custom elements)

EcmaScript 2015/16

http://webcomponents.org/​

https://github.com/lukehoban/es6features

How to improve

your 1.x app today

Start thinking in components

Start using ES6/ES2015/Typescript

Start

thinking

in components

<div ng-controller="gmailController">
  A lot of html
</div>

<div ng-controller="gmailController">  
  <div ng-controller="searchController">...</div>
  <div ng-controller="foldersController">...</div>
  <div ng-controller="messagesController">...</div>
</div>

Controller as

Already way better

Smaller controllers, no more Angular $scope,

better understandable viewmodel, use of this inside our controllers.

But still..

No reusability, no clear relation view and controller,

still possible to use $parent and mutate or access parent data.

http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

<gmail-app>  
  <search-component/>
  <folders-component/>
  <messages-component/>
</gmail-app>

Use components

{
    restrict: 'E',
    controller: 'GmailController',
    controllerAs: 'gmailCtrl',
    bindToController: true,
    scope: true,
    templateUrl: 'templates/gmail.html'
}
    

• Reusable!
• Controller/controllerAs configuration in code not html
• All have isolated scopes and bindings to controller
• Templates are separate HTML's
• Ideal for future router

http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html

<gmail-app>  
  <search-component on-search="gmailCtrl.search()/>
  <folders-component active-folder="gmailCtrl.activeFolder"/>
  <messages-component messages="gmailCtrl.messages"/>
</div>

api for the component

Bindings and values (input) (=/@) 

<messages data="someCtrl.messages" limit="10"/>

Event methods (output) (&)

<message-window on-send="someCtrl.someMethod()"/>

Use

Ecmascript 6

tooling

JSPM

For package management. Uses registries like npm and github.

jspm install github:angular/bower-angular

systemjs

For module loading (ES6 style), transpiling, bundling etc.

Also plugins!

System.import('./app');
import angular from 'angular;

http://jspm.io/

https://github.com/systemjs/systemjs

• The module system
• Classes
• Arrow functions
• Template literals
• Default parameters
• Object destructuring

What's useful?

Simple component

• Component class
• Controller class
• Importing an external template

More advanced component

• With bindings
• Calling a service

Questions?

ThanK

you!

See you around afterwards...

Code is at: https://github.com/bobbijvoet/es6-angular