×
iFour Logo

Setting up Angular in the system

iFour Team - December 01, 2020

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Sustainable

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.

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

A complete guide on eCommerce conversion rate optimization
A complete guide on eCommerce conversion rate optimization

Table of Content 1. Define your goals 2. Know your target audience 3. Simplified UI/UX design, simple navigation, and high resolution images 4. Design a dedicated landing...

Read More
A comprehensive guide on the Construction management software
A comprehensive guide on the Construction management software

Table of Content 1. Mobile compatibility and inventory management 2. Accurately forecast job costs and monitor them 3. STACK 4. On-premises software is better suited...

Read More
Java And Environment Variables: A Brief Overview
Java And Environment Variables: A Brief Overview

Java is one of many programming languages that have shown much promise in the coding world. With that said, there are many components to consider, when working with Java, including...

Read More