Thu. Mar 28th, 2024

Building a website for today and tomorrow begins with Angular. Yes I am a proponent of Angular over many other client frameworks. Let’s look over the goals of this post to help you get started.

  • Node.js
  • Angular-Cli
  • Angular Workspace
  • Angular Material

Installing Node.js

First step you need to do is to install the latest version of Node.js. This is a simple step click on this link https://nodejs.org/en/ to download the installer for your system. I recommended the LTS over the Current Latest. Run the install and complete installation.

Installing Angular-Cli

Installing and using Angular-Cli for your development will download the latest version of Angular for your project and help in creating components, libraries, and applications. To install Angular-Cli open your command prompt and enter the following command:

npm install -g @angular/cli

Setting up your Angular Workspace

First step is to create your Angular Workspace. Two ways to create your angular workspace. Use the following command to create a workspace with an application name foo:

ng new foo

Now if you want to create an Angular Library, then you need to create your workspace without an application, then create your library, and finally create your test application. Follow these steps, for a library named foo:

ng new foo --create-application=false
cd foo
ng generate library foo-lib --prefix=foo
ng generate application foo-tester

Your foo-lib and foo-tester will be located under a projects directory, located directly under foo.

Installing Angular Material

Angular Material provides excellent components and theming support to build your application on. It keeps pace with Angular to take advantage of new features. To install Angular Material from your foo directory run the command:

npm install --save @angular/material @angular/cdk @angular/animations
npm install --save hammerjs

Configuring Angular Material in your application

In your FooAppModule you need to add support for BrowserAnimationsModule. Add the following import lines to your module:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class FooAppModule { }

Next you need to add in your component modules:

import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule } from '@angular/material';
import { MatAutocompleteModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatRadioModule } from '@angular/material';
import { MatSelectModule, MatSliderModule, MatSlideToggleModule, MatDividerModule, MatExpansionModule } from '@angular/material';
import { MatStepperModule, MatTabsModule, MatTreeModule, MatButtonToggleModule, MatBadgeModule, MatChipsModule } from '@angular/material';
import { MatProgressSpinnerModule, MatProgressBarModule, MatRippleModule, MatBottomSheetModule, MatDialogModule } from '@angular/material';
import { MatSnackBarModule, MatTooltipModule, MatPaginatorModule, MatSortModule, MatTableModule } from '@angular/material';

@NgModule({
  ...
  imports: [BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatMenuModule,
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatDividerModule,
    MatStepperModule,
    MatTabsModule,
    MatTreeModule,
    MatButtonToggleModule,
    MatBadgeModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatRippleModule,
    MatBottomSheetModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule,
  ],
  ...
})
export class FooAppModule{ }

Theme Configuration

Next you need to configure a theme. You can use one of the pre-built one to begin and later change to a custom if you wish. You can add one of the following:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

To do this add the following to your styles.css line:

@import "~@angular/material/prebuilt-themes/purple-green.css"

Adding Gesture Support

You already downloaded and installed hammerjs which provides you with gesture support. This is used by some of the material components. To enable, in your src/main.ts fille add the following:

import 'hammerjs';

Adding Material Icons

You need to add in the Material Design Icons. To do this add the following line to your index.html for your application:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Building your Library

If you did a library in your workspace you need to do the following to build it.

cd food
ng build foo-lib

Using your Library

Now if you wish to use your library, in your application import in your module into:

import { FooLibModule } from 'foo-lib';

@NgModule({
  ...
  imports: [
     FooLibModule,
     ...
  ],
  ...
})
export class FooAppModule{ }

Starting your Application

To start serving your application run the following command:

ng serve --open

This will have your application listening on http://localhost:4200/ and open your browser to this address for you.

By Jeffery Miller

I am known for being able to quickly decipher difficult problems to assist development teams in producing a solution. I have been called upon to be the Team Lead for multiple large-scale projects. I have a keen interest in learning new technologies, always ready for a new challenge.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d