×

iFour Logo

Setting up Angular in the system

Kapil Panchal - December 01, 2020

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
Setting up Angular in the system

Angular is a Typescript based open-source platform that makes it easy to create applications with in web/mobile/desktop. It is a framework and platform to create a single page application.

 

Table of Content

Setting up angular in the local environment


This blog explains how to install angular in a local environment using the Angular CLI.

Prerequisites:

You should be familiar with the following, to use angular framework:

 
  • HTML
  • JavaScript
  • Typescript
  • CSS

Install Angular in the local environment


Step 1: Install Nodejs and npm

Step 2: Install Angular CLI

Step 3: Create a project of angular

Step 1: Install Nodejs and npm


 

What is Nodejs?

Nodejs is an open-source, server technology that allows you to run JavaScript to the server.

What is npm?

Npm stands for Node Package Manager. Npm is used for installing the packages, libraries, and other tools for supporting angular development. To utilize npm, it is necessary to install Nodejs.

Install Nodejs

To install Nodejs, visit the nodejs.orgwebsite and install the latest version of the node. You should select the LTS (long-term support) version instead of selecting the current version.

 
angular1

Click the Windows Installer button to download the latest version of the node.

Install nodejs

Open the downloaded node to start the installation and select the next option

angular2

After that, you will be asked for acceptingthe license, select the checkbox, and click next.

angular3

Select the location or click the next to install.

angular4

Select next

angular5

Select install

angular6

Click finish

angular7

To check the latest version of node, open the command prompt, and run the following command:

            node -v
          

You will see an output like below:

angular10

To check the version of npm, open the command prompt, and run the following command:

              npm -v
            

You will see an output like below:

angular11

Step 2: Install Angular CLI


You can use the angular CLI to create new projects, generate applications, and perform development tasks like bundling, testing, deployment.

Run this command in the command prompt to install Angular CLI.

                npm install -g @angular/cli
              

g stands for global installation.To check the installed version of angular, open the command prompt and run theng version command.

Helpcommand is used to complete usage help.

The CLI provides the list of commands:

add: This command is useful to add support for an external library in your project.

build: Compiles an angular app into an output directory named dist/ folder.

config: Set the angular configuration values in the project.

doc: Open the angular documentation in a browser and search for a keyword. This command requires to be run in an angular project.

e2e: This command is useful for end-to-end testing.

generate: This command is useful for generating files and modules in the project.

help: This command lists available commands.

lint: This command runs linting tools on the Angular app in a project folder.

new: This command creates a new project and initial angular app.

serve: This command runs the project.

test: This command is useful for unit testing in a project.

update: This command updates dependencies.

version: To check the version of the angular CLI.

Step 3: Creating a project of angular


You can use Angular CLI to create a new angular project using the following command.

ng new FirstProject

Angular CLI will ask you for Angular routing and you can enter the y or n option, which is the default option. After that, it will ask for a stylesheet format you can choose options and enter to continue.

This command creates a new folder named FirstProject and creates a project with all dependencies and packages.

After that, we will go through the project structure to understand the folders and files created.

e2e: This folder contains the end-to-end testing configuration code.

node_modules: This folder contains all 3rd party libraries and it is managed by the package manager.

src: This folder contains the source code of the application.

app: This folder contains modules and components of the project.

  1. app.component.html: This file contains the HTML template.
  2. app.component.scss: This file contains stylesheet format.
  3. app.component.spec.ts: This file is used for unit testing.
  4. app.component.ts: the logic for the root component.
  5. app.module.ts: Defines the root module named AppModule.
  6. app-routing.module.ts: Defines the routing of the application.

assets: This folder contains static assets like icons, images, etc.

environments: This folder contains environment configuration files.

favicon.ico: The favicon

index.html: The main HTML file.

main.ts: The main starting file where AppModule is bootstrapped.

polyfills.ts: Polyfills needed by angular

styles.scss: The global stylesheet file for the project.

test.ts: This is the configuration file for Karma.

gitignore: Git configuration file.

angular.json: file contains all the configuration for CLI.

karma.conf.js: This is the configuration file for karma.

package.json: This file contains all the information about the project like name,dependencies, devDependencies, etc.

README.md: The markdown file that contains a description of the project.

tsconfig.json: This is the configuration file for Typescript.

tslint.json: The configuration file for TSlint.

Angular CLI includes a server so that you can serve your project locally.Navigate the newly created directory.

cd FirstProject

To run the project, you can use this command.

ng serve --open

Open flag opens the project in your local browser automatically.Angular supports a live server, so you can see the changes of the project without refreshing your browser’s page.

Looking to hire dedicated Angular Developer ?
Your Search ends here.

angular11

Angular CLI provides ng generate command to generate angular components, modules, directives, pipe, services, etc.

 
Component ng g component component_name
Pipe ng g pipe pipe_name
Directive ng g directive directive_name
Service ng g service service_name
Class ng g class class_name
Interface ng g interface interface_name
Guard ng g guard guard_name
Module ng g module module_name
Enum ng g enumenum_name

Angular CLI will add a reference to components, pipes, directives, services automatically in the app.module.ts file.

Let’s see a simple example:

app.component.ts file, we can declare the variable to write the message.

import { Component } from '@angular/core';
                @Component({
                  selector: 'app-root',
                  templateUrl: './app.component.html',
                  styleUrls: ['./app.component.scss']
                })
                export class AppComponent {
                  title = 'FirstProject';
                  name = 'My First Project of Angular';
                }

app.component.html file, we can display the data.


 

{{ NAME}}

You will see an output shown in below image:

angular11

Conclusion


In this blog, we learn that how to install NodeJS, angular CLI in the system and we created a new Angular project. We discussed various commands that you can use throughout the development of the application for generating components, modules, services, etc.

Setting up Angular in the system Angular is a Typescript based open-source platform that makes it easy to create applications with in web/mobile/desktop. It is a framework and platform to create a single page application.   Table of Content 1. Setting up angular in the local environment 2. Install Angular in the local environment 3. Step 1: Install Nodejs and npm 3.1. What is Nodejs? 3.2 What is npm? 3.3 Install Nodejs 4. Step 2: Install Angular CLI 5. Step 3: Creating a project of angular 6. Conclusion Setting up angular in the local environment This blog explains how to install angular in a local environment using the Angular CLI. Prerequisites: You should be familiar with the following, to use angular framework:   HTML JavaScript Typescript CSS Install Angular in the local environment Step 1: Install Nodejs and npm Step 2: Install Angular CLI Step 3: Create a project of angular Step 1: Install Nodejs and npm   What is Nodejs? Nodejs is an open-source, server technology that allows you to run JavaScript to the server. What is npm? Npm stands for Node Package Manager. Npm is used for installing the packages, libraries, and other tools for supporting angular development. To utilize npm, it is necessary to install Nodejs. Install Nodejs To install Nodejs, visit the nodejs.orgwebsite and install the latest version of the node. You should select the LTS (long-term support) version instead of selecting the current version.   Click the Windows Installer button to download the latest version of the node. Install nodejs Open the downloaded node to start the installation and select the next option After that, you will be asked for acceptingthe license, select the checkbox, and click next. Select the location or click the next to install. Select next Select install Click finish Read More: Rxjs Library In Angular To check the latest version of node, open the command prompt, and run the following command: node -v You will see an output like below: To check the version of npm, open the command prompt, and run the following command: npm -v You will see an output like below: Step 2: Install Angular CLI You can use the angular CLI to create new projects, generate applications, and perform development tasks like bundling, testing, deployment. Run this command in the command prompt to install Angular CLI. npm install -g @angular/cli g stands for global installation.To check the installed version of angular, open the command prompt and run theng version command. Helpcommand is used to complete usage help. The CLI provides the list of commands: add: This command is useful to add support for an external library in your project. build: Compiles an angular app into an output directory named dist/ folder. config: Set the angular configuration values in the project. doc: Open the angular documentation in a browser and search for a keyword. This command requires to be run in an angular project. e2e: This command is useful for end-to-end testing. generate: This command is useful for generating files and modules in the project. help: This command lists available commands. lint: This command runs linting tools on the Angular app in a project folder. new: This command creates a new project and initial angular app. serve: This command runs the project. test: This command is useful for unit testing in a project. update: This command updates dependencies. version: To check the version of the angular CLI. Step 3: Creating a project of angular You can use Angular CLI to create a new angular project using the following command. ng new FirstProject Angular CLI will ask you for Angular routing and you can enter the y or n option, which is the default option. After that, it will ask for a stylesheet format you can choose options and enter to continue. This command creates a new folder named FirstProject and creates a project with all dependencies and packages. After that, we will go through the project structure to understand the folders and files created. e2e: This folder contains the end-to-end testing configuration code. node_modules: This folder contains all 3rd party libraries and it is managed by the package manager. src: This folder contains the source code of the application. app: This folder contains modules and components of the project. app.component.html: This file contains the HTML template. app.component.scss: This file contains stylesheet format. app.component.spec.ts: This file is used for unit testing. app.component.ts: the logic for the root component. app.module.ts: Defines the root module named AppModule. app-routing.module.ts: Defines the routing of the application. assets: This folder contains static assets like icons, images, etc. environments: This folder contains environment configuration files. favicon.ico: The favicon index.html: The main HTML file. main.ts: The main starting file where AppModule is bootstrapped. polyfills.ts: Polyfills needed by angular styles.scss: The global stylesheet file for the project. test.ts: This is the configuration file for Karma. gitignore: Git configuration file. angular.json: file contains all the configuration for CLI. karma.conf.js: This is the configuration file for karma. package.json: This file contains all the information about the project like name,dependencies, devDependencies, etc. README.md: The markdown file that contains a description of the project. tsconfig.json: This is the configuration file for Typescript. tslint.json: The configuration file for TSlint. Angular CLI includes a server so that you can serve your project locally.Navigate the newly created directory. cd FirstProject To run the project, you can use this command. ng serve --open Open flag opens the project in your local browser automatically.Angular supports a live server, so you can see the changes of the project without refreshing your browser’s page. Looking to hire dedicated Angular Developer ? Your Search ends here. See here Angular CLI provides ng generate command to generate angular components, modules, directives, pipe, services, etc.   Component ng g component component_name Pipe ng g pipe pipe_name Directive ng g directive directive_name Service ng g service service_name Class ng g class class_name Interface ng g interface interface_name Guard ng g guard guard_name Module ng g module module_name Enum ng g enumenum_name Angular CLI will add a reference to components, pipes, directives, services automatically in the app.module.ts file. Let’s see a simple example: app.component.ts file, we can declare the variable to write the message. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'FirstProject'; name = 'My First Project of Angular'; } app.component.html file, we can display the data.   {{ NAME}} You will see an output shown in below image: Conclusion In this blog, we learn that how to install NodeJS, angular CLI in the system and we created a new Angular project. We discussed various commands that you can use throughout the development of the application for generating components, modules, services, etc.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Technologies that work well with Angular: A complete guide
Technologies that work well with Angular: A complete guide

Do you know 7 out of 10 people in the world today, use mobile apps for almost everything – from social media, and e-commerce, to healthcare and online transactions? Now you imagine...

What's New in Angular 16? Top features to discover
What's New in Angular 16? Top features to discover

Technologies make a big deal in the business world asserting only one thing; to keep up or get left behind. Angular is one such technology that caught drastic attention in a short time and became a trusty tool for several clients due to its spectacular features.

Angular Localization with Ivy
Angular Localization with Ivy

Part of the new Angular rendering engine, Ivy having a new method for localizing applications- especially extracting and translating text. This blog explains the benefits and some...