ng-conf coming up at SLC
David East @_DavidEast firebase dev
- 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
- create module
- declare ng app
- create controller
- attach items to $scope
- declare controller
- create template
-
bootstrap in Angular 2.0
- looks like 3 simple lines now
-
Use Traceur (experimental options for AtScript)
-
Angular 2 bootstrap process
- create component
- create template
- bootstrap
- transcompilation
-
Template syntax
-
hash tag
-
<input #newname type="text">
-
{{ newname.value }}
-
You have immediate access to the DOM element
-
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
-
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
-
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
- Minko Genchev