How to create a sample Angular 8 application?

We will create a sample Angular application

Prerequisites:

  1. Node.js
  2. NPM
  3. Angular CLI
  4. IDE of your choice

You can download Node.js from the below URL

npm will be downloaded along with Node.js. Next, install Angular CLI by executing the following command

npm install -g @angular/cli

Visual Studio Code is popularly recommended for developing Angular applications.

Execute the following commands to check if Node.js, npm, and angular CLI is installed correctly,

node -v

npm -v

ng v

But, why Node.js and npm is required?

Angular does not need Node directly. Node.js is used for all the build and development tools. Angular is a framework & you may use Typescript or Javascript or Dart programming language to program using Angular. But, Typescript is the popular choice. Here, we are going to see an application developed in Typescript but, a web browser like Chrome, Firefox, Internet Explorer understands only Javascript. So, we have to transpile Typescript to Javascript and for that we use Node.js.

npm(node package manager) is downloaded along with Node.js. npm is a package manager for Javascript applications. It is the default package manager for the Javascript runtime environment Node.js.

Execute the following command to create a new angular project.

ng new sampleApp

Next, it will ask you questions to add routing to the application, if you need it type “N” or type “Y”. Then, choose your stylesheet format and click enter. After a few seconds your project will be successfully created.

What happens when you try to create a project without any project name as below,

ng new

As soon as you execute the command it is asking to enter a project name. What happens when you don’t type anything but press enter? Will it create a project? The answer is no, enter doesn’t work until you type something. Give it a try.

Now, run the project from your terminal by executing the following command.

ng serve

or

npm start

After a successful compilation, you will see something like below.

Now, open any browser of your choice and enter localhost:4200.

If you see the above screen in your browser, then you have successfully created your sample application. This is how you create a sample Angular application.

Below are some useful commands that come handy while developing applications in Angular.

ng g c componentName

or

ng generate component componentName

The above command is used to create a component, you can start using the component as soon as it is created without having to do any extra work with this command.

ng g s serviceName

or

ng g service serviceName

This command is used to create a service class for your application.

ng g m module-name — flat — module=app

or

ng g module module-name — flat — module=app

The above command has 2 hyphens before flat and module(we cannot enter 2 continuous hyphens on medium). The above command is used to create module classes be it routing module classes also. — flat puts the files into the src/app folder even when you are running the command from being in any folder. — module tells the CLI to register the newly creating module file in the imports array of the AppModule class. Now, you may have this doubt that why we are not using this — module=app thing while creating components and services? Yeah, we don’t do that because we add components to the declarations array of the AppModule, not to the imports array, the command we are executing for components automatically does this by adding it to the declarations array and for services we don’t need to register it in the AppModule for some reasons.

ng new — help

This shows some useful options.

These are some useful commands you need for faster development. If you face any errors during installation or creation of the project feel free to ask.

THANK YOU!!

Hello World, I am an aspiring full-stack web developer and a tech enthusiast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store