• Shuffle
    Toggle On
    Toggle Off
  • Alphabetize
    Toggle On
    Toggle Off
  • Front First
    Toggle On
    Toggle Off
  • Both Sides
    Toggle On
    Toggle Off
  • Read
    Toggle On
    Toggle Off
Reading...
Front

Card Range To Study

through

image

Play button

image

Play button

image

Progress

1/23

Click to flip

Use LEFT and RIGHT arrow keys to navigate between flashcards;

Use UP and DOWN arrow keys to flip the card;

H to show hint;

A reads text to speech;

23 Cards in this Set

  • Front
  • Back
  • 3rd side (hint)

Components

A component is a directive with a template. Renders portion of html



Data


HTML Markup


Template


View Behavior

Binding

Connects components to DOM

Service

Plain class that encapsulates any non-user interface logic


Data Access


Logging


Business Logic


Configuration

Router

Which component to show based on url

Directive

To modify DOM elements and/or extend behavior. No HTML Markup. Similar to components except for that.

Typings

Module that allows bringing in of JavaScript libraries into typescript

angular-cli

Angular command line interface -


npm install -g angcli


ng new project_name


ng serve

app/boot.ts

Typescript file that is the main or starting module for application

App folder is container for application

app/app.component.ts

Root component file for application

tsconfig.json

Configuration file for typescript compiler - determines how to make these into JS.

typings.json

Imports Typescript definition file

Selector

Tells Angular to attach a component to an HTML DOM element.



selector: 'view-rating'



<view-rating></view-rating>

Two Types of Directives

Structural: change layout by altering elements in the DOM



Attribute: change behavior or appearance of existing DOM element

Pipes

|takes in data like a string or array and runs logic to transifrm it into a new output like uppercase or datetime

Dependency Injection (DI)

Architect code in a way that provides modules with other modules it needs to get work done without that module having to get other modules on its own. Concept of Inversion of Control (IoC). Allows for decoupling and better unit testing

Npm

Package manager to install libraries and packages the apps require.

Package.json scripts

Run at various times within application. Ex:


"Start": "npm run start:dev -- --inline --hot"

Structural directives

ngIf and ngFor



Change structure of portions of DOM. Give structure to the way angular displays content.

* before ngIf etc

Asterisk indicates the element and it's children are a master template.

If statement in angular.

<div *ngIf="methodName">

For loop in Angular

<li *ngFor="let hero of heroes" >

Click event on DOM element

(click)="methodName(arg)"

Property binding

Data flows one way from the data source (expression hero === selected Hero) to a property of class.



[class.selected]="hero === selected Hero"