jepetko

.arg {
  border: 1px solid blue;
  background: lightgrey;
  margin: 5px;
}

pre {
  border: 1px dotted blue;
  background: lightgrey;
  padding: 5px;

jepetko

.arg {
  border: 1px solid blue;
  background: lightgrey;
  margin: 5px;
}

pre {
  border: 1px dotted blue;
  background: lightgrey;
  padding: 5px;

jepetko

#weather {
  font-size: 20px;
  font-weight: bold;
  border: 2px solid black;
  padding: 20px;
}


.rainy {

jepetko

//Example 1: inline definition... not configurable :-(

  angular.module("myApp", [])
  .provider("Dummy", <ng.IServiceProvider>{
      '$get': function() {
          return { value: 1 };
      }
  })
  .config(["DummyProvider", function(Dummy: ng.IServiceProvider) {

jepetko

export class Tab {
  
  private _active: boolean;
  constructor(private _id: number = -1, public title?: String, public content?: String) {
  }
  
  set active(active: boolean) {
    this._active = active;
  }
  

jepetko

import {Injectable} from 'angular2/core';
import {Tab} from './tab';

@Injectable()
export class TabService {
  
  private static _tabs: Tab[] = [new Tab(1, "Dog Dingo", "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut."), 
                                     new Tab(2, "Horse Harry", "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")];
                                            
  getTabs(): Promise<Array<Tab>> {

jepetko

import {Component, OnInit} from 'angular2/core';
import {Router, RouterOutlet} from 'angular2/router';
import {Tab} from './tab';
import {TabService} from './tab.service';
import {TabLinkComponent} from './tab-link.component';
import {TabContentComponent} from './tab-content.component';
import {TabFormComponent} from './tab-form.component';

@Component({
  selector: 'tabs',

jepetko

import {Component, OnInit, ElementRef} from 'angular2/core';
import {Tab} from './tab';
import {RouterLink} from 'angular2/router';

@Component({
  selector: '[tabLink]',
  inputs: ['tab'],
  directives: [RouterLink],
  template: `
        <a [routerLink]="['Tab', {id: tab.id}]" [attr.aria-controls]="tab.title" role="tab">

jepetko

import {Component, OnInit} from 'angular2/core';
import {Tab} from './tab';
import {TabService} from './tab.service';
import {RouteParams} from 'angular2/router';

@Component({
  selector: '[tabContent]',
  template: `<div *ngIf="tab" class="panel panel-default">
              <div class="panel-body">
                <p class="active">{{tab.content}}</p>

jepetko

describe('change detection', () => {

    let failure = 'There should be the exception: Expression has changed after it was checked';
    let spy: any;
    let myIt: any;
    beforeEach(() => {
      fixture.autoDetectChanges(true);

      patchChangeDetection();