techindepth

@Component({
  selector: 'my-app',
  template: `
  	<h1>Testing the Angular Component</h1>
  `,
})
class TestComponent {
		counter = 0;
    name = 'Angular 2'
    

techindepth

import {Directive, ElementRef} from 'angular2/angular2';

@Directive({
    selector: "[link]",
    hostListeners: {
        'mouseenter': 'onMouseEnter()',
        'mouseleave': 'onMouseLeave()'
    }
})
class LinkHighlight {

techindepth

$scope.$watch('myValue', function(newValue, oldValue) {

  //update the DOM with newValue

});

techindepth

var start,

    time = 0;

    timer = performance ? performance.now : Date.now;

 

// start timer

techindepth

function doSomething() {
  console.log('Async task');
}
// start timer
start = timer();
foo();
setTimeout(doSomething, 2000);
bar();
baz();
// stop timer

techindepth

function main() {
  foo();
  setTimeout(doSomething, 2000);
  bar();
  baz();

}

zone.run(main);

techindepth

function main() {
  foo();
  setTimeout(doSomething, 2000);
  bar();
  baz();

}

var myZoneSpec = {
  beforeTask: function () {

techindepth

@Component({

  selector: 'progress-bar',

  template: `

    <h3>Progress: {{progress}}</h3>

    <button (click)="processWithinAngularZone()">

techindepth

@Component({

  selector: 'progress-bar',

  template: `

    <h3>Progress: {{progress}}</h3>

    <button (click)="processWithinAngularZone()">

techindepth

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { EagerComponent } from './eager.component';
import { routing } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,