AnguarJS 2.0 Extended 2/24/15 San Francisco, CA Notes

notes.md

Intro to Angular 2 Extended

ng-conf coming up at SLC

David East @_DavidEast firebase dev

Motivation for Angular 2

• Web Standards
• Shadow DOM replaces transclusion
• ES6 Modules replaces Angular Modules
• Performance Angular 2 is x5 faster than Angular 1
• View Cache is new feature, when creating DOM elements, angular remembers those elements. So when you add a new one, they just reuse that element.
• Benchpress a way to benchmark all web apps
• Angular 1.x Concepts
• controller, factory, service, provider, directive, transclusion, module
• Angular 2.0 wants a simpler cognitive model
• Angular 2.0 uses atscript, syntactic sugar ontop of ES6
• Atscript compiles to ES5, not required for angular2, types are optional
• Components in ES5
• Components comprised of 2 parts, the template and the class

@Template({
  url: '/todos.html
)}

• Component Controller

class TodoApp {
  constructor() {
    this.todos = ['Item1', 'Item2'];
  }
}

• Whatever is on the component controller, you'll have access to it in the template

• Angular 2.0 is changing the way we bootstrap

• Angular 1.x

  1. create module
  2. declare ng app
  3. create controller
  4. attach items to $scope
  5. declare controller
  6. create template

• bootstrap in Angular 2.0

  • looks like 3 simple lines now

• Use Traceur (experimental options for AtScript)

• Angular 2 bootstrap process

1. create component
2. create template
3. bootstrap
4. transcompilation

• Template syntax

• hash tag

• <input #newname type="text">

• {{ newname.value }}

• You have immediate access to the DOM element

• are local variables

• Event Handlers

• <button (click)="changeName($event, newname.value)

• Property Bindings

• attributes are setters for things in the DOM

• <span [textContent]="newname.value"

• Allows us to bind to any property on this element

• textContent property of the span

• bound to disable property on the element [disabled]

• point of the new syntax is Uniformity

• (event) for events instead of ng-click and ng-model which watches DOM element

• [property] for properties instead of ng-model

Flexibility

• Custom events

• <button (namechange)="changeName...."

• Change Detection

• Angular 2 application is a tree of components, acyclic graph

• Victor Savkin's Blog post, another core angular member

• change detection talk at ng-conf

• Zone.js

• Informs Angular when to run change detection

• knows about all the async methods in the browser

• No more $timeout!

• Zone watches async events, then calls change detection to render DOM

• to fire off your app.

• Dependency injection is done through construction injection @constructor

• Summary

• https://github.com/davideast/ng2do

• https://github.com/davideast/angular2-tabs

• What replaces ng-class

• [class] because class is a property of the DOM element

• Syntax is in constant flux, semantics staying the same mostly

• Migration path, a lot of 2.0 things will be backporter to 1.x

• 1.4 is getting a new router, check out blogpost on 1.4 routing

• will be very similar to the way routing will work in 2.0

• ngconf will have more about testing

• $(parent) can't be chained

• viewCache, similar to iOS, concept is similar

• Think about your application as a set of components

• @Component selector: tabs in the DOM

Lightning Talks

Running an AngularJS app in production

• Leonardo Zizzamia @zizzamia

• Disabling Debug Data

• Angular 1.3 you can disable debug log data

• talkApp.config(['compiler Provider $compileProvider.debugInfoEnabled(false)

• The default is true so you must explicitly turn it off

• class ng-binding debug info

• angular.reloadWithDebugInfo(); apply in the console log

• Disable this in production for a significant performance boost

• Run benchpress for benchmarking

• 14.65sec in demo example vs 13.45sec

AngularJS in Patterns

• Minko Genchev