Getting Started with Angular

Angular is a JavaScript framework used for building modern single-page applications for web, mobile, or desktop.

In this tutorial, we will discuss the requirements for getting angular running on our local system. We will also create our very first angular project after setting up Angular on our local machine.

Requirements:

For setting up Angular to run on your local machine, you should have NodeJS installed on your machine. You should also ensure that your development environment includes Node.js and a package manager.

Node.js

Node.js version 8.x or 10.x is required for Angular.

Run node -v in the terminal/Console window for checking your version.

Go to nodejs.org for downloading nodes.

npm(Node Package Manager)

Angular, Angular CLI, and angular apps depend on features and functionalities provided by libraries available as npm packages. For downloading and installing npm packages, you should have one npm package manager.

This quickstart will use the npm client command-line interface installed with Node.js by default.

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

Installing Angular CLI

Angular CLI is used for creating angular projects, applications, and library quotes for performing development tasks such as bundling, deployment, and testing.

Angular CLI could also be installed locally or globally but installing it globally is preferred.

You will need to open a terminal window and type the following command for using non for installing Angular CLI globally:

`npm install -g @angular/cli`

Creating a workspace and initial application

Applications in the context of an Angular workspace can also be developed as a workspace that will contain files for one or more projects. A project could be understood as a set of files that comprises an app, a library, or end-to-end tests.

For creating a new workspace and initial a project:

The following CLI command should be run and provide the name my-app as shown here:

'ng new my-app’

The 'ng new’ command will not prompt you for information about features, including the initial app project. As it will be your first application, you can accept the default by pressing the enter key through all the prompts.

The Angular CLI will install the essential angular npm packages and other dependencies. It could take a while depending upon your internet speed:

It will also be creating the following workspace and startup project files:

A new workspace with root folder name my-app.
A skeleton application project is also named as my-app in the subfolder.
An end-to-end test project.
Related configuration files.
The initial app project will contain simple welcome applications ready to run.

Serving the application

Angular includes a server for easily building and serving your app locally by going to the workspace folder. You can launch the server by using the CLI command ng serve with the –open option.

'cd my-app’
'ng serve--open.'

The ng serve command will launch the server to watch your files and rebuild the app as you will make changes to those files.

The --open option will automatically open your browser to http://localhost:4200. The angular application will use port 4200 by default.

Editing your first angular component

Components are essential building blocks of angular applications and the display data on the screen, listen for user output and take action based on that input.

As a part of the initial app, the CLI created the first angular component for you, and it is the route component named app-root. Here we will be adding this component. Thus open./src/app/app.component.ts change the title from 'my-app to 'welcome to Angular.'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Welcome to Angular';
}

The browser is very low automatically in the device line full stop for making it look much, but we are required to edit the CSS file, and for doing this, we will open ./src/app/app.CSS and provide the component with some style.

src/app/app.component.css
content_copyh1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

Other useful articles: