osc 2016 fukuoka セミナー angular 2はじめました！

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

#

Twitter

https://github.com/knh8205/Tomato

( )

1.

2.

3.

02_01

Twitter

Twitter

Twitter

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