Creating An Angular Application Using Angular CLI And Exploring Folder Structure

Introduction

 

In this article, We are going to follow the steps to create your first angular application along with the description about each line of the built-in code and folders which we get after creating the application. Also, we are going to discuss Components and modules in Angular and execution of the application using commands.

 

Overview

• Creating an Angular application using Angular CLI
• Exploring the Angular folder structure
• Overview of components and modules in Angular

Prerequisites

 

To develop an application using Angular, we need to set up a development environment which includes the installation of:

• Node.js (min version required 10.13.0) and npm (min version required 6.11.0)
• Angular CLI
• Visual Studio Code

Install Node.js and Visual Studio Code from their respective official websites.

 

Angular CLI Installation steps

 

Angular CLI can be installed using the node package manager using the command shown below:

 

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

 

Test successful installation of Angular CLI using the following command:

 

ng v

 

After executing the above command, you will see the below output screen:

 

 

Angular CLI is a command-line interface tool to build Angular applications. It makes application development faster and easier to maintain. 

 

Below are commands which we use while creating an Angular application,

 

Command	Use
npm install -g @angular/cli	Installs Angular CLI globally
ng new <project name>	Creates a new Angular application
ng serve --open	Builds and runs the application on lite-server and launches a browser
ng generate <name>	Creates class, component, directive, interface, module, pipe and service
ng build	Builds the application

 

Demostpes

 

Step 1

 

Create an application with name 'MyApplication' using the following CLI command:

ng new MyApplication

The above command will ask the two questions below:

 

 

Typing 'y' will create a routing module file (app-routing.module.ts), which is explained later.

 

The next question is to select the stylesheet to use in the application. Select CSS and press Enter, as shown below:

 

 

This will create the following folder structure inside the node_modules folder.

 

File/Folder	Purpose
e2e/	contains all end to end (e2e) tests of the application written in jasmine and run by protractor
node_modules/	puts all npm modules installed as listed in package.json
src/	All application related file will be store inside it.
angular.json	Configuration file for Angular CLI where we set several defaults and also configure what files to be included during project build
package.json	node configuration file which contains all dependencies required for Angular
tsconfig.json	Typescript configuration file where we can configure compiler options
tslint.json	contains linting rules preferred by Angular style guide

 

Components in Angular

 

A component is the basic building block of an Angular application. It emphasizes the separation of concerns and each part of Angular application can be written independently of one another and it is reusable.

• Open Visual Studio Code IDE. Go to the File menu and select the "Open Folder" option. Select the MyApplication folder we have created earlier. 
• Go to src - App folder and observe the files which are created,
  
  
• app.component.ts
• app.component.html
• app.component.css 

Now open app.component.ts and observe the below code:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyApplication';
}

@Component: Adds component decorator to the class which makes the class a component.

 

selector: Specifies the tag name to be used in the HTML page to load the component.

 

templateUrl: Specifies the template or HTML file to be rendered when the component is loaded in an HTML page. The template represents the view to be displayed. 

 

styleUrls: Specifies the stylesheet file which contains CSS styles to be applied to the template.

 

exportclass AppComponent: Every component is a class(AppComponent) and export is used to make it accessible in other components.

 

title = 'MyApplication': Creates a property with the name title and initializes it to value 'MyApplication'.

 

Now open app.component.html and observe the below code:

<span>{{ title }} app is running!</span>

Accessing the class property by placing property called title inside {{ }}. This is called interpolation which is one of the data binding mechanisms to access class properties inside the template. 

 

As we have seen how to create a component, now let us explore modules.

• A module in Angular is a class with @NgModule decorator added to it. @NgModule metadata will contain the declarations of components, pipes, directives, services that are to be used across the application.
• We can have submodules also which should be configured in the root module.

Root Module: Open App.module.ts and observe code:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Line 1: imports BrowserModule class 

 

Line 2: imports NgModule class 

 

Line 5: imports AppComponent class from app.component.ts file. No need to mention .ts extension as Angular by default considers the file as a .ts file

 

Line 8: declarations property should contain all user-defined components, directives, pipes classes to be used across the application. We have added our AppComponent class here

 

Line 11: imports property should contain all module classes to be used across the application

 

Line 15: providers' property should contain all service classes. We will discuss services later in this course

 

Line 16: bootstrap declaration should contain the root component to load. In this example, AppComponent is the root component which will be loaded in the HTML page

Bootstrapping Root Module : Open main.ts file and observer code,

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Line 1: Imports enableProdMode from the core module

 

Line 2: Import platformBrowserDynamic class which is used to compile the application based on the browser platform

 

Line 4: Import AppModule which is the root module to bootstrap

 

Line 5: imports environment which is used to check whether the type of environment is production or development

 

Line 7: Checks if we are working in a production environment or not

 

Line 8: enableProdMode() will enable production mode which will run application faster

 

Line 11: bootstrapModule() method accepts the root module name as a parameter which will load the given module i.e., AppModule after compilation.

 

Loading root component in HTML Page : Now open index.html and observe code,

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApplication</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<app-root></app-root>: loads the root component in the HTML page. app-root is the selector name we have given to the component. This will execute the component and renders the template inside the browser. 

 

Executing an Angular Application

 

Use the below command to run the application:

ng serve --open

ng serve will build and run the application.

 

--open option will show the output by opening a browser automatically with the default port. 

  

Observe the output screen. 

 

Summary

 

In this article, we have created an Angular application and explored various inbuilt files and folder meanings. Also, we have executed an Angular application using commands. I hope you liked the article. Until next time, happy reading!  Cheers!