Type of Web: Wstęp do Angular2

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent } from './app.component.ts';

bootstrap(AppComponent);

<!DOCTYPE html>
<html>

<head>
  <!-- Polyfill(s) for older browsers -->
  <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>

  <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
  <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
  <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
  
  <script src="https://cdn.rawgit.com/blueimp/JavaScript-MD5/d92d988de9e3cb20741b9d72717dfacf2db993bc/js/md5.js"></script>

  <script src="systemjs.config.js"></script>
  <script>
    System.import('app/main').catch(function(err) {
      console.error(err);
    });
  </script>
</head>

<body>
  <typeofweb-app>Loading...</typeofweb-app>
</body>

</html>

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'app',

    '@angular':                   'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js',
 };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // Add map entries for each angular package
  // only because we're pinning the version with `ngVer`.
  ngPackageNames.forEach(function(pkgName) {
    map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
  });

  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {

    // Bundled (~40 requests):
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };

    // Individual files (~300 requests):
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    map: map,
    packages: packages
  }

  System.config(config);

})(this);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

import {Component} from '@angular/core';

interface Todo {
  title:string;
  complete:boolean;
}

@Component({
  selector: 'todo-list-app',
  templateUrl: 'app/todo-list.component.html'
})
export class TodoListAppComponent {
  newTodoTitle:string = '';

addTodo() {
  if (!this.newTodoTitle) {
    return;
  }

  const newTodo:Todo = {
    title: this.newTodoTitle,
    complete: false
  };
  this.todos.push(newTodo);

  this.newTodoTitle = '';
}

  todos:Array<Todo> = [{
    title: 'kupić chleb',
    complete: true
  }, {
    title: 'zrobić kanapkę',
    complete: false
  }];
}

<h1>Lista zadań</h1>
<label>
  Nowe zadanie:
  <input type="text" [(ngModel)]="newTodoTitle" (keyup.enter)="addTodo()">
</label>

<ul>
  <li *ngFor="let todo of todos">
    <input type="checkbox" [(ngModel)]="todo.complete">
    {{ todo.title }}
  </li>
</ul>

import {Component, OnInit} from '@angular/core';
import {ContactsService, Contact} from './contacts.service';
import {ContactsListComponent} from "./contacts-list/contacts-list.component";

@Component({
  moduleId: module.id,
  selector: 'typeofweb-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [ContactsService],
  directives: [ContactsListComponent]
})
export class AppComponent implements OnInit {
  public contacts:Array<Contact>;

  ngOnInit() {
    this.contacts = this.contactsService.contacts;
  }

  constructor(private contactsService:ContactsService) {
  }
}

import {Injectable} from '@angular/core';

export interface Contact {
  id:number;
  name:string;
  age:number;
  email:string;
}

@Injectable()
export class ContactsService {
  contacts:Array<Contact> = [{
    id: 1,
    name: 'Michał',
    age: 24,
    email: 'michal@mmiszy.pl'
  }, {
    id: 2,
    name: 'Tester',
    age: 99,
    email: 'randomemail@com.pl'
  }, {
    id: 3,
    name: 'Testish',
    age: 15,
    email: 'legal@com.pl'
  }];

  constructor() {
  }
}

import {Component, Input} from '@angular/core';
import {Contact} from "../contacts.service";
import {ContactItemComponent} from "../contact-item/contact-item.component";

@Component({
  moduleId: module.id,
  selector: 'typeofweb-contacts-list',
  templateUrl: 'contacts-list.component.html',
  styleUrls: ['contacts-list.component.css'],
  directives: [ContactItemComponent]
})
export class ContactsListComponent {
  @Input() contacts:Array<Contact>;
}

import {Component, OnInit, Input} from '@angular/core';
import {Contact} from "../contacts.service";
import {GravatarComponent} from "../gravatar/gravatar.component";

@Component({
  moduleId: module.id,
  selector: 'typeofweb-contact-item',
  templateUrl: 'contact-item.component.html',
  styleUrls: ['contact-item.component.css'],
  directives: [GravatarComponent]
})
export class ContactItemComponent {
  @Input() contact:Contact;
}

import {Component, Input, OnChanges, SimpleChange, OnInit} from '@angular/core';
import {GravatarService} from "../gravatar.service";

@Component({
  moduleId: module.id,
  selector: 'typeofweb-gravatar',
  templateUrl: 'gravatar.component.html',
  providers: [GravatarService]
})
export class GravatarComponent implements OnChanges, OnInit {
  @Input() size:number;
  @Input() email:string;
  gravatarUrl:string;

  constructor(private gravatarService: GravatarService) {}

  private updateGravatarUrl() {
    this.gravatarUrl = this.gravatarService.getGravatarUrl(this.email, this.size);
  }

  ngOnInit() {
    this.updateGravatarUrl();
  }

  ngOnChanges(changes:{[key: string]: SimpleChange}) {
    const emailChange = changes['email'];
    if (emailChange) {
      this.updateGravatarUrl();
    }
  }
}

<typeofweb-contacts-list [contacts]="contacts"></typeofweb-contacts-list>

import {Injectable} from '@angular/core';
declare var md5:(email:string)=>string;

@Injectable()
export class GravatarService {
  static GRAVATAR_URL = 'https://www.gravatar.com/avatar';

  getGravatarUrl(email:string, size:number) {
    if (!email || !size) {
      return '';
    }
    const emailMd5 = md5(email);
    return `${GravatarService.GRAVATAR_URL}/${emailMd5}?s=${size}&d=https%3A%2F%2Ftypeofweb.com%2Fcontent%2Fimages%2F2016%2F05%2Ftypeofweb_logo-04-white-blog.png`
  }
}

:host {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 1.2em;
  letter-spacing: 0.05em;
}

typeofweb-contacts-list {
  max-width: 300px;
  display: block;
}

<ul>
  <li *ngFor="let contact of contacts">
    <typeofweb-contact-item [contact]="contact"></typeofweb-contact-item>
  </li>
</ul>

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border-bottom: none;
}

typeofweb-contact-item {
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
  display: block;
}

typeofweb-contact-item:hover {
  background: #ddd;
}

<typeofweb-gravatar [email]="contact.email" size="64"></typeofweb-gravatar>
<div>Name: {{contact.name}}</div>
<div>Age: {{contact.age}}</div>

typeofweb-gravatar {
  float: left;
  margin: 0 10px 0 0;
}

<img [src]="gravatarUrl" [width]="size">