Learnitweb

Angular – an introduction and getting started

—

by

Editorial Team
in

In this tutorial, we’ll learn about one of the most popular framework for creating single page application. We’ll learn what we need to have to get started with Angular and will also create our first application.

What is Angular?

According to the official documentation, Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

  • Angular can be used to build complex, sophisticated and scalable web or mobile applications.
  • Angular is a component based framework.
  • Angular uses TypeScript.
  • Angular includes libraries which together with Angular provide features like form development and management, validation, routing, client-server communication, testing and many more.
  • Angular uses modules to organize code. We can use components and modules to create features which can be integrated to create scalable application.
  • Angular projects have specific structure and set of files which help to organize code. Angular development framework makes it easier to update whenever a newer version is available.

Angular versions

Angular version number has three parts: major.minor.patch. For example, 11.1.2 version number has 11 as the major version, 1 and minor version and 2 as the patch level.

Major release: In a major release, new features are released. After a major release, we have to learn new features, update the code and run tests again. Major releases are not always fully backward-compatible.

Minor release: In a minor release, smaller features or APIs are released. Minor releases are always fully backward-compatible. We can optionally choose to use the new features and APIs in the code by updating the dependencies and refactoring code.

Patch release: Patch releases are usually bug fix releases. Patch releases are always fully backward-compatible and have low risk when we update our code to the latest patch version.

  • Rewrite of AngularJs was called Angular 2. Angular 2 is different from Angular 2. If anyone wants to learn Angular, she can skip it. Since then Angular major releases are in consecutive order like Angular 4, Angular 5, Angular 6 and so on. Angular 3 was skipped to avoid a confusion due to the misalignment of the router package’s version which was already distributed as v3.3.0.
  • As of Angular 7, @angular/core and the CLI need to be the same.
  • A next release is a release in development and testing. The next release is indicated by appending -next, for example 11.2.0-next.0
  • A release candidate is a feature which as completed development and in final testing. A release candidate is indicated by appending -rc, for example. 11.1.0-rc.0
  • In general, a major release of Angular is done every 6 months.

Getting started with Angular – Creating our first app

For developing an Angular application, we’ll need Node package manager (NPM), Angular CLI and an editor.

  1. Install Node Package Manager : NPM comes with Node.js. So, the easiest way to get NPM on your machine is installing Node.js on your machine. Node.js can be downloaded from https://nodejs.org/.
  2. Install Angular CLI : Angular CLI can be installed using command prompt. Install the CLI using the npm package manager
    npm install -g @angular/cli
  3. Install editor : There are many editors which can be used for development purpose. We’ll use Visual Studio Code. Visual Studio Code can be downloaded at https://code.visualstudio.com/download.

Creating a new Angular application

  1. Go to command prompt.
  2. Run ng new my-first-project. This will create a new Angular application with name my-first-project. When you run ng new my-first-project a new folder, named my-first-project, will be created in the current working directory. Since we are trying to create a new folder, we have to ensure that we have sufficient rights to create a folder. If we don’t have rights to create folder then we have to navigate to the folder where we have sufficient rights (using cd)and then run ng new my-first-project.
  3. Navigate to the project directory cd my-first-project.
  4. Run ng serve.
  5. Open http://localhost:4200/ in browser to see the new application run.

In the next tutorial, we’ll understand the structure of the Angular project we have created.