Creating the Module

The process for creating the feature module follows the same pattern you have seen in earlier chapters. The key difference is that it is important that no other part of the application has dependencies on the module or the classes it contains, which would undermine the dynamic loading of the module and cause the JavaScript module to load the administration code, even if it is not used.

The component defines properties for the username and password that will be used to authenticate the user, an errorMessage property that will be used to display messages when there are problems, and an authenticate method that will perform the authentication process (but that does nothing at the moment).

The template contains an HTML form that uses two-way data binding expressions for the component’s properties. There is a button that will submit the form, a button that navigates back to the root URL, and a div element that is visible only when there is an error message to display.

The RouterModule.forChild method is used to define the routing configuration for the feature module, which is then included in the module’s imports property.

A dynamically loaded module must be self-contained and include all the information that Angular requires, including the routing URLs that are supported and the components they display. If any other part of the application depends on the module, then it will be included in the JavaScript bundle with the rest of the application code, which means that all users will have to download code and resources for features they won’t use.

However, a dynamically loaded module is allowed to declare dependencies on the main part of the application. This module relies on the functionality in the data model module, which has been added to the module’s imports so that components can access the model classes and the repositories.

Configuring the URL Routing System

The new route tells Angular that when the application navigates to the /admin URL, it should load a feature module defined by a class called AdminModule from the admin/admin.module.ts file, whose path is specified relative to the app.module.ts file. When Angular processes the admin module, it will incorporate the routing information it contains into the overall set of routes and complete the navigation.

Navigating to the Administration URL

Use the browser to navigate to http://localhost:4200 and use the browser’s F12 developer tools to see the network requests made by the browser as the application is loaded. The files for the administration module will not be loaded until you click the Admin button, at which point Angular will request the files and display the login page shown in Figure 9-1.

Enter any name and password into the form fields and click the Log In button to see the placeholder content, as shown in Figure 9-2. If you leave either of the form fields empty, a warning message will be displayed.

Understanding the Authentication System

As I noted in Chapter 7, you should not hard-code credentials in real projects, but this is the username and password that you will need for the SportsStore application.

Extending the Data Source

Creating the Authentication Service

The authenticate method receives the user’s credentials and passes them on to the data source authenticate method, returning an Observable that will yield true if the authentication process has succeeded and false otherwise. The authenticated property is a getter-only property that returns true if the data source has obtained an authentication token. The clear method removes the token from the data source.

Enabling Authentication

To test the authentication system, click the Admin button, enter some credentials, and click the Log In button. If the credentials are the ones from Table 9-1, then you will see the placeholder for the administration features. If you enter other credentials, you will see an error message. Figure 9-3 illustrates both outcomes.

Creating the Placeholder Components

Preparing the Common Content and the Feature Module

This template contains a router-outlet element that will be used to display the components from the previous section. There are also buttons that will navigate the application to the /admin/main/products and /admin/main/orders URLs, which will select the products or orders features. These buttons use the routerLinkActive attribute, which is used to add the element to a CSS class when the route specified by the routerLink attribute is active.

Individual routes can be extended using the children property, which is used to define routes that will target a nested router-outlet element, which I describe in Chapter 25. As you will see, components can get details of the active route from Angular so they can adapt their behavior. Routes can include route parameters, such as :mode or :id, that match any URL segment and that can be used to provide information to components that can be used to change their behavior.

When all the changes have been saved, click the Admin button and authenticate as admin with the password secret. You will see the new layout, as shown in Figure 9-4. Clicking the Products and Orders buttons will change the component displayed by the router-outlet element from Listing 9-20. Clicking the Logout button will exit the administration area.

Implementing the Product Feature

The template contains a table that uses the ngFor directive to generate a row for each product returned by the component’s getProducts method. Each row contains a Delete button that invokes the component’s delete method and contains an Edit button that navigates to a URL that targets the editor component. The editor component is also the target of the Create New Product button, although a different URL is used.

Implementing the Product Editor

Components can receive information about the current routing URL and adapt their behavior accordingly. The editor component needs to use this feature to differentiate between requests to create a new component and edit an existing one. Listing 9-25 adds the functionality to the editor component required to create or edit products.

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

import { Router, ActivatedRoute } from "@angular/router";

import { NgForm } from "@angular/forms";

import { Product } from "../model/product.model";

import { ProductRepository } from "../model/product.repository";

@Component({

    templateUrl: "productEditor.component.html"

})

export class ProductEditorComponent {

    editing: boolean = false;

    product: Product = new Product();

    constructor(private repository: ProductRepository,

                private router: Router,

                activeRoute: ActivatedRoute) {

        this.editing = activeRoute.snapshot.params["mode"] == "edit";

        if (this.editing) {

            Object.assign(this.product,

                repository.getProduct(activeRoute.snapshot.params["id"]));

        }

    }

    save(form: NgForm) {

        this.repository.saveProduct(this.product);

        this.router.navigateByUrl("/admin/main/products");

    }

}

Listing 9-25.

Adding Functionality in the productEditor.component.ts File in the src/app/admin Folder

Angular will provide an ActivatedRoute object as a constructor argument when it creates a new instance of the component class, and this object can be used to inspect the activated route. In this case, the component works out whether it should be editing or creating a product and, if editing, retrieves the current details from the repository. There is also a save method, which uses the repository to save changes that the user has made.

To provide the component with a template, I added a file called productEditor.component.html in the src/app/admin folder and added the markup shown in Listing 9-26.

<div class="bg-primary p-2 text-white" [class.bg-warning]="editing"

     [class.text-dark]="editing">

    <h5>{{editing  ? "Edit" : "Create"}} Product</h5>

</div>

<form novalidate #form="ngForm" (ngSubmit)="save(form)">

    <div class="form-group">

        <label>Name</label>

        <input class="form-control" name="name" [(ngModel)]="product.name" />

    </div>

    <div class="form-group">

        <label>Category</label>

        <input class="form-control" name="category" [(ngModel)]="product.category" />

    </div>

    <div class="form-group">

        <label>Description</label>

        <textarea class="form-control" name="description"

                  [(ngModel)]="product.description">

        </textarea>

    </div>

    <div class="form-group">

        <label>Price</label>

        <input class="form-control" name="price" [(ngModel)]="product.price" />

    </div>

    <button type="submit" class="btn btn-primary m-1" [class.btn-warning]="editing">

        {{editing ? "Save" : "Create"}}

    </button>

    <button type="reset" class="btn btn-secondary" routerLink="/admin/main/products">

        Cancel

    </button>

</form>

Listing 9-26.

The Contents of the productEditor.component.html File in the src/app/admin Folder

The template contains a form with fields for the properties defined by the Product model class, with the exception of the id property, which is assigned automatically by the RESTful web service.

The elements in the form adapt their appearance to differentiate between the editing and creating features. To see how the component works, authenticate to access the Admin features and click the Create New Product button that appears under the table of products. Fill out the form, click the Create button, and the new product will be sent to the RESTful web service where it will be assigned an ID property and displayed in the product table, as shown in Figure 9-5.

The editing process works in a similar way. Click one of the Edit buttons to see the current details, edit them using the form fields, and click the Save button to save the changes, as shown in Figure 9-6.

Implementing the Orders Feature

Remember that the data presented by the RESTful web service is reset each time the process is started, which means you will have to use the shopping cart and check out to create orders. Once that’s done, you can inspect and manage them using the Orders section of the administration tool, as shown in Figure 9-7.