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
Intro to Angular
Search
Mariano Alvarez
September 20, 2019
Programming
2
38
Intro to Angular
Learn the basic of Angular
Mariano Alvarez
September 20, 2019
Tweet
Share
More Decks by Mariano Alvarez
See All by Mariano Alvarez
Vainilla Redux
mahcr
0
51
Web Workers
mahcr
0
30
PWA: Web app con super poderes
mahcr
0
58
Redux - NgRx v8
mahcr
0
76
AMP ¿Como iniciar?
mahcr
0
48
Volando_con_el_Assistant.pdf
mahcr
0
130
Angular_Elements.pdf
mahcr
0
100
Angular Elements
mahcr
0
45
The beauty of NgRx
mahcr
0
56
Other Decks in Programming
See All in Programming
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Google Opalで使える37のライブラリ
mickey_kubo
3
140
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
550
Software Architecture
hschwentner
6
2.3k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.4k
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
450
One Enishi After Another
snoozer05
PRO
0
150
Introduce Hono CLI
yusukebe
6
3.1k
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
110
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Context Engineering - Making Every Token Count
addyosmani
8
300
For a Future-Friendly Web
brad_frost
180
10k
RailsConf 2023
tenderlove
30
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
A Tale of Four Properties
chriscoyier
161
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Transcript
Angular Intro to
@malvarezcr Me! Web Practice Lead Co-Organizador de Angular Costa Rica
Fan de JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez
Basics
@malvarezcr What is a framework? ⛓ Patterns Tools Standardization Testing
@malvarezcr Should I use one? ….. depende….
@malvarezcr What is Angular?
@malvarezcr History 2010 2016
@malvarezcr What is Typescript? “TypeScript is an open-source programming language
developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.”
@malvarezcr What is Typescript? Benefits: • Scalability • Superset of
JS • Imports • ES-next compliance • Type-Checking • Annotations
@malvarezcr What is Typescript?
@malvarezcr What is Typescript?
@malvarezcr What is RxJS? “Reactive programming is an asynchronous programming
paradigm concerned with data streams and the propagation of change.”
@malvarezcr What is RxJS?
@malvarezcr What is RxJS? “Operators are functions that build on
the observables foundation to enable sophisticated manipulation of collections” Operators
@malvarezcr What is RxJS? Operators
@malvarezcr What is RxJS? Operators
@malvarezcr Dependency Injection “Dependencies are services or objects that a
class needs to perform its function. DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.”
@malvarezcr Dependency Injection Taken from https://www.freecodecamp.org/news/a-quick-intro-to-dependency-injection-what-it-is-and-when-to-use-it-7578c84fa88f/
@malvarezcr Dependency Injection @Injectable()
@malvarezcr Dependency Injection @NgModule()
@malvarezcr Dependency Injection @Component()
@malvarezcr Components “A component is a part or element of
a larger whole” E.g A part of a machine or vehicle
@malvarezcr Components
@malvarezcr Components Data flow
@malvarezcr Components Example
@malvarezcr Components Interpolation
@malvarezcr Directives • Structural Directives • Attribute Directives Two Types
@malvarezcr Structural Directives • *ngIf • *ngFor • *ngSwitch •
Custom Structural directives are responsible for HTML layout.
@malvarezcr Attribute Directives An Attribute directive changes the appearance or
behavior of a DOM element.
@malvarezcr Modules NgModules “NgModules are containers for a cohesive block
of code dedicated to an application domain, a workflow, or a closely related set of capabilities.”
@malvarezcr Modules NgModules
@malvarezcr Modules “Operators are functions that build on the observables
foundation to enable sophisticated manipulation of collections” @NgModules
@malvarezcr Tools CLI Augury Language Service …. and more
None
Exercise
⚡Conclusión
Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter
@angularcr