Topics for today

Single Page Application - Angular

  1. SPA webpages. What is it and when it is useful?
  2. Angular and Node.js frameworks
  3. JavaScript - why it is so popular?
  4. Angular CLI, TypeScript, React, Bootstrap - what it is ?
  5. SPA vs desktop applications.

The course of classes

  1. Introduction to the topic of classes, providing teaching materials.
  2. A brief description of technologies related to classes (SPA, JS, Angular, Node.js).
  3. Preparing the environment for constructing the type SPA websites.
  4. Generating your own SPA-type website and getting acquainted with its structure.
  5. Enriching the SPA with basic functionalities (“Task list” type application).
  6. Site validation in web browsers.
  7. Addition of several more (implementationally) demanding functions.

Materials for classes

Tasks to do during classes

Task 1 - Preparation of the environment and generation of the SPA website (1 point)

  1. We will use the npm package manager fornode.js. You can install it with:

    $ sudo apt install npm

    The specificity of the node.js ecosystem is very large fragmentation of packages, which results in the necessity of downloading and saving very many small files on the disk (both in the home directory and in the catalog of the project being created). On our faculty computers, the home directory is on a network drive, which means that such operations are quite slow. For this reason, I recommend the following command:

    $ npm config set cache /tmp/npm-cache
  2. The npx command allows you to temporarily install the package and call the executable file (script) it provides. Thanks to this, we always have the latest version of the executable file. The disadvantage is possibly a relatively long operation (because the package must be downloaded and installed). The newest version of the command is always an advantage.

    Go to the directory where you want to create our SPA website. For the reasons described above, the best would be a directory not on the network drive (eg \tmp), but then we lose the opportunity to get to the created project from home. In the directory of your choice, do the following:

    $ npx -p @angular/cli ng new XYZ

    In the above command, angular/cli is the name of the package, and ng is a program that facilitates working with Angular. You need to answer few basic questions about project being created (actual answers does not matter for the purpose of this class).

  3. Test the operation of the generated application by executing the command:

    $ cd XYZ
    $ npx ng serve

    in the XYZ catalog.

    What is the role of the webpack?

    Start the web browser on the appropriate port (usually it is localhost:4200) and see the generated SPA website.

  4. Enable the inspector mode in the browser. Is the inspection consistent with the source of the site?

Task 2 - A simple Angular and Material Design application (1 point)

  1. In the appropriate file, change the title of the page (which currently corresponds to XYZ) to your personal data: name, surname, index number.

  2. As part of the development of the SPA application, we will add a library compatible with Google Material. Being in the XYZ directory, let’s do the following:

    $ npm install --save @angular/material @angular/cdk

    What does it do? What will be the effect?

  3. To make the newly installed modules visible in our application, add the following imports to the file src/app/app.module.ts:

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import { MatInputModule } from '@angular/material/input';
    import { MatButtonModule } from '@angular/material/button';
    import { MatListModule } from '@angular/material/list';
    import { BrowserModule } from '@angular/platform-browser';

    Do not forget to add these modules to the array named imports. From now on we can use the components and directives available in the included modules.

    Familiarize yourself with the file src/app/app.module.ts.

  4. In the src/styles.css file, add the style definitions:

    @import '@angular/material/prebuilt-themes/deeppurple-amber.css';
    html, body { padding: 0; margin: 0; }

    What will be their effect?

  5. To make our application look better, add the title bar by replacing toolbar definition in the file src/app/app.component.html with:

    <mat-toolbar color="primary" class="mat-elevation-z4">
        <span>{{title}}</span>
    </mat-toolbar>

    How does the application look like now?

  6. It’s time to implement our “List of Tasks”. In the new src/app/task.ts file, enter:

        export interface Task {
            description: string;
    }

    In the file src/app/app.component.ts to the classAppComponent add the appropriate variable that will store our tasks:

    import {Task} from './task';
    tasks: Task[] = [];

    Let’s add the methods responsible for adding and removing tasks:

    handleTaskAdd(description: string) {
        if (description && description.length > 0) {
            this.tasks.push({ description });
        }
    }
    
    handleTaskRemove(taskIdx: number) {
        this.tasks.splice(taskIdx, 1);
    }
  7. In order to be able to put tasks on the list, we must have a mechanism for entering them. Let’s add it by modifying the file app.component.html:

    <div style="padding: 10px;">
        <mat-form-field>
            <input #newTask matInput placeholder="New task">
        </mat-form-field>
        <button mat-button color="accent"
            (click)="handleTaskAdd(newTask.value);newTask.value=''"
            [disabled]="!newTask.value">
            ADD
        </button>
    </div>
  8. We already have the basic functionality, but we miss the module that will handle all this. Therefore, let’s generate it (in the XYZ directory):

    $ npx ng generate component task-list

    Check the contents of the src/task-list folder and thesrc/app/app.module.ts file

    In the task-list.component.ts file, add the following instructions::

    @Input()
    tasks: Task[];
    
    @Output()
    remove = new EventEmitter<number>();
    
    removeTask(taskIdx: number) {
        this.remove.emit(taskIdx);
    }

    What is missing? When repairing the code, use the import mechanism.

  9. Let’s change the look of our site by replacing the contents of the file task-list.component.html with the following content:

    <mat-nav-list>
        <mat-list-item *ngFor="let task of tasks; let taskIdx = index">
            <span mat-line>{{task.description}}</span>
            <button mat-button color="warn" (click)="removeTask(taskIdx)">
                DELETE
            </button>
        </mat-list-item>
    </mat-nav-list>
  10. Add a new component to our application:

    <app-task-list
        [tasks]="tasks"
        (remove)="handleTaskRemove($event)"
    ></app-task-list>

    Does our site work correctly?

  11. Does our website behave the same way in different browsers? Be sure to test min. 3 browsers.

Mandatory tasks (at home)

Task 1 - A complex Angular application (5 points)

  1. Add functionality that allows you to add a task after pressing the ENTER button.

  2. Add functionality, which will cause the user to be asked if he wants to delete the task after pressing the DELETE button.

Extra task

Even more complex Angular application (5pts)

Add a second button with the DONE label to the task list, whose function will be to cross out a given task with a description. Pressing the button again deletes the previous strikeout.