Skip to content

Instantly share code, notes, and snippets.

@rickarubio
Last active August 29, 2015 14:16
Show Gist options
  • Save rickarubio/359933638a745baeb2e4 to your computer and use it in GitHub Desktop.
Save rickarubio/359933638a745baeb2e4 to your computer and use it in GitHub Desktop.
AnguarJS 2.0 Extended 2/24/15 San Francisco, CA Notes

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment