Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular: Um framework. Mobile & desktop.
Search
Ciro Nunes
October 22, 2016
Programming
1
560
Angular: Um framework. Mobile & desktop.
Ciro Nunes
October 22, 2016
Tweet
Share
More Decks by Ciro Nunes
See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
36
Type safe CSS with Reason
cironunes
0
88
What I've learned building automated docs for Ansarada's design system
cironunes
0
54
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
380
Sweet Angular, good forms never felt so good
cironunes
0
51
Sweet Angular, good forms never felt so good
cironunes
0
270
Progressive Angular apps
cironunes
3
860
Firebase & Angular
cironunes
0
280
Other Decks in Programming
See All in Programming
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
520
Hanami and htmx
bkuhlmann
0
230
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
410
Netty Chicago Java User Group 2024-04-17
sullis
0
210
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
GitHub Copilotのススメ
marcy731
1
230
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
Python3.12のWhat's New から f-string の変更だけ読んでみた
2323code
0
100
Ruby Pattern Matching
bkuhlmann
0
930
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
910
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Mythical Team-Month
searls
217
42k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Code Reviewing Like a Champion
maltzj
515
39k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Side Projects
sachag
451
41k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
How to name files
jennybc
65
93k
Into the Great Unknown - MozCon
thekraken
15
1k
Transcript
Um framework. Mobile & desktop.
Ciro Nunes @cironunesdev
None
None
Um framework. Mobile & desktop.
2. Como distribuir para múltiplas plataformas 3. Arquitetura e um
pouco de código 1. O que faz o Angular 2 ser tão bom?
2. Como distribuir para múltiplas plataformas 3. Arquitetura e um
pouco de código 1. O que faz o Angular 2 ser tão bom?
Múltiplas plataformas
Performance
Change Detection t AoT Compiler Algumas coisas que deixam o
Angular 2 rápido t Optimized JS code for VM + Three shaking t Three shaking Unidirectional data flow Route Lazy loading t Smarter change detection
Experiência do desenvolvedor
Simplicidade
FILTERS (PIPES) sem perder as features que nós conhecemos e
amamos DATA BINDING DEPENDENCY INJECTION COMPONENTS DIRECTIVES ROUTING & NAVIGATION MODULES TESTING
None
Ferramentas http://slides.com/gerardsans/imworld-ng2-revolution#/4/4
None
TS ES7 ES2016 ES6 ES2015 ES5
Extensões
None
None
None
None
http://fiber.google.com/
http://builtwithangular2.com/
1. O que faz o Angular 2 ser tão bom?
2. Como distribuir para múltiplas plataformas 3. Arquitetura e um pouco de código
Desktop
Responsive Web Apps
Native
Mobile
Native (NativeScript)
Progressive Web Apps
Hybrid
1. O que faz o Angular 2 ser tão bom?
2. Como distribuir para múltiplas plataformas 3. Arquitetura e um pouco de código
None
~ $ npm i -g angular-cli ~ $ ng new
my-project ~ $ ng serve ~ $ ng test ~ $ ng build --prod
Components
~ $ ng generate component app
export class AppComponent { title = 'app works!'; } import
{ Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] })
export class AppComponent { title = 'app works!'; } import
{ Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] })
export class AppComponent { title = 'app works!'; } @Component({
selector: 'app-root', template: `<h1>{{title}}</h1>`, styleUrls: ['./app.component.css'] }) import { Component } from '@angular/core';
Data binding
http://jsbin.com/hayiyuyeve/edit?html,js,output
@Component({ selector: 'my-greeting', template: ` <input type="text" [(ngModel)]="hero.name"> <h2>Hello, {{hero.name}}</h2>
`, }) export class Greeting { constructor() { this.hero = { name: 'Ciro' } } } http://plnkr.co/edit/MGnF3Ta5IOPYYAyXjFpl?p=preview
Binding Example Properties <fy-rating [rating]="feedback.rating"> Events <fy-rating (onRate)="feedback.update($event)"> Two-way <input
type="text" [(ngModel)]="user.name">
Services
~ $ ng generate service feedback
@Injectable() export class FeedbackService { constructor() { } }
@Injectable() export class FeedbackService { private feedbacksUrl = 'http://localhost:4222/feedbacks'; constructor(private
http: Http) { } getFeedbacks(): Observable<Feedback[]> { return this.http.get(this.feedbacksUrl) .map(this.extractData); } }
Dependency Injection
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [FeedbackService] })
export class AppComponent implements OnInit { feedbacks: Feedback[]; constructor(private feedbackService: FeedbackService) {} ngOnInit() { this.feedbackService.getFeedbacks() .subscribe(feedbacks => this.feedbacks = feedbacks); } }
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [FeedbackService] })
export class AppComponent implements OnInit { feedbacks: Feedback[]; constructor(private feedbackService: FeedbackService) {} ngOnInit() { this.feedbackService.getFeedbacks() .subscribe(feedbacks => this.feedbacks = feedbacks); } }
Directives
~ $ ng generate directive highlight
@Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef,
renderer: Renderer) { renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); } }
@Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef,
renderer: Renderer) { renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); } }
Pipes
@Component({ selector: 'hero-birthday', template: `<p>The hero's birthday is {{ birthday
| date }}</p>` }) export class HeroBirthdayComponent { birthday = new Date(1988, 3, 15); // April 15, 1988 }
Modules
import { NgModule } from '@angular/core'; import { BrowserModule }
from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
import { NgModule } from '@angular/core'; import { BrowserModule }
from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
http://github.com/cironunes/feedbacky
@cironunesdev
Obrigado!