Intro to Angular

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? Beneﬁts: • Scalability • Superset of
JS • Imports • ES-next compliance • Type-Checking • Annotations

@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 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 ﬂow

@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 workﬂow, 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

Exercise

⚡Conclusión

Angular Costa Rica • Facebook, YouTube, Medium @angularcostarica • Twitter
@angularcr

Intro to Angular

Intro to Angular

More Decks by Mariano Alvarez

Other Decks in Programming

Featured

Transcript