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:
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 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!