Post
Ask Question

Learn Angular Step By Step In Easy Way - Chapter One

Introduction
 
Angular is one of the most popular JavaScript frameworks to build Single Page Applications. It is open source front-end web application framework maintained by Google. Angular started with Angular.js 1.0 which is written in JavaScript completely. After that, Angular 2.0 was introduced by Google, which is not an upgraded version of Angular 1.0 but a whole rewritten code. TypeScript was introduced with Angular 2, which is a superset (layer around JS) of JavaScript.
 
Description
 
So, let's start with the setup for Angular 2.0 or an upgraded version. First, we have to make sure that node.js is installed in our system. If it's already installed in your system, then we are good to go. If not, follow the following link and download node setup according to your operating system. Click here to download node setup. After installing it successfully, go to your Start window and search for (Node.js command prompt). 
 
Step 1 
 
After installing node.js, open you Node Command Prompt and switch to the drive where you want to add your project. Write the below command.
 
Angular
  1. npm install -g @angular/cli  
  • Here, npm stands for node package manager which handles all node.js libraries.
  • Install means we are asking npm to install a package in the directory. 
  • –g  means, install the dependencies on a global level in the current working directory, so that you can use all the packages.
  • @angular/cli is the name of the package which we  are installing, here we are installing angular cli packages for angular.
Step 2 
 
Write the below commands after that.
 
 Angular
  1. ng new FirstAngularApp  
This command will generate a folder named FirstAngularApp with all the basic setup needed for an Angular app. That's it. After this, you can see your first Angular app. Don't you think it's too easy? Well, Angular CLI makes it so easy for us.
 
After the above command, the following directory will be created.
 
Angular 
 
You can see that many files have been created within the FirstAngularApp folder. That's the basic structure of the Angular app which is set up by this command.
 
Angular 
 
This command created a folder with the name FirstAngularApp with some common files within it. So, let's run this project now. 
 
Step 3
 
Write the below command to run this app.
 
Angular 
  1. cd FirstAngularApp    
  2. ng serve   
Go to that folder and after that, write "ng serve". It will compile your project and will run it on the browser window (http://localhost:4200/) with 4200 default port.
 
Now, open your browser window and hit this URL.
  1. http://localhost:4200/  
Angular
 
That's it. You just created  and ran your first Angular app successfully. Cheers ;)


Similar Articles