No content

Today's Schedule 1. Angular CLI 2. Component / Directive Lifecycle 3. Build-in Directives *(template) Overview 4. Custom Directives 5. Interacting with DOM

Angular CLI Helps us automate our workflow developing Angular apps
 
 https://github.com/angular/angular-cli

CLI Workflow • Scaffolding • Generating • Serving • Testing • Distributing

Demo

ng serve • Compile SCSS/LESS • Transpile TypeScript • Bundle JS, CSS with Webpack • Asset optimization • Virtual filesystem for serving the assets • Live-reload • Code splitting (for Lazy Loading)

build environments When production is used the bundle gets minified

ng build --prod --base-href /

ng github-pages:deploy • Build • Create git branch with the appropriate layout • Commit • Push

CLI Future • Creating Universal App (Server side pre-rendering) • Refactoring • Upgrading Angular Versions • Customize Deployment Targets (like github pages) • Webpack Configuration Access • Library developer mode

Component / Directive Lifecycle

Lifecycle A Directive / Component has a lifecycle managed by Angular. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.

Lifecycle Hooks https://github.com/angular/angular/blob/ 1d0ed6f75f243efa72c8aa1484028431f7b46e52/ modules/%40angular/core/src/metadata/ lifecycle_hooks.ts#L60 Available Directives & Components All are available to Components

Directives

Directives • Allows us to attach behavior to DOM elements. • Directives are defined using @Directive decorator.

The mysterious asterisk The * is syntactic sugar that makes it easier to read and write directives that modify HTML layout with the help of templates.

Angular renderer & ngIf • The renderer moves *ngIf to a tag where it becomes a property binding - [ngIf]. • The rest of the element that we used the ngIf on, including its attributes, gets moved inside the tag.

Example

Example
 (custom if directive) Represents a container where one or more Views can be attached.

https://github.com/angular/angular/blob/ e85232afd28765745d9c4cd0cde66ad9d674c676/modules/%40angular/ common/src/directives/ng_if.ts Angular ngIf

ngFor

Views and View Containers • A View is a fundamental building block of the application UI. It is the smallest grouping of Elements which are created and destroyed together. • Properties of elements in a View can change, but the structure (number and order) of elements in a View cannot. • Changing the structure of Elements can only be done by inserting, moving or removing nested Views via a ViewContainerRef. • Each View can contain many View Containers.

View ContainerRef

View ContainerRef https://github.com/angular/angular/blob/7b7ae5fe56dd05a28821b5324e7d7863247bacee/modules/ %40angular/core/src/linker/view_container_ref.ts#L73

ContentChild Example https://github.com/angular/angular/blob/ 14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/ examples/core/di/ts/contentChildren/content_children_example.ts

ContentChild Another way of getting a reference to an element in-between the opening and closing tags (content DOM) of a Directive / Component Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value. Content queries are set before the `ngAfterContentInit` callback is called. https://github.com/angular/angular/blob/d169c2434e3b5cd5991e38ffd8904e0919f11788/modules/ %40angular/core/src/metadata/di.ts#L148

Manipulating DOM

Color Directive !!! !!!

Why not to access the DOM directly? Web workers cant access DOM directly. Server-side rendering Native apps So if we don't plan using this awesomeness that Angular 2 provides for us its OK to do it the other way.

Renderer https://github.com/angular/angular/blob/2.4.7/modules/%40angular/ core/src/render/api.ts#L41-L92 Injectable service that provides a low-level interface for modifying the UI. Every renderer implements (should) this interface

Color Directive With Renderer

Questions?