TypeScript angular2/angular2 bootstrap Examples

Example #1

File: bootstrap.ts Project: A-Kamaee/ng2-bootstrap-sbadmin

import {bootstrap} from 'angular2/angular2';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';

import {App} from './components/app/app';

import {BaseService} from './components/baseServices/base.service';

import {ViewbagService} from './components/viewbag/viewbag.service';

bootstrap(App, [
  ROUTER_PROVIDERS, HTTP_PROVIDERS, BaseService, ViewbagService
]);

Example #2

File: main.ts Project: Cod1ngNinja/egghead-angular2-london-workshop-master

import {bootstrap, Component} from "angular2/angular2";
import {TodoInput} from "./todoInput";
import {TodoService} from "./todoService";
import {TodoList} from "./todoList";

@Component({
    selector:'app',
    directives: [TodoInput, TodoList],
    template: `
        <div>
        <todo-input></todo-input>
        <todo-list></todo-list>
        </div>
    `
})
class App{}

bootstrap(App, [TodoService]);

Example #3

File: app.ts Project: tanou73/Angular2POC

		this.checked = false;
	}
}

class TodoList {
	items: Todo[];
	constructor() {
		this.items = [];
	};
	remove(item) {
		var idx = this.items.indexOf(item);
        this.items.splice(idx, 1);
	};
	add(item) {
		if (!this.containsByName(item)) {
			this.items.push(item);
		}
	};
	containsByName(item) {
		for (var i = 0; i < this.items.length; ++i) {
			if (this.items[i].name == item.name) {
				return true;
			}
		}
		return false;
	}
}


bootstrap(TodoAppComponent);		

Example #4

File: app.ts Project: EdsonF/angular-2-samples

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap} from 'angular2/angular2';
import{DemoPage} from './demo-page';

@Component({
   selector: 'demo-app'
})

@View({
    template: '<demo-page></demo-page>',
    directives:[DemoPage]
})

class MyDemoApp {

    constructor() {

    }
}

bootstrap(MyDemoApp);

Example #5

File: main.ts Project: 2947721120/angular-cn-1

// #docregion
// #docregion import
import {Component, View, bootstrap} from 'angular2/angular2';
// #enddocregion

@Component({
  selector: 'my-app'
})
@View({
  template: '<h1 id="output">My first Angular 2 App</h1>'
})
class AppComponent {
}
// #docregion bootstrap
bootstrap(AppComponent);
// #enddocregion

Example #6

File: app.ts Project: pumpk1n/angular2-router-test

import {Dashboard} from './components/dashboard/dashboard';
import {Login} from './components/login/login';

@Component({
	selector: 'app'
})
@View({
	directives: [ RouterOutlet, RouterLink ],
	template: `
		<a router-link="base">base</a>
		<a router-link="dashboard">dashboard</a>
		<a router-link="login">login</a>
		<br>
		<router-outlet></router-outlet>
	`
})
@RouteConfig([
	{ path: '/', component: Base, as: 'base' },
	{ path: '/dashboard', component: Dashboard, as: 'dashboard' },
	{ path: '/login', component: Login, as: 'login' },
])
class App {
	userid: string;
	password: string;

	constructor() {

	}
}
bootstrap(App, [routerInjectables]);

Example #7

File: app.ts Project: yadomi/lastagram

/// <reference path="../typings/tsd.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';

import {LastFMEvents}      from 'components/lastfm/events/component'
import {InstagramPictures} from 'components/instagram/pictures/component'
import {InstagramPicture}  from 'components/instagram/picture/component'

@Component({
  selector: 'app'
})
@View({
  templateUrl: 'app.html',
  directives: [LastFMEvents, InstagramPictures]
})
class App {

  public pictures: Array<InstagramPicture>

  constructor() {}

}

bootstrap(App);

Example #8

File: game.ts Project: mperezcol/angular2-lab

/* Contenedor principal */
@Component({
  selector: 'game',
  injectables: [PlayerComponent,TileService]
})
@View({
  template: `
  <h1>Multi-user Memory Game!!</h1>
  <div id="gameContainer">
    <div id="playerContainer1">
      <player>
      </player>
    </div>
    <div id="playerContainer2">
      <player>
      </player>
    </div>
  </div>
  `,
  directives: [PlayerComponent] 
})
export class GameComponent {
  player1: PlayerComponent;
  player2: PlayerComponent;
	constructor(player1:PlayerComponent,player2:PlayerComponent){
    this.player1 = player1;
    this.player2 = player2;
	}
}
bootstrap(GameComponent); 

Example #9

File: MusicBrowserComponent.ts Project: nicojs/angular2-music-browser

    template: `
    <div class="row">
    <div class="col-md-12">
        <new-genre-form />
    </div>
    </div>
    <tabs>
        <tab *ng-for="#genre of genres" [tab-title]="genre.name + ' (' + genre.artistCount + ')'">
            <music-genre [genre]="genre"></music-genre>
        </tab>
    </tabs>
    `,
    directives: [TabsComponent, TabComponent, NgFor, MusicGenreComponent, NewGenreFormComponent]
})
class MusicBrowserComponent {
    genres:Array<MusicGenre>;

    constructor(musicGenreService: MusicGenreService) {
        this.genres = musicGenreService.genres;
    }

    activateGenre(genre: MusicGenre){
        this.genres.forEach(genre => genre.isActive = false);
        genre.isActive = true;
        return false;
    }
    
}

bootstrap(MusicBrowserComponent);

Example #10

File: index.ts Project: trainerbill/generator-ng-fullstack

/// <reference path="typings/tsd.d.ts" />

import {bootstrap} from 'angular2/angular2';
import {Todo} from 'components/todo';

bootstrap(Todo);