Angular 15/16 Free Course #1 - Create Base Project Structure

Built and tested with Angular 15 and Angular 16

In this free step by step Angular course we'll be covering how to implement routing, authentication, registration and CRUD functionality in Angular.

Other parts available in this Angular course:

• Part 1 - Create Base Project Structure
• Part 2 - Add Routing & Multiple Pages
• Part 3 - Login Form, Authentication & Route Guard
• Part 4 - Registration Form & Service Methods
• Part 5 - Alerts & Home Page
• Part 6 - User Management (CRUD) Section
• Part 7 - Migrate to Standalone Components and Functional Interceptors
• Part 8 - Dockerize App with Nginx

Angular Tutorial Part 1

In part 1 of this Angular tutorial series we're going to setup the base project structure of our Angular application using the Angular CLI.

Code on GitHub

The complete source code for this part of the tutorial is available on GitHub at https://github.com/cornflourblue/angular-16-tutorial in the part-1 folder.

Tutorial Steps

1. Install prerequisites
2. Create new Angular project
3. Empty the App folder
4. Create Angular App Component template
5. Create Angular App Component
6. Create Angular App Module
7. Update Main Index Html File
8. Start Angular Application!

Install prerequisites

Node.js and npm

Node.js and npm are the runtime and command line tools required to build and run Angular applications.

Node.js is a javascript runtime environment that enables you to run js code outside of a browser, and npm is a package manager used to download javascript packages built to run on Node. They come bundled together when you install Node.js.

Angular is built on top of Node.js, the Angular framework itself and the Angular CLI are both packages available on npm.

Download Node.js and npm from https://nodejs.org.

Angular CLI

The Angular CLI is the de facto command line tool used to develop, build and test Angular applications. For more info see https://angular.io/cli.

Install or update the Angular CLI globally by running the following command:

npm i -g @angular/cli

Visual Studio Code (VS Code)

VS Code is a free code editor that runs on Windows, Mac and Linux.

Download VS Code from https://code.visualstudio.com/.

Create new Angular project with Angular CLI

Create a new project with the below Angular CLI command, you can name the project anything you like, I called mine angular-tutorial.

Enter No for Angular routing as we'll be adding this ourselves in part 2 of the course.

PS C:\Projects> ng new angular-tutorial
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE angular-tutorial/angular.json (2765 bytes)
CREATE angular-tutorial/package.json (1050 bytes)
CREATE angular-tutorial/README.md (1071 bytes)
CREATE angular-tutorial/tsconfig.json (901 bytes)
CREATE angular-tutorial/.editorconfig (274 bytes)
CREATE angular-tutorial/.gitignore (548 bytes)
CREATE angular-tutorial/tsconfig.app.json (263 bytes)
CREATE angular-tutorial/tsconfig.spec.json (273 bytes)
CREATE angular-tutorial/.vscode/extensions.json (130 bytes)
CREATE angular-tutorial/.vscode/launch.json (470 bytes)
CREATE angular-tutorial/.vscode/tasks.json (938 bytes)
CREATE angular-tutorial/src/favicon.ico (948 bytes)
CREATE angular-tutorial/src/index.html (303 bytes)
CREATE angular-tutorial/src/main.ts (214 bytes)
CREATE angular-tutorial/src/styles.css (80 bytes)
CREATE angular-tutorial/src/assets/.gitkeep (0 bytes)
CREATE angular-tutorial/src/app/app.module.ts (314 bytes)
CREATE angular-tutorial/src/app/app.component.html (23083 bytes)
CREATE angular-tutorial/src/app/app.component.spec.ts (995 bytes)
CREATE angular-tutorial/src/app/app.component.ts (223 bytes)
CREATE angular-tutorial/src/app/app.component.css (0 bytes)
✔ Packages installed successfully.

Empty the App folder

Open the new project folder in VS Code and delete the auto generated files from the /src/app folder.

We'll be creating our own components and app module in the following steps.

Create Angular App Component template

Create a file named app.component.html in the /src/app folder and copy the below HTML code into it.

The App Component template contains the HTML for the App Component that you will create in the next step. For now it will just contain a simple hello message that will display when we test our Angular app. For more info on Angular templates see https://angular.io/guide/architecture-components#templates-and-views

It should look like this:

<h1>Hello Angular!</h1>

Create Angular App Component

Create a file named app.component.ts in the /src/app folder and copy the below TypeScript code into it.

An Angular component is a class that contains the logic to control a piece of the UI. A class becomes an Angular component when it is decorated with the @Component decorator. For more info on Angular components see https://angular.io/guide/architecture-components

The App Component contains the logic required to interact with and support the App Component template, at the moment the App Component template doesn't require any logic so the class is empty.

The @Component decorator contains two parameters, the selector: 'app-root' parameter tells Angular to inject an instance of this component wherever it finds the <app-root></app-root> HTML tag. The templateUrl: 'app.component.html' parameter tells Angular where to find the HTML template for this component.

It should look like this:

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

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent { }

Create Angular App Module

Create a file named app.module.ts in the /src/app folder and copy the below TypeScript code into it.

An Angular module is a class used to group together related Angular components, services, directives etc. A class becomes an Angular module when it is decorated with the @NgModule decorator. For more info on Angular Modules see https://angular.io/guide/architecture-modules.

It should look like this:

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

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Below are details of each of the @NgModule parameters used:

• The imports: [BrowserModule] parameter tells Angular to import the BrowserModule into this module, which makes the components, directives and pipes in BrowserModule available to all components in the AppModule. The BrowserModule includes core functionality for running Angular applications in different supported browsers.
• The declarations: [AppComponent] parameter declares that the AppComponent belongs to this module and makes it available to all other components and templates within this module.
• The bootstrap: [AppComponent] parameter tells Angular to bootstrap the AppComponent when the AppModule is bootstrapped. For more info on Angular bootstrapping see https://angular.io/guide/bootstrapping.

Update Main Index Html File

In VS Code open the file index.html in the /src folder and replace its contents with the below HTML.

The main index.html file is the initial page loaded by the browser that kicks everything off. The Angular CLI (with Webpack under the hood) bundles all of the javascript files together and injects them into the body of the index.html page so the scripts are loaded and executed by the browser.

Angular injects the AppComponent into the <app-root></app-root> tag because it matches the selector defined in the component metadata.

The bootstrap CSS stylesheet is included in the head to enable bootstrap styles in the tutorial application. For more info on Bootstrap styling see https://getbootstrap.com/docs/5.2/getting-started/introduction/.

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title>Angular Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <app-root></app-root>
</body>
</html>

Start Angular Application!

Run the command npm start from the project root folder (where the package.json is located) to launch the Angular application, then open a browser tab to the URL http://localhost:4200.

The command output should look something like this:

PS C:\Projects\angular-tutorial> npm start

> [email protected] start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.71 MB |
polyfills.js          | polyfills     | 314.29 kB |
styles.css, styles.js | styles        | 209.42 kB |
runtime.js            | runtime       |   6.54 kB |
main.js               | main          |   3.87 kB |

                      | Initial Total |   2.23 MB

Build at: 2023-04-28T02:58:02.970Z - Hash: 64aa2bde5f20d544 - Time: 20871ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.