Angular Fundamentals

npm Modules
File Structure
Architecture
NgModules
Components
Templates
Component Lifecycle Hooks
Two-way Data Binding
Services
Asynchronous and Server-side Communication

Angular npm Modules

Framework code is distributed as npm modules:
- @angular/animations: Advanced animations functionality
- @angular/common: Common utilities (pipes, structural directives etc.)
- @angular/compiler: Ahead-of-Time compiler
- @angular/core: Core functionality (always needed)
- @angular/forms: Form handling
- @angular/language-service: Language service for Angular templates for better IDE support
- @angular/platform-*: Platform-specific modules (platforms: browser, server, webworker)
- @angular/router: Routing functionality
- @angular/service-worker: Service worker functionality
- @angular/upgrade: NgUpgrade to upgrade from AngularJS -> Angular
- @angular/http: Deprecated HTTP client

Coding Style

Angular style guide declares set of rules
Codelyzer (TSLint plugin) checks for
File naming name.type.filetype:
- app.module.ts
- todos.component.ts
- todos.component.html
- todos.component.scss
- user.service.ts
- json.pipe.ts

Architecture

App needs to have at least one module
Module has one root component
Component can have child components

NgModules

Each application has single root NgModule
NgModule is a class with @NgModule annotation
Declares collection of related elements (components, services etc.)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

NgModules - Details

declarations contains list of application build blocks, such as components, pipes and directives, with certain selector
imports allows importing of other NgModules
- For example BrowserModule imports browser-specific renderers and core directives such as ngFor and ngIf
exports allows declaring what is exported from this module (covered later)
providers contains list of services for dependency injection
bootstrap contains root element(s) for the application (usually named AppComponent)

Booting the application

We need to tell Angular to start our application
This is done by providing root module bootstrapModule
This will go through the bootstrap array and checks for those selectors in HTML

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

index.html

<html>
    <body>
        <app-root></app-root>
    </body>
</html>

Modules in Large Applications

Modules are meant to offer possibility to divide the functionality in logical modules
For example one could have CustomerModule, AdminModule and BillingModule
To access exports of another module, it needs to be imported to the module:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
*import { HttpClientModule } from '@angular/common';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, `HttpClientModule`],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Exporting

Exporting allows declaring the public API provided by the module
Consider company-specific UI module where ListComponent utilizes ListRowComponent:

ui.module.ts

import { NgModule } from '@angular/core';
import { ListComponent } from './list.component';
import { ListRowComponent } from './list-row.component';

@NgModule({
  declarations: [ListComponent, ListRowComponent],
  imports: [],
  exports: [ListComponent],
  providers: []
})
export class UiModule { }

Modules as Exports

Directives ngIf and ngFor are defined actually in CommonModule
But that is not imported anywhere?
Actually, BrowserModule is exporting CommonModule as seen in source
-> Modules can be exported as part of module
If ListModule and TableModule were separate modules:

ui.module.ts

import { NgModule } from '@angular/core';
import { ListModule } from './list.module';
import { TableModule } from './table.module';

@NgModule({
  declarations: [],
  imports: [],
  exports: [ListModule, TableModule],
  providers: []
})
export class UiModule { }

Components

Build blocks of application UI
Has a template that it binds data to
Can contain other components
Class with @Component annotation

todos.component.ts

import { Component } from '@angular/core';

@Component({})
class TodosComponent { }

Components

Two parameters are mandatory for @Component annotation:
- template with template (inline template) or templateUrl (separate file)
- selector (should always start with application specific prefix like the default: app)
Components need to be declared in NgModule's declarations to be available in templates

todos.component.ts

import { Component } from '@angular/core';

@Component({
  `templateUrl: 'todos.component.html'`,
  `selector: 'app-todos'`
})
class TodosComponent { }

app.module.ts

@NgModule({
  declarations: [AppComponent, `TodosComponent`]
  ...
})
export class AppModule { }

Generating a Component

Browse to root of the project and run:

ng generate component todos

or abbreviated one:

ng g c todos

This will:

Create a folder called todos with the component, template, styles and test file
Add the component to declarations of your AppModule

Templates

Plain HTML with few Angular specific additions*

todos.component.html

<h1>My todo application</h1>

Selectors can be used to add other components

app.component.html

<h2>Todos</h2>
<app-todos></app-todos>

Angular Template Syntax

Data binding with property name inside double curly braces ({{}})

{{property}}

Structural directives with asterisk ( * ) followed by directive name

<div *ngIf="showItem">Item</div>

Attribute binding with attribute name inside square brackets ([])

<input [disabled]="property" />

Event binding with event name inside parenthesis

<div (click)="clickHandler()"></div>

Template local variables with hash (#) followed by name

<input #nameInput />

Data Binding

Bind property from the component to the template

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html'
})
class AppComponent {
  `title: string = 'app works!';`
}

app.component.html

<h1>`{{title}}`</h1>

Structural Directives

Modify the structure of the template
Two most used are *ngIf and *ngFor

todos.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-todos',
  templateUrl: 'todos.component.html'
})
class TodosComponent {
  `todos: any[] = [{name: 'Do the laundry'}, {name: 'Clean my room'}];`
}

todos.component.html

<div `*ngFor="let todo of todos"`>
  {{todo.name}}
</div>

Attribute Binding

Bind value from component into HTML attribute

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html'
})
class AppComponent {
  `isDisabled: boolean = true;`
}

app.component.html

<input [disabled]="isDisabled" />

Special Attribute Bindings

Classes and styles have special syntax available:

<div [class.active]="isActive"></div>
<div [style.display]="isShown ? 'block' : 'none'"></div>

Attribute Binding for Components

Attribute binding only works for native properties of HTML elements by default
Same concept can also be used to pass data from parent component to child component

parent.component.html

  <app-child `[foo]="todo"`></app-child>

child.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child'
})
class ChildComponent {
* @Input()
* foo: string;
}

Event Binding

Register handler code for events
The actual event can be referenced with $event
The events are basic DOM events (like click, mouseover, change and input)

todos.component.html

<input type="text" `(change)="handleChanged($event.target.value)"`></input>

todos.component.ts

import { Component } from '@angular/core';

@Component({..})
class TodosComponent {
* handleChanged(value: string) {
*   // Do something with value
* }
}

Event Binding for Components

Event binding only works for native events of HTML elements by default
Same concept can also be used to pass data from child component to parent component

parent.component.html

  <app-child `(change)="todo"`></app-child>

child.component.ts

import { Component, Output } from '@angular/core';

@Component({
  selector: 'app-child'
})
class ChildComponent {
* @Output()
* change = new EventEmitter<string>();
}

Two-way Data Binding

Two-way data binding with ngModel inside banana-box syntax: [(ngModel)]
Data flow is still unidirectional, though:
- value from component is updated to input on change
- when user modifies the value, it is updated to component

Name: <input type="text" `[(ngModel)]="name"` />

which is just sugar for

Name: <input type="text" `[ngModel]="name" (ngModelChange)="name = $event"` />

CSS Encapsulation

Component can have styles applied:
- Inline in annotation (field styles in @Component)
- In external files (field styleUrls)
These styles are scoped for component -> No other component can get affected by them

todos.component.html

<div class="todos"></div>

todos.component.css

.todos {
    background-color: red;
}

Does not affect styles here:

_clients.component.html _

<div class="todos"></div>

Components - Inline Styles

todos.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-todos',
  templateUrl: 'todos.component.html',
  `styles: ['.active-todo { background-color: yellow; }']`
})
class TodosComponent {
}

Components - Styles From File

todos.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-todos',
  templateUrl: 'todos.component.html',
  `styleUrls: ['todos.component.css']`
})
class TodosComponent {
}

Component Lifecycle Hooks

For hooking into certain lifecycle events
Interface for each hook
Example hooks: ngOnInit (interface OnInit), ngOnChanges (interface OnChanges) and ngOnDestroy (interface OnDestroy)

import { Component, OnInit } from '@angular/core';

export class MyComponent `implements OnInit` {
  `ngOnInit() { ... }`
}

ngOnInit should be used for initialization of data for testability

Services

Module-wide singletons
Used to store state, communicate with backends etc.
Examples: UserService, BackendService
Declaring:

user.service.ts

import { Injectable } from '@angular/core';

*@Injectable()
export class UserService {
}

Need to be registered for NgModule

app.module.ts

@NgModule(
  ...
* providers: [UserService]
)
export class AppModule() {}

Generating a Service

Browse to root of the project and run:

ng generate service todo

or abbreviated one:

ng g s todo

This will:

Create a file called todos.service.ts in the root of app/ folder along with the test stub
not add it as provider in AppModule so you must do it yourself!

DI with Constructor Parameters

Angular implements concept called Dependency Injection
In DI you can just ask for the dependencies as constructor parameters as follows:

todos.component.ts

import { Component } from '@angular/core';
*import { BackendService } from './backend.service';

@Component({
  selector: 'app-todos',
  templateUrl: 'todos.component.html'
})
class TodosComponent {
* constructor(private backendService: BackendService) {
* }

  initializeData() {
    this.backendService.makeRequest();
  }
}

Angular will then pass the singleton instance of BackendService to the component when creating it.

Asynchronous and Server-side Communication

Asynchronous things are modeled as Observables (covered later) in Angular
- For now, we only need to know that there is subscribe method
For AJAX requests, use HttpClient service found in @angular/common

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({...})
export class MyComponent {
  filteredData: any[];
  constructor(private httpClient: HttpClient) {
  }

  getData() {
*    this.httpClient.get('https://example.com/mydata').subscribe(data => {
      // Do stuff with data
      this.filteredData = data.filter(item => item.id > 100);
    })
  }
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Angular Fundamentals

Angular npm Modules

Coding Style

Architecture

NgModules

NgModules - Details

Booting the application

Modules in Large Applications

Exporting

Modules as Exports

Components

Components

Generating a Component

Templates

Angular Template Syntax

Data Binding

Structural Directives

Attribute Binding

Special Attribute Bindings

Attribute Binding for Components

Event Binding

Event Binding for Components

Two-way Data Binding

CSS Encapsulation

Components - Inline Styles

Components - Styles From File

Component Lifecycle Hooks

Services

Generating a Service

DI with Constructor Parameters

Asynchronous and Server-side Communication

Files

README.md

Latest commit

History

README.md

File metadata and controls

Angular Fundamentals

Angular npm Modules

Coding Style

Architecture

NgModules

NgModules - Details

Booting the application

Modules in Large Applications

Exporting

Modules as Exports

Components

Components

Generating a Component

Templates

Angular Template Syntax

Data Binding

Structural Directives

Attribute Binding

Special Attribute Bindings

Attribute Binding for Components

Event Binding

Event Binding for Components

Two-way Data Binding

CSS Encapsulation

Components - Inline Styles

Components - Styles From File

Component Lifecycle Hooks

Services

Generating a Service

DI with Constructor Parameters

Asynchronous and Server-side Communication