Create Angular Project

By Murari NayakTechnology
wordpress featured image

Angular is a platform used by millions of developers to build high-quality applications that can be deployed across desktop, mobile and the web. Angular is based on Typescript, and has been developed and maintained by Google, as well as individuals and corporations across the globe.

Angular has been many time confused with AngularJS, which is a predecessor by the same team at Google. But Angular is different, and has been completely re-engineered from scratch and bears no resemblance to the former AngularJS.

Pre-Requisites

To get started with Angular, one needs to have Node installed locally. And to edit the files, the simple in-built text-editor and the command-line is enough. But it’s better to have a code editor like VSCode.

Install Node (and npm)

Node Package Manager (npm) is used for library management in Angular (on any JavaScript application in general). With the recent upgrades to Node, npm comes as an already packaged unit inside Node installation.

To install node in Ubuntu, click here. For windows, click here.

Install Angular CLI

Angular CLI is one of the finest tool provided by the Angular team, to make working with Angular a piece of charm. To get hold of the CLI, open the command prompt, and hit:

npm install --location=global @angular/cli

Restart the terminal and run:

ng version

This will provide information on installed node, npm and Angular CLI versions.

ng version

Create Angular Project

We are going to create a new Angular Project named angular-demo, using the Angular CLI. So in the terminal, type:

ng new angular-demo

The CLI is going to ask a few questions, to generate the default project. Let’s handle them one-by-one

  1. ? Would you like to add Angular routing? (y/N)
  2. ? Which stylesheet format would you like to use? (Use arrow keys)
    • CSS
    • SCSS
    • Sass
    • Less

Angular Routing is required, if the application has navigation around pages. And for the style formats, you can select any of them based on individual preference.

I selected y for Angular Routing and SCSS for style format. This can be modified later if required.

The project creation would start, along with installation of the default node modules. Wait for it to complete.

new angular project creation

The new project has been created and successfully initialized.

Starting the Angular application

You can now open the newly created Angular application in the editor of choice.

To start the application, cd inside the project directory, and run npm start

cd angular-demo
npm start

It should successfully come up at port 4200 (if it’s free)

npm start

Checking the running application

Open up your browser, and visit http://localhost:4200/

Creating a new Angular application is successful. Happy Coding.

Leave a Reply