Creating First Angular Project

Setup:

1. Node Installation
2. Angular CLI Installation 

1. Node Installation

We need to use Node and NPM compile them into js file so that we can deploy them in production.
Node

Download Node LTS for your Operating system from link below:

2. Angular CLI Installation

To Install Angular Cli 
1. Open Command Prompt
2. Type the command npm install -g @angular/cli  
3. Press enter

Creating New Project in Angular

Steps:

1. Create angular project using command ng new my-app  

ng - stands for angular
new - option to create new project
my-app - name of the project 


2. Type yes to add angular routing


3. Choose the type of Styling : CSS, SCSS, Sass, Less, Stylus



After installation we will get output like below.


Running the Angular project

Steps:

1. Go inside the angular project using cd my-app  


2. Hit the command ng serve  

3. Go to URL: http://localhost:4200/ on your browser



Our Angular Project has successfully started. We get this default page from angular.




 

Comments

Post a Comment

Popular posts from this blog

Angular: Counter Project

Image
Counter Project: Steps: 1. Create the Counter project  2. Create the User Interface 3. Connect User Interface with angular 1. Create the Counter Project     Create an angular app with command:   ng new counter-app      Note: If you have any issue creating a project you can refer to link below:        https://flauntprogramming.blogspot.com/2020/06/hello-world-angular.html 2. Create the User Interface We Added a heading Counter App We  have used String interpolation to display the value of counter {{counter}} It displays the value that has been stored in the variable named counter declared in app.component.ts We have add two buttons to increment and decrement the value of counter (click)="increment()" It means whenever plus button is clicked, it will call the function increment() defined in app.component.ts (click)="decrement()" It means whenever minus button is clicked, it will call the function decrement() defined in ap...
Read more