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:
 
Creating Angular Application Using Angular CLI And Exploring Folder Structure
 
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:
  1. ng new MyApplication   
The above command will ask the two questions below:
 
Creating Angular Application Using Angular CLI And Exploring Folder Structure
 
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:
 
Creating Angular Application Using Angular CLI And Exploring Folder Structure
 
This will create the following folder structure inside the node_modules folder.
 
Creating Angular Application Using Angular CLI And Exploring Folder Structure
 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:
  1. import { Component } from '@angular/core';    
  2.     
  3. @Component({    
  4.   selector: 'app-root',    
  5.   templateUrl: './app.component.html',    
  6.   styleUrls: ['./app.component.css']    
  7. })    
  8. export class AppComponent {    
  9.   title = 'MyApplication';    
  10. }   
@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:
  1. <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:
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3.     
  4. import { AppRoutingModule } from './app-routing.module';    
  5. import { AppComponent } from './app.component';    
  6.     
  7. @NgModule({    
  8.   declarations: [    
  9.     AppComponent    
  10.   ],    
  11.   imports: [    
  12.     BrowserModule,    
  13.     AppRoutingModule    
  14.   ],    
  15.   providers: [],    
  16.   bootstrap: [AppComponent]    
  17. })    
  18. 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,
  1. import { enableProdMode } from '@angular/core';    
  2. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';    
  3.     
  4. import { AppModule } from './app/app.module';    
  5. import { environment } from './environments/environment';    
  6.     
  7. if (environment.production) {    
  8.   enableProdMode();    
  9. }    
  10.     
  11. platformBrowserDynamic().bootstrapModule(AppModule)    
  12.   .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,
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4.   <meta charset="utf-8">    
  5.   <title>MyApplication</title>    
  6.   <base href="/">    
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">    
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">    
  9. </head>    
  10. <body>    
  11.   <app-root></app-root>    
  12. </body>    
  13. </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:
  1. 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! Creating Angular Application Using Angular CLI And Exploring Folder Structure Cheers! Creating Angular Application Using Angular CLI And Exploring Folder Structure