How to install angular app with Angular CLI and how to create the angular project from scratch?
How to install angular 8 and how to create the angular project from scratch?
Angular is one of the three most popular frameworks for front-end development, alongside React and Vue.js.
The purpose of this tutorial is to introduce you to the most widely used front-end framework in web development named Angular.
Before starting to learn Angular, I recommend that you become familiar with the following languages if you aren't already:
- HTML, CSS
What is Angular?
Developers might get confused between Angular JS and Angular.
Angular versions 1,1.2, 1.5 are called Angular JS and starting from version 2, it is called Angular.
Angular 2 is a complete rewrite of the AngularJS framework and contains many performance-boosting capabilities with its component-based model.
Angular versions like (4,5,6,8, etc.) have some minor changes in the framework. The latest version of Angular in the market is Angular 10.
Angular applications are made up of components. So you should be aware of what a component is and why to focus on the concept.
Before going into the depth of the components, we will first install the Angular and create our first angular project.
How to install Angular CLI?
Let's start with the basics to get started and see how to install the Angular CLI 8.
Step1: Install NPM (Node Package Manager)
First of all, we are going to need Node js. NPM (node package manager, is a part of node js) is a tool for installing 3rd party libraries and dependencies to our project.
If you haven't installed the node JS and npm yet, you can install them from here, Node JS
Step 2: Install Angular CLI
The next step is to install the Angular CLI 8,
Run this command in the terminal,
npm install -g @angular/cli
g stands for global installation. If you use -g later you can use the CLI in any Angular project on your computer.
To verify your Angular version, type this command in the terminal,
Step 3: Create a new Angular Project
The next step to create the angular project with the following command,
ng new my-first-app
After executing this command, you will get few questions,
1) Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
This setting helps improve maintainability and catch bugs ahead of time.
For more information, see https://angular.io/strict (y/N)
2) Would you like to add Angular routing? (y/N)
Press y. We will explore the concept of Angular routing.
3) Which stylesheet format would you like to use?
Your angular app my-first-app with all the necessary dependencies required will be installed automatically for you.
Step 4: Run the App
After installing the Angular CLI and creating the new angular project, you can run the app with the following command,
ng serve -- open
In this part 1, we have learned the basics of Angular, how to install the Angular CLI and how to create the angular project.
In the next part, we will explore what are components in the Angular app and create our first Sign Up form in Angular.
If you feel to learn about the Web Development more, you can follow our Youtube Channel Codzify Creations
Enjoy the reading...!!
How was the tutorial? Nice. Right?
Deep Concept videos to crack the highly-piad interviews.
Chekout out our Youtube Channel to get detailed video content on important topics in interviews.
What is your Interview Score?
Test your skillset with the curated questions created by experts around the globe.
Book a free test slot. Now !.
It usually takes 30 mins for an online test and this test will be MCQ based. Get detailed analytics based on your test and recommedations with personalised roadmaps.Book a test slot. Now!