An Introduction
Chad Jewsbury
@chadjewsbury
(but I don't tweet much)
www.chadjewsbury.com
September 14, 2016
Angular v2.0 Official Release
( ... only two years after originally announced ... )
$scope, $scope.apply(), $scope.digest()
Controllers
function foo() {...}
function bar() {...}
function baz() {...}
foo();
bar();
baz();
*Example adapted from Thougtram.io blog & Brian Ford's zone.js talk
/* start */
start = Date.now();
foo();
bar();
baz();
/* stop */
time = Date.now() - start;
/* log */
console.log(time);
/* start */
start = Date.now();
foo();
setTimeout(bar, 2000);
/* ^^^ ??? */
baz();
/* stop */
time = Date.now() - start;
/* log */
console.log(time);
/* Execution order... */
start = Date.now();
foo();
setTimeout(bar, 2000);
/* ^ Added to event queue */
baz();
time = Date.now() - start;
console.log(time);
/* ... 2000 ms later */
bar();
function main() {
foo();
setTimeout(bar, 2000);
baz();
}
var myZoneSpec = {
beforeTask: function () {
console.log('Before task');
/* start timer */
},
afterTask: function () {
console.log('After task');
/* end timer */
}
};
var myZone = zone.fork(myZoneSpec);
myZone.run(main);
Zone.setInterval()
Zone.alert()
Zone.prompt()
Zone.requestAnimationFrame()
Zone.addEventListener()
Zone.removeEventListener()
NgZone
@NgModule({ ... })
@Component({ ... })
@Pipe({ ... })
@Injectable()
function superhero(target) {
target.isSuperHero = true;
target.power = 'flight';
}
@superhero
class MySuperHero() {}
console.log(MySuperHero.isSuperHero);
// true
<subscribeComponent></subscribeComponent>
<!-- subscribeComponent -->
<div class="subscribe-container">
<h2>Subscribe</h2>
<myInputComponent [labelText]="Name">
</myInputComponent>
<myInputComponent [labelText]="Email" [inputType]="email">
</myInputComponent>
<myButton>Subscribe</myButton>
</div>
<!-- myInputComponent -->
<label>
{{labelText}}
<input type="{{inputType || 'text'}}"/>
</label>
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function() {
return "Hello, " + this.greeting;
}
let greeter = new Greeter({message: "world"});
/*
No Errors! Totally Valid! :(
"Hello, [object Object]" instead of
"Hello, world"
*/
function Greeter(greeting: string) {
this.greeting = greeting;
}
Greeter.prototype.greet = function() {
return "Hello, " + this.greeting;
}
let greeter = new Greeter({message: "world"});
/*
Compilation Error!
Argument of type '{ message: string; }'
is not assignable to parameter of type 'string'.
Editor can highlight errors as you work!
*/
class Student {
fullName: string;
constructor(public firstName,
public middleInitial,
public lastName) {
this.fullName = firstName + " "
+ middleInitial + " "
+ lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, "
+ person.firstName + " "
+ person.lastName;
}
var user = new Student("Jane", "M.", "User");
console.log(greeter(user)); // "Hello Jane User"