Home » Angular » How to create new Angular application quickly

How to create new Angular application quickly

In this tutorial, we will create a new Angular application using Angular CLI.

Notice: This post only focuses on the installation of a new Angular 5 Application. Nothing any coding.

Are you new to angular?

Don’t worry, this tutorial will guide you to create your first Angular application without more complicated technical aspects. Especially, if you are a beginner, this is the best tutorial for you to start learning Angular.

What is Angular?

Angular is a latest JavaScript framework for develop fastest web applications.

What is a software framework?

Simply, a software framework is a software written to increase productivity.

First of all, we just need to understand which software we actually need to install a Angular application on our machine.

Therefore, we will go through the steps as follows.

 Steps

  1. Download and Install the Node Js
  2. Install the Angular CLI.
  3. Create a new Angular application
  1. Download and Install Node JS on your machine.

  • To download Node JS click here

Now, you may have a question, What is Node JS?

Node JS is a software written in C, C++, and JavaScript. Especially, it is an open-source, server-side, run-time environment.

Node JS

  • Then, select the latest version of Node JS according to your Operating System and download the installer.
  • After downloading the installer file, install Node JS on your machine by running the Node JS installer. If you are familiar with the command line interface, you can follow this documentation to install Node JS via CMD.  
  • Open the command prompt and type “node -v” to check the version of the Node JS.

Node version

  • Then, type “npm -v” and hit enter. As a result, you can see the version of the NPM.

If you want to learn about NPM, follow this link. 

Now we have installed the latest version of the Node JS and we can access to the NPM commands.

The next step is installing the Angular Command Line Interface globally.

Simply, the meaning of globally is you can use the package as a command line tool and, it doesn’t care which directory you are working on. Therefore, you can run commands of that particular package from anywhere in your machine.

So, I think you got the idea. Then, go to our next step.

2. Install the Angular CLI

In this step, we are going to install the Angular command line interface.

Have you any question? I think so.

What is Angular command line interface?

Angular command line interface is a very powerful tool. Especially, it helps us in many ways. I will list some of these as follows.

1. Creating Angular applications effectively and efficiently.

2. Create the code scaffolding for Angular features like components, directives, pipes, services etc.

3. It automatically adds all JS and SCC files into index.html when application build.

4. It follows angular best practices and conventions out of the box.

Run unit testing and End-to-End testing.

5. Create optimized builds for deployment to production.

6. Angular CLI will help us improve our productivity.

  • Then, type “npm install –g @angular/cli” on command prompt and hit enter. As a result, all the stuff will be downloaded and installed on your machine.

Anguar cli

  • Then, you can check the version of the Angular CLI by using “ng -v”

angular cli message

If you got this message, you have successfully installed Angular CLI.

After that, we are going to use Angular CLI to build your first Angular application.

When installing default Angular application, we can add SCSS and main routing module into our application. If you want to learn more about SCSS follow this link.

  • Then, navigate to the folder that you want to install the new Angular application and right click with shift and select ‘open command window here’.

open command prompt

  1. Create a new Angular application

  • Type “ng new FirstAngularApp –style=scss –routing” and hit enter. You can also use –style=sass, –style=les instead of –style=scss.

As a result, –style=scss flag will add SCSS to our project. If you run this command without –style=scss flag, it will add default CSS into our project.

Also, –routing flag will add the main routing module into our application.

“FirstAngularApp” is our application name. You can change it as your choice.

create app 1

create app 2

  • After installing the application,  navigate to the project folder using “cd FirstAngularApp”.
  • Then, serve the application using “ng serve –open”.

the –open flag will automatically open our default browser with the Angular application. The application runs on http://localhost:4200.

serve app

If you run the command without –open flag, you have to manually open the browser and navigate to http://localhost:4200 .

OK, now we have created our first Angular 5 application using Angular CLI.

working app

Then, open the project folder in a text editor. We can see the folder structure of Angular 5 application as follows.

folder structure

If you want to learn more about Angular architecture, follow this link.   

You can start editing your code. Here, we have several folders and files. The main folder is src and inside the src folder, we have the folder called app. Inside the app folder, we can find modules, components etc. Every Angular application has at least one module.

Inside the app folder,

  1. routing.module.ts – defines routes.
  2. component.html – creates the main markup for the application.
  3. component.scss – contains styles for the app.component.html
  4. component.ts – creates functionality (application logic) for your application.
  5. module.ts – work as the root module for the entire application.

Now, we have successfully created our first Angular application. If you have any problem, please comment in the comment section. If you like this post don’t forget to share.

Thank you for reading.

Please follow us:
error
Summary
How to create new Angular application
Article Name
How to create new Angular application
Description
This tutorial will guide you to create your first angular application without more complicated technical words and aspects. Specially, if you are a beginner, this is a best tutorial for you. Angular is a latest JavaScript framework for develop fastest web applications. Also, what is a software framework?
Author
Publisher Name
Angular + Laravel
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

FACEBOOK
FACEBOOK
YOUTUBE
YOUTUBE