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.

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.

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

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.