Getting started with Angular

Angular! previously known as Angular JS is a JavaScript framework (though written in typescripts) used in building modern single page applications for the web, mobile, or desktop.

In this section, we will explore the world of Angular, looking at the fundamental concepts and the nitty-gritty of the framework.

In this tutorial, we will discuss the prerequisites required to get Angular running on our local system, and we will create our very first Angular project, after setting up Angular on our local machine.

Prerequisites

To setup Angular to run on our local machine, we need to have NodeJS installed on our machine. We must also ensure that our 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 version, run node -v in a terminal/console window.

To get Node.js, go to nodejs.org.

npm (Node 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.

This Quick Start uses the npm client command line interface, which is installed with Node.js by default.

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

Install the Angular CLI

Angular CLI is used to create angular projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. The Angular CLI can be installed either locally or globally. But it is often recommended to install it globally, thus to install Angular CLI globally using npm, open a terminal/console window and enter the following command:

`npm install -g @angular/cli`

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. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests.

To create a new workspace and initial app project:

Run the CLI command ng new and provide the name my-app, as shown here:

`ng new my-app`

The `ng new` command prompts you for information about features to include in the initial app project. Since this is our first application, accept defaults by pressing Enter/Return all through the prompts.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes, depending on your internet connection.

It also creates the following workspace and starter project files:

• A new workspace, with a root folder named my-app
• An initial skeleton app project also called my-app (in the src subfolder)
• An end-to-end test project (in the e2e subfolder)
• Related configuration files

The initial app project contains a simple welcome application, ready to run.

Serve the application

Angular includes a server, so that you can easily build and serve your app locally by going to the workspace folder (my-app). Launch the server by using the CLI command ng serve, with the --open option.

`cd my-app`
`ng serve --open`

The ng serve command launches the server watches your files, and rebuilds the app as you make changes to those files.

The --open (or just -o) option automatically opens your browser to https://localhost:4200. The Angular application uses port 4200 by default. On the browser, a welcome message to the Angular world as shown in the image below is shown

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.

Here, we are going to edit this component, thus open ./src/app/app.component.ts and change the title property from 'my-app' to “Ogbonna Vitalis, Welcome to Angular”. Here I used my name, you can change it to yours.

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

The browser reloads automatically with the revised title. To make the look much better, we need to edit the CSS file. To do this we open ./src/app/app.component.css and give the component some style.

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

Congratulations, It's looking much better now! We have successfully created our first ever Angular Application. In the next tutorial, we will explore the Angular file structure in a bit.