How to create new Angular application
In this tutorial, we will create a new Angular application using Angular CLI.
Notice: This post only focus on installation of 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 words and aspects. Specially, if you are a beginner, this is a best tutorial for you.
What is Angular?
Also, 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 Angular application on our machine.
Therefore, we will go through steps as follows.
- Download and Install Node Js
- Install Angular CLI.
- Create new Angular application
Download and Install Node JS on your machine.
- Go to this link, https://nodejs.org/en/download/
Now, you may have a question, What is Node JS?
- Then, select the latest version of Node JS according to your Operating System and download installer.
- After downloading the file, install Node JS on your machine by running Node JS installer. If you familiar with command line interface, you can follow this documentation to install Node JS via CMD. https://nodejs.org/en/download/package-manager
- Open command prompt on your computer and type “node -v” to check the version of Node JS.
- Then, type “npm -v” and hit enter. As a result, you can see version of NPM.
If you want to learn about NPM, follow this link. https://docs.npmjs.com/getting-started/what-is-npm
OK, Now we have installed latest version of the Node JS and we can access to the NPM commands.
Next step is installing 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 your 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 Angular CLI
In this step, we are going to install Angular command line interface.
Have you any question? I think so.
What is Angular command line interface?
Angular command line interface is very powerful tool. Specially, 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.
Don’t keep any doubt about any technical word. I will try to explain every thing as much as possible. If you got some confusion, please find and learn. There are lot of resources in the internet to learn new things.
- 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.
- Then, you can check Angular CLI version using “ng -v”
If you got this message, you have successfully installed Angular CLI.
After that, we are going to use Angular CLI to build our fresh Angular application.
Addition to, 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. https://sass-lang.com/guide.
- So, navigate to the folder that you want to install application and then, right click with shift and select ‘open command window here’.
Create 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 into 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.
- After installing application, navigate to the project folder using “cd FirstAngularApp”.
- Then, serve application using “ng serve –open”.
–open flag will automatically open our default browser with the Angular application. The application run on http://localhost:4200.
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.
Then, open the project folder in a text editor. We can see the folder structure of Angular 5 application as follows.
If you want to learn more about Angular architecture, follow this link: https://angular.io/guide/architecture
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 folder called app. Inside the app folder we can find your modules, components etc. Every Angular application have at least one module.
Inside the app folder,
- routing.module.ts – defines routes.
- component.html – creates main markup for the application.
- component.scss – contains styles for the app.component.html
- component.ts – creates functionality (application logics) for your application.
- module.ts – work as root module for entire application.
Now we have successfully created our first Angular application. Basically that’s it. 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.