Dotric Pty Ltd - Software

Basic Angular Website

Doug Richards, Dotric Pty Ltd, October 2024.

Introduction Starting A New Project Primary Navigation Home Page Secondary Navigation Deployment

Introduction

For some years now I have been involved in the development of Angular coded websites. While Angular development seems to require a large number of source files, the underlying structure has a consistency that is readily understood. However, the Angular projects I have been working on in the corporate world typically include an ASP backend which connects to a database. These days Microsoft Visual Studio offers a ready made Angular ASP template that gets a new project off to a good start.

However, what about a very basic website with no remote server connection that simply describes a product range with contact details? How is this achieved with Angular and a simple text editor as the development tool? In the process of performing this exercise I learnt a few things about Angular. What follows is a description of this journey. I assume that the reader is familar with html and css files but perhaps not so familar with Angular.

Starting A New Project

If you haven't created an Angular project before then, of course, you need to install Angular. To do this you start by installing Node.js. Once Node.js is installed, open up a Command Prompt window as administrator and enter the following command:

C:\Windows\System32>npm install -g @angular/cli

With Angular installed create a folder at a convenient location, return to the Command Prompt window, change to the newly created folder and type the following command:

C:\Websites>ng new my-website

There are several prompts during the creation process. I prefer no to the yes/no questions and I would use CSS files for styling.

Now it is a case of changing to the newly created website folder and running the newly created website by typing the following command:

C:\Websites\my-website>ng serve --open

If you explore your website folder you will see:

A node_modules folder which contains large numbers of library files.
A public folder which is a good place to put resources such as image files. You will note that it already contains the favicon.ico icon file which is displayed next to the browser tab page label. You may care to replace this with an icon that is more to your liking!
A src folder that contains your source files.
A number of json configuration files that become relevant when things go wrong.

Exploring the src folder we see a styles.css file which is a good place to define style elements that will be used globally throughout the website. Also in the src folder is a index.html file which is of course the default starting point for the website. Opening up the index.html file, towards the end of the file is the following line:

<app-root></app-root>

Tags of this sort are fundamental to the structure of Angular websites. So if we go into the app folder within the src folder and open up the app.component.ts file you will see the following lines:

@Component({

selector: 'app-root',

standalone: true,

imports: [RouterOutlet],

templateUrl: './app.component.html',

styleUrl: './app.component.css'

})

So here is the component that is inserted into the index.html page. Indeed, if you refer to the app.component.html file specified here you will see the contents of the website page that has just been created. The obvious next step then is to blow away the contents of app.component.html and replace it with your own creative masterpiece!

I have modified app.component.html and app.component.css to produce the following:

I also specified a background colour in styles.css

Primary Navigation

For this website I will provide tab pages with side bar menus on each tab page. There will also be a home page that summaries the website contents. To start off we will add the material library. This library provides a number of very handy UI elements. To add the material library, in the Command Prompt window in the root folder for the project, type the following command:

C:\Websites\my-website>ng add @angular/material

I chose the default theme, no to typography styles and yes to animations.

While we are at the command prompt, the home page and the tab pages can be added with the following commands:

C:\Websites\my-website>ng g c home

C:\Websites\my-website>ng g c tab-page-1

C:\Websites\my-website>ng g c tab-page-2

Now if you look in the src/app folder you will see that folders have been created for each new component. In each of these folders are a html file, a css file and two ts files. If you open the home.compoent.ts file, the tab-page-1.component.ts file and the tab-page-2.component.ts file, you will see that these components have been given the names HomeComponent, TabPage1Component and TabPage2Component respectively.

To connect up the new components, open up app.routes.ts in src/app and add the following import commands to the existing list:

import { HomeComponent } from './home/home.component';

import { TabPage1Component} from './tab-page-1/tab-page-1.component';

import { TabPage2Component } from './tab-page-2/tab-page-2.component';

Then modify the existing routes declaration as follows:

export const routes: Routes = [

{path: '', redirectTo: '/home', pathMatch: 'full'},

{path: 'home', component: HomeComponent },

{path: 'tabPage1', component: TabPage1Component },

{path: 'tabPage2', component: TabPage2Component }

];

Now we can proceed to app.component.ts to set up the tab pages. In app.component.ts start by adding to the import declarations from @angular/router as follows:

import { Router, RouterModule, RouterOutlet } from '@angular/router';

Also add import declarations for the material and angular components:

import { MatToolbarModule} from '@angular/material/toolbar';

import { MatTabsModule } from '@angular/material/tabs';

import { CommonModule} from '@angular/common';

And correspondingly update the imports here:

imports: [RouterModule, RouterOutlet,MatToolbarModule,MatTabsModule,CommonModule],

Then add a constructor to the AppComponent class as follows:

navLinks: any[];

constructor(private router: Router) {

this.navLinks = [

{

label: 'Home',

link: 'home',

index:0

}, {

label: 'Tab Page 1',

link: 'tabPage1',

index:1

}, {

label: 'Tab Page 2',

link: 'tabPage2',

index:2

}

];

}

The following is added to the body of the page described by the app.component.html file:

<a mat-tab-link

*ngFor="let link of navLinks"

[routerLink]="link.link"

routerLinkActive #rla="routerLinkActive"

[active]="rla.isActive">

</a>

</nav>

<mat-tab-nav-panel #tabPanel style="position:absolute;top:200px">

<router-outlet></router-outlet>

</mat-tab-nav-panel>

Basically, there is a for loop within the nav element that steps through the navLinks defined in the AppComponent class defined in the app.component.ts file. The <router-outlet> tab provides the placement point for the selected tab page. Note the tabPanel variable used to link the navigation bar to the output panel. You can of course check your progress by running:

C:\Websites\my-website>ng serve --open

Home Page

I have modified home.component.html and home.component.css in the src/app/home folder to produce the following:

In terms of navigation, the important point here are the click events added to the boxes as follows:

In the home.component.ts file the router is imported:

import { Router } from '@angular/router';

A router instance is defined in the constructor:

constructor(private router: Router) {}

The two click events are described:

public onTabPage1() {

this.router.navigate(['tabPage1']);

}

public onTabPage2() {

this.router.navigate(['tabPage2']);

}

Secondary Navigation

To add side bar menu items to tab-page-1, start by creating the new items. To do this open the Command Prompt window, change to the root folder for the project and type the following commands:

C:\Websites\my-website>ng g c tab-page-1/item-11

C:\Websites\my-website>ng g c tab-page-1/item-12

C:\Websites\my-website>ng g c tab-page-1/item-13

To connect up the new components, open up app.routes.ts in src/app and add the following import commands to the existing list:

import { Item11Component } from './tab-page-1/item-11/item-11.component';

import { Item12Component } from './tab-page-1/item-12/item-12.component';

import { Item13Component } from './tab-page-1/item-13/item-13.component';

Then modify the existing routes declaration as follows:

export const routes: Routes = [

{path: '', redirectTo: '/home', pathMatch: 'full'},

{path: 'home', component: HomeComponent },

{path: 'tabPage1', component: TabPage1Component,

children:

[

{path: 'Item1', component: Item11Component, outlet: 'tabPage1'},

{path: 'Item2', component: Item12Component, outlet: 'tabPage1'},

{path: 'Item3', component: Item13Component, outlet: 'tabPage1'}

]},

{path: 'tabPage2', component: TabPage2Component }

];

The new menu items have been added as children of tabPage1. Note that an outlet has been specified for these children since these components are not going to be displayed at the default <router-outlet> tag.

Now proceed to tab-page-1.component.ts to set up the menu items for tabPage1. Start by adding the following import declarations:

import { MatSidenavModule } from '@angular/material/sidenav';

import { MatButtonModule } from '@angular/material/button';

import { Router, RouterOutlet, RouterModule } from '@angular/router';

import { CommonModule} from '@angular/common';

Correspondingly update the imports here:

imports: [MatSidenavModule,MatButtonModule, RouterOutlet, RouterModule, CommonModule],

Next add a constructor to the TabPage1Component class as follows:

navLinks: any[];

constructor(private router: Router) {

this.navLinks = [

{

label: 'Item 1',

link: ['/tabPage1', {outlets: {tabPage1:'Item1'}}],

index:0

}, {

label: 'Item 2',

link: ['/tabPage1', {outlets: {tabPage1:'Item2'}}],

index:1

}, {

label: 'Item 3',

link: ['/tabPage1', {outlets: {tabPage1:'Item3'}}],

index:2

}

];

this.router.navigate(['/tabPage1', {outlets: {tabPage1:'Item1'}}]);

}

In addition to defining the array of menu items I have added a navigate command in the constructor to provide a default selection. The following is added to the body of the page described by the tab-page-1.component.html file:

<mat-sidenav-container style="margin-left:20px;margin-top:10px;background-color:transparent">

<mat-sidenav-content style="height:200px; width:150px">

<button mat-tab-link

*ngFor="let link of navLinks"

style="width:100%;height:40px;margin-top:5px"

mat-button mat-raised-button

[routerLink]="link.link"

routerLinkActive #rla="routerLinkActive"

[disabled]= "rla.isActive">

</button>

</mat-sidenav-content>

</mat-sidenav-container>

<router-outlet name="tabPage1"></router-outlet>

Here a for loop steps through the navLinks array defined in the TabPage1Component class to create a side bar of buttons. The currently selected button is set disabled to indicate that it is in fact the current selection. Note that the router-outlet tag has been supplied with an outlet name.

Finally I have added a Document style element to styles.css to be used in every menu item within a tab page to provide menu items with a consistent location and appearance.

Deployment

To perform a release build, open the Command Prompt window, change to the root folder for the project and type the following command:

C:\Websites\my-website>ng build

You will note a new dist folder has been created off the project root folder. When you explore this folder you eventually get the the built code in dist/my-website/browser. Angular code cannot be run by openning any particular file. Angular applications must be run inside a web server such as Microsoft Internet Service. If you do not have IIS installed on your Windows 11 PC it is a simple case of going to Control Panel > Programs > Programs and Features, selecting Turn Windows features on or off from the side panel and turning on Internet Information Services.

Once Internet Informstion Services (IIS) is installed, create a new suitably named folder for your website within the C:\inetpub\wwwroot folder. Now copy the contents of the afore mentioned dist/my-website/browser folder into the newly created folder under inetpub\wwwroot.

At this stage open index.html and replace the following line:

with this:

Run IIS Manager as administrator. Opening up the Connections tree, in the left hand panel you will find your newly created website folder under Sites > Default Web Site. Right mouse click on your website folder, select Convert to Application and simply press OK in the dialog that opens.

Now fire up your favorite web browser and enter the following URL:

http://localhost/MyWebsite

Basic Angular Website

Contents

Introduction

Starting A New Project

Primary Navigation

Home Page

Secondary Navigation

Deployment