Angular pt 1 – Vacation Dreams

Description

Angular is a framework for writing frontends, especially websites. Full tutorial can be seen on [1]

Setup

Install NodeJS: https://nodejs.org
Install an IDE: https://code.visualstudio.com/

Initialize

In case you did setup git yet (see post jan-ni.de/archive/16) go to your project directory and open terminal.

Let [app-name] be a placeholder for frontend
Install command line tool via: npm install -g @angular/cli
Create app: ng new [app-name]
(common choices are yes for routing and scss for stylesheet format)
Change to directory: cd [app-name]
Build website: ng serve
Follow the Link to http://localhost:4200
Stop serving website, by holding CTRL+C

Git commit

Add files explicitely via git add . -A
Observe git status
Recognice, that not all files are added, this is due to exclusion coming from the .gitignore file (don’t commit generated files)
Commit: git commit -a -m „init Angular“ (-a is for automatic add)

VS Code

Open Directory via File -> Open Directory
Have a look at the generated README.md file
Observe the Directory „src/app“
Angular is based on „components“. Here we got the code in *.ts files for TypeScript [3], *.html for the „document structure“, *.scss for the stylesheet [4] and *.spec.ts for testing
Install Angular Extension Pack [2]
Go to the Play-Button, click „create a launch.json“ -> Chrome, and change the „url“ to „http://localhost:4040“
To access core features of VS-Code, you have to use the „command palette“. The Shortcut ist CTRL+SHIFT+P

Add UI Framework of choice

We’ll use Twitter Bootstrap here, because it brings a flexible layout.
Installation: ng add @ng-bootstrap/ng-bootstrap
Create a component: ng generate component main-page
From https://ng-bootstrap.github.io/#/components/table/examples#sortable we „borrow“ some sample code -> Search and pagination.

main-page.component.html

<table class="table table-striped">
  <thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">Country</th>
    <th scope="col">Area</th>
    <th scope="col">Population</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let country of countries">
    <th scope="row">{{ country.id }}</th>
    <td>
      <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="mr-2" style="width: 20px">
      {{ country.name }}
    </td>
    <td>{{ country.area | number}}</td>
    <td>{{ country.population | number }}</td>
  </tr>
  </tbody>
</table>

<div class="d-flex justify-content-between p-2">
  <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize">
  </ngb-pagination>

  <select class="custom-select" style="width: auto" [(ngModel)]="pageSize">
    <option [ngValue]="2">2 items per page</option>
    <option [ngValue]="4">4 items per page</option>
    <option [ngValue]="6">6 items per page</option>
  </select>
</div>

main-page.component.ts (our custom component has a different name now)

// code above stays unchanged !

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.scss']
})
export class MainPageComponent {

  page = 1;
  pageSize = 4;
  collectionSize = COUNTRIES.length;

  get countries(): Country[] {
    return COUNTRIES
      .map((country, i) => ({id: i + 1, ...country}))
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MainPageComponent } from './main-page/main-page.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    MainPageComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [MainPageComponent]
})
export class AppModule { }

Watch with ng-serve, observe that if you change the code, the page reloads and then commit changes 🙂

Observations

Twitter Bootstrap takes style information from „class“ directives f.e.
<table class=“table table-striped“>
Angular uses for-Loops over data f.e.
<tr *ngFor=“let country of countries“>
Angular reads values from the typescript model and process them f..e
<td>{{ country.area | number}}</td>
Angular writes the selected page size to the model:
[(ngModel)]=“pageSize“
So there is a lot to learn to combine all these techniques. But first of all, we’d need some data to process.

References

[1] https://angular.io
[2] https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack
[3] https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
[4] https://sass-lang.com/guide