3. AngularJS history
• AngularJS was originally developed in 2009 by Misko Heveryand
Adam Abrons
• Misko Heverystarted to work for Google in 2009
• 1st release of AngularJS: 1 developer, 3 weeks, 1000 loc
• AngularJS version 1.0 was released in 2012 by Google
• Angular version 2 was released in September 2016 after 2 years
development
4. Angular 2 features
• Optimized for both desktop and mobile
• Ahead of Time (AoT) compilation
• Incredible performances
• Native Reactive support
20. Why TypeScript?
• Angular2 Dependency Injection system is based on type
reflection
• Annotations offer a powerful and very expressive way to
describe elements
21. Pros
• Improve developer experience with better tools
• Compile time error check
• Type safety
• Better documentation
• Easy to adopt for backend developers
22. Cons
• Slower learning curve for traditional javascript developer
• Impossible to remove without a complete rewrite
24. Modern web is all about components
• Thinking of components instead of views improves decoupling
and separation of concerns
• Components are composable and highly reusable
• Easier to test
• UX and UI teams integrate better
25. A component is…
• exported as a custom HTML tag: <tab-bar />
• defined by an HTML template
• enhanced using the @Component decorator
• controlled using its inputs and outputs
• initialized by Angular Dependency Injection engine
27. @Component – selector
selector is the element property that we use to tell Angular to
create and insert an instance of this component.
28. @Component – template
• template is an HTML string that tells Angular what needs to be
to rendered in the DOM.
• templateUrl is a relative path to a file containing the component
HTML string.
29. Template syntax
• template tags {{expression}} – Execute arbitrary
expressions, e.g. {{1+1}}
• property binding [attribute]="propertyName" – Used to
pass data to a component.
• event binding (event)="expression" – Expression executed
anytime the registered event fires.
• 2-way binding <input [(ngModel)]="u.name"> – Requires
to import 'FormsModule' to be used.
32. @Component – inputs
// To bind to a raw string
<commit-hello name="World"></commit-hello>
// To bind to a variable in the parent component
<commit-hello [name]="userName"></commit-hello>
33. @Component – outputs
import { Component, EventEmitter, Output }
from '@angular/core';
@Component({
selector: 'counter',
template: `<div><p>Count: {{count}}</p>
<button (click)="increment()">Increment</button></div>`})
export class Counter {
count: number = 0;
@Output() result: EventEmitter = new EventEmitter();
increment() {
this.count++;
this.result.emit(this.count);
}
}
44. View encapsulation
• Emulated (default) – styles from main HTML propagate to the
component. Styles defined in this component's @Component
decorator are scoped to this component only.
• Native (shadow DOM) – styles from main HTML do not
propagate to the component. Styles defined in this component's
@Component decorator are scoped to this component only.
• None – styles from the component propagate back to the main
HTML and therefore are visible to all components on the page.
48. Observables
“Observables open up a continuous channel of
communication in which multiple values of data can be
emitted over time […] Angular 2 uses observables
extensively - you'll see them in the HTTP service and the
event system…”
– Angular official docs
49. Stream
“A stream is a sequence of ongoing events ordered in
time. It can emit 3 different things: a value, an error, or a
«completed» signal.
Consider that the «completed» takes place, for instance,
when the current window is closed.”
– A. Staltz
50. Observables vs. Promises
• Both provide us with abstractions that help us deal with the
asynchronous nature of our applications.
• Observables are cancellable.
• Observables can be retried using one of the retry operators
provided by the API, such as retry and retryWhen.
• Promises require the caller to have access to the original
function that returned the promise in order to have a retry
capability.
54. Bootstrapping Angular
• Bootstrapping is an essential process in Angular – it is where
the application is loaded when Angular comes to life.
• Bootstrapping Angular 2 applications is certainly different from
Angular 1.x, but is still a straightforward procedure.
55. Define a module
// app.modules.ts
import { BrowserModule } from '@angular/platformbrowser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './[PATH]/app.component';
import { MyComponent } from './[PATH]/some.component';
import { SomeService } from './[PATH]/some.service';
@NgModule({
declarations: [AppComponent, MyComponent],
providers: [SomeService],
imports: [BrowserModule, HttpModule],
bootstrap: [AppComponent]
})
class AppModule {}
56. Bootstrapping Angular
// main.ts
import { platformBrowserDynamic }
from '@angular/platform-browser-dynamic';
import { AppModule } from './app/';
// Bootstrap main component
platformBrowserDynamic().bootstrapModule(AppModule);
57. angular-cli
• Angular command line interface
• Works with Node.js and npm
• Fast project setup:
• npm install -g angular-cli
• ng new <project name>
• cd <project name>
• ng serve
59. AngularJS $digest cycle
• AngularJS engine is built using a dirty checking algorithm.
• Application state is a single entity connected to every visual
component and calculated every time a component mutates
some data
• It’s very easy to trigger unwanted $digest cycles impacting
performances
• Very difficult to debug
60. Angular 2 Change Detection engine
• Based on ngZone
• Recalculate the components tree state after every async
interaction (events, timers, observables..)
• Every component has its own Change Detector
• Component’s Change Detector is generated at runtime to
improve performances
• Developers can control how and when components are
recalculated
61. Change Detection
“When one of the components change, no matter where
in the tree it is, a change detection pass is triggered for
the whole tree, from top to bottom.”
– ngBook2
64. Change Detection
• Every component gets a change detector responsible for
checking the bindings defined in its template
• Change detection strategies:
• default: update the component every time data changes
• on push: update the component only when its inputs change or the
component requests to be updated