- "A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience similar to a desktop application." - Wikipedia
- Browser fetches executable code that makes asynchronous calls for actual data to be shown
- Data is visualized and/or manipulated and stored back on server asynchronously
- 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_
```typescript
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_
```typescript
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](https://github.com/angular/angular/blob/5.2.9/packages/platform-browser/src/browser.ts#L89)
- -> Modules can be exported as part of module
- If `ListModule` and `TableModule` were separate modules:
_ui.module.ts_
```typescript
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_
```typescript
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_
```typescript
import { Component } from '@angular/core';
@Component({
`templateUrl: 'todos.component.html'`,
`selector: 'app-todos'`
})
class TodosComponent { }
```
_app.module.ts_
```typescript
@NgModule({
declarations: [AppComponent, `TodosComponent`]
...
})
export class AppModule { }
```
---
# Generating a Component
Browse to root of the project and run:
```shell
ng generate component todos
```
or abbreviated one:
```shell
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_
```html
<h1>My todo application</h1>
```
- Selectors can be used to add other components
_app.component.html_
```html
<h2>Todos</h2>
<app-todos></app-todos>
```
---
# Tree Structure
- Including components in templates causes tree-like structure