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
590
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
50
Type safe CSS with Reason
cironunes
0
110
What I've learned building automated docs for Ansarada's design system
cironunes
0
68
Beyond ng new
cironunes
2
200
Animate your Angular apps
cironunes
0
420
Sweet Angular, good forms never felt so good
cironunes
0
66
Sweet Angular, good forms never felt so good
cironunes
0
290
Progressive Angular apps
cironunes
3
890
Firebase & Angular
cironunes
0
290
Other Decks in Programming
See All in Programming
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
740
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
AHC051解法紹介
eijirou
0
640
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
More Approvers for Greater OSS and Japan Community
tkikuc
1
100
A Gopher's Guide to Vibe Coding
danicat
0
200
Kiroで始めるAI-DLC
kaonash
2
500
パスタの技術
yusukebe
1
550
TanStack DB ~状態管理の新しい考え方~
bmthd
2
370
機能追加とリーダー業務の類似性
rinchoku
0
160
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Done Done
chrislema
185
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Why Our Code Smells
bkeepers
PRO
339
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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!