Angular 7 Introduction

🏃 Introduction of Angular and installation steps. 💻😎

Angular

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, the end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

How to install angular 7?

Prerequisites:- Before you begin, make sure your development environment includes Node.js and an npm package manager.

Node.Js

Angular requires Node.js version

• 8.x or 10.x

To Check your node version, run node -v in a terminal/console window.

npm package manager

Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager.

To check that you have the npm client installed, run npm -v in a terminal/console window.

Step 1:- Install the Angular CLI.

• Install the Angular CLI globally.
• To install the CLI using npm, open a terminal/console window and enter the following command:

$ npm install -g @angular/cli

Step 2:- Create a Workspace and initial application.

• You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects.
• To create a new workspace and initial app project:

1. Run the CLI command ng new and provide the name app_name, as shown here:

$ ng new app_name

2. The ng new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

Step 3:- Serve the application.

• Angular includes a server so that you can easily build and serve your app locally.

1. Go to the workspace folder (app_name).

$ cd app_name

2. Launch the server by using the CLI command ng serve, with the — open option.

$ ng serve — open & ng serve — o

• The ng serve command launches the server watches your files and rebuilds the app as you make changes to those files.
• The — open option automatically opens your browser to http://localhost:4200/.
• Your app greets you with a message:

Your Angular App

Step 4:- Edit Your first Angular Component.

• Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.
• As part of the initial app, the CLI created the first Angular component for you. It is the root component, and it is named app-root.

1. Open ./src/app/app.component.ts.
2. Change the title property from ‘my-app’ to ‘My First Angular App’.

Code:

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘My First Angular App’;
}

• The browser reloads automatically with the revised title. That’s nice, but it could look better.

3. Open ./src/app/app.component.css and give the component some style.

Code:

h1{
/* your css style; */
color:#1E88E5;
}

Dhaval Purohit - Angular Front-end Developer - Elluminati Inc | LinkedIn

Dhaval Purohit (@dhavalpurohit_) | Twitter

Dhaval Purohit (@designer_dhaval) * Instagram photos and videos

dhavalpurohit - Overview

Stack Overflow

AngularJS History