Angular2 - Language Features Flashcards
Root of the application
AppComponent
AppComponent is the ____ of the application. It hosts the ___ ____ experience.
root, client user
Components
basic building blocks of Angular2 app
Component controls a ____ through its associated ____
view, template
_______ controls a view through its associated template
A component
@Component decorator
which template to use and how to create it
@Component contains ______ that tells which template to use and how to create the component.
metadata
@Component - Selector
specifies CSS selector for an HTML element
@Component - TemplateUrl, Template
html file/an html string
@Component - Directives
array for injecting other components
@Component - Providers
where services are registered
App.component.ts
Contains
- import statements
- @Component decorator
- component class
Component class
- “controller” that controls appearance and behavior of a view through the template
AppComponent
- AppComponent is exported, to be imported somewhere else
- located in App.component.ts
Main.ts
bootstraps the app
Main.ts - bootstrap function
- called by Angular
1) reads AppComponent (root component)
2) finds my-app selector
3) locates my-app element
4) renders the app between my-app tags
index.html
- defines the web page that hosts the app
- contains all of the script tags
SystemJS
- module loader
Data Binding:
{{someproperty}}
- one-way data binding
- also called interpolation
Data Binding:
ngModel = [{someproperty}]
two-way data binding
Property Binding:
[targetproperty] = “sourceProperty”
one-way data flow, from data source to a class property
What are the three types of Directives in Angular2?
Component, Structural, and Attribute
What is a Component Directive?
A directive with a template
What is a Structural Directive?
- A directive that changes the DOM
- i.e. NgFor and NgIf
What is an Attribute Directive?
- A directive that changes the appearance/behavior of an element
- i.e. NgStyle
*ngFor
iterates over an array
template input variable
directive that can be referenced inside a template
(click)
same as ngClick
Services
- registered in @Component Providers
What is a Promise?
- an async call that promises to send results when they’re ready
- the promise’s “then” function takes our callback
What are Lifecycle Hooks?
- allows access to certain events in the lifecycle of a component
- i.e. creation, change, destruction
What are some examples of Lifecycle Hooks?
ngOnInit
ngOnChanges
ngDoCheck
ngOnDestroy
Angular2 default couter
Component Router
What does a route definition contain?
path: URL
component: the component to create when navigating
Router Outlet
tags at the bottom of a template which tells the router where to display associated components
Router Link
<a>Heroes</a>
Route Parameter
data you want available to a routes component
path: ‘detail/:id’
What are pipes?
- a way to format strings and dates
- {{selectedHero.name | uppercase}} is my hero
What is Angular2’s http library?
HTTP_PROVIDERS
What is HTTP_PROVIDERS?
library that contains providers for all http services
What are Observables?
- a collection of data
- a way to manage asnc data flow
What is a template string?
- a string that contains html elements, used in a component
ES2015 allows for multi-line strings using ____
backticks
ES2015 allows for ______ strings using backticks.
multi-line
What is Master/Detail?
A UI pattern consisting of a list with drill-down views
___ creates block-scoped variables
let
let creates ______ variables
block-scoped
