QC - Week 6

Modules

Modules

containers for a cohesive block of code dedicated to an application domain, workflow or closely related set of capabilities

module decorator metadata

declarations, exports, imports, providers and bootstrap

declarations

the components, directives and pipes that belong to this module

exports

the subset of declarations that should be visible and usable in the component templates of other modules

imports

other modules whose exported classes are needed by component templates declared in this module

providers

creators of services that this module contributes to the global collection of services; they become accessible in all parts of the application

bootstrap

the main application view, called the root component, which hosts all other application views. only the root module should set the bootstrap property

components

the most basic ui building block of an angular app

component decorator

@component

template

a chunk of html, uses special syntax to build angular features

directives

extended html attributes that can be based on state of the component

used with [ ]

attribute directives

ngClass - apply classes ngStyle - set multiple inline styles simultaneously ngModel - display a data property and update that property when the user makes changes

structural directives

NgIf - conditionally creates or disposes of subviews from the template NgFor - repeat a node for each item in a list NgSwitch - a set of directives that switch among alternative views

input

decorator that marks a class field as an input property and supplies configuration metadata

output

decorator that marks a class field as an output property and supplies configuration metadata, can pass data to a parent component

interpolation binding

embedding expression into marked up text using the {{ and }} as delimiters

property binding

set values for properties of html elements or directives

used for toggle button features, set paths programmatically and share values between components

enclose the property in [ ], identifies it as target property, set value to a variable, expression or function

event binding

lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks and touches

target event name is enclosed in ( ), template statement in " "

two way binding

gives components in your application a way to share data

used to listen for events and update values simultaneously between parent and child components

[ ( )]

dependency injection

allows classes with angular decorators, such as components, directives, pipes and injectables, to configure dependencies that they need using an injector

dependency is requested by a dependency consumer, injector checks its registry to see if an instance is there from a provider, if not it creates an instance and stores it in the registry

define a provider with the @injectable() decorator to show the class can be injected

provide it to components in their @component decorator with the providers field or in the ngmodule using the providers field of the @ngmodule decorator

inject the dependency in the constructor of the class

spa

single page application, only one page in the application, components and loaded and removed dynamically via user input/navigation

makes production deployment easier (one index, css bundle, and javascript bundle) minimal network loading time, only initial page load, everything else is generated at client side, only data is requested from server

difficult to search crawl

cli

command line interface tool to initialize, develop, scaffold and maintain angular applications directly from command shell

ng generate - make something ng new - make a new angular workspace ng serve - build the application and host it locally ng add - add external library ng build - compile application or libary into an output directory

ng serve vs ng build

both compile and bundle application serve does not write build files to any folder and cannot deploy in another server build generates output folder that can be used to deploy in any external server

JIT (just in time) compilation

done during the run time of application browser dowloads the compiler along with application files

AOT (ahead of time) compilation

compilation is done during the build process and compiled files are bundled and downloaded by the browser default compilation

angular json

provides workspace-wide and project-specific configuration defaults version of angular, customized cli commands, ng generate schematics

deploy to remote server

start production build with ng build copy output folder to folder on server configure server to redirect requests for missing files to index.html

httpclient

perform http requests, available as injectable class with methods to perform http requests

request() - construct an observable generic request, specify type in params addBody() - provide data in body of request post(), get(), put()/patch(), delete(),

routing

import AppRoutingModule to AppModule and add it to imports array import components to AppRoutingModule

add route to component in routes of RouteModule {path: 'path', component: Component}

add routes to application with routerLink attribute <a routerLink="/route"

RxJS

libary for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code

forms

for handling user input

reactive forms vs template driven forms

reactive forms are explicit, created in the component class template driven are implicit, created by directives

reactive data models are structured and immutable template driven are unstructured and mutable

reactive data flow is synchronous template driven is asynchronous

reactive form validation is done by functions template driven validation is done by directives

pipes

used to transform strings, currency amounts, dates and other data for display

custom pipe class with @pipe, can be used to filter objects

value | pipe

"date" - formats a date value "uppercase" "lowercase" "currency" transforms number to currency string "decimal" transforms number into string with decimal point "percent" transforms a number to percentage string

jasmine

JavaScript testing framework that supports behavior-driven development, describes tests in a human readable format

describe(string, function) defines test suite, collection of test specs

it(string, function) defines an individual test spec

expect(actual) an expectation, in conjunction with matcher to describe an expected piece of behavior in the app

matcher(expected) does a Boolean comparison with expected and fails if not same

karma

tool that spawns browsers and run jasmine tests inside of them, displaying their results

testbed

configures and initializes environment for unit testing and provides methods for creating components and services in unit tests

mocking

make fake services returning random data

cloud computing

the delivery of computing services, including servers, storage, databases, networking, software, analytics, and intelligence over the internet (cloud) to offer faster innovation, flexible resources, and economies of scale

Cloud Computing - Model Types

public cloud - accessible to many businesses private cloud - owned by a single business

Cloud Computing - Service Types

IaaS Infrastructure as a service access to basic virtual servers, cloud data storage, and networking Amazon Web Services, Microsoft Azure

PaaS platform as a service framework to build, collaborate, test and deploy software applications within an organization Windows Azure

SaaS Software as a service software application that the organization has access to Office 365, Dropbox

DevOps

the combination of cultural philosophies, practices, and tools that increases an organization’s ability to deliver applications and services at high velocity: evolving and improving products at a faster pace than organizations using traditional software development and infrastructure management processes.

delivery pipeline build test release

feedback loop monitor plan

continuous integration

developers regularly merge their code changes into a central repository, after which automated builds and tests are run.

continuous delivery

code changes are automatically prepared for a release to production must be manually approved

continuous deployment

continuous delivery no manual approval

pipeline

continuous integration and delivery platform that allows you to automate your build, test and deployment pipeline

workflow

configurable automated process that will run one or more jobs

events

specific activity in a repo that triggers a workflow run

jobs

set of steps in a workflow taht execute on teh same runner

actions

custom applications that perform a complex but frequently repeated

runner

server than runs your workflows when they're triggered