osc 2016 fukuoka セミナー angular 2はじめました！
TRANSCRIPT
OSC 2016 Fukuoka
Angular2Ashiras, inc. Interaction Engineer Tubasa Sekiguchi
1.Angular
2.
3.
01 Angular
Angular is
One framework. Mobile & desktop.
1. TypeScript
2.
3. Angular-CLI
01_01 TypeScript
JavaScript
ES.next +
TypeScript
ES2015
var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; }());
var greeter = new Greeter("world"); var button = document.createElement('button'); button.textContent = "Say Hello"; button.onclick = function () { alert(greeter.greet()); }; document.body.appendChild(button);
class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }
let greeter = new Greeter("world"); let button = document.createElement('button'); button.textContent = "Say Hello"; button.onclick = function () { alert(greeter.greet()); }; document.body.appendChild(button);
Babal JS
TypeScript
TypeScript 👍
01_02
import { Component } from '@angular/core';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; }
JS
HTML/CSS
UI
👍
01_03 Angular-CLI
Prototype of a CLI for Angular 2 applications based on the ember-cli project.
$ npm install -g angular-cli
$ ng new helloworld
$ cd helloworld/
$ ng serve
http://localhost:4200/
👍
$ ng g component hoge
installing component create src/app/hoge/hoge.component.css create src/app/hoge/hoge.component.html create src/app/hoge/hoge.component.spec.ts create src/app/hoge/hoge.component.ts
👍
Angular-CLI 👍
02
#
https://github.com/knh8205/Tomato
( )
1.
2.
3.
02_01
Angular 2
02_02
Web
Web
…
(´ ω )
( ω ´)
Firebase
API
API
Firebase
Firebase
Firebase = Realtime Database
Enter
Firebase …
Firebase 👍
02_03
2016 12
2017 02 RC
2017 03
03
👍
OSC 2016 Fukuoka
Ashiras, inc. Interaction Engineer Tubasa Sekiguchi