Angular From System Setup To First Baby Step
Angular is Typescript based open source front end web development framework backed by Google.
In this article we are going to install Angular onto our machine. Along the way we will build our first project. For development reason we are going to use VS Code
Prerequisites
👉 Before we get started make sure that you have running internet.
👉 In order to install angular we must install Node.js, since it offers us with NPM package manager console that will help us to download angular CLI package (Angular has a command based interface hence the term Angular CLI).
Installation
Step 1 : Install Node.js and verify its installation
👉 Angular requires a current, active LTS, or maintenance LTS version of Node.js
You can download it from https://nodejs.org/en/ and install it onto your machine. Make sure you download Node.js based upon your respective operating system.
Step 2 : Install Angular and verify its installation
👉 Now from same command prompt Type "npm install -g @angular/cli" to install angular.
Once install, you can verify it using "ng --version" or "ng -v". This will provide the latest installed version of angular available on your machine.
Step 2 : Install Visual Stuido Code
👉 visit https://code.visualstudio.com/ and install visual studio code.
👽 if you wish to open your project in VSCode through command "code ." from command prompt then after installation, launch VS Code, open the Command Palette (F1 or ⇧+⌘+P on Mac) and type shell command to find the Shell Command: Install 'code' command in PATH command.
(refer source: stackoverflow link )
1st Baby Step : Create your first app in angular
👉 From the command window type "ng new AngularIntro" and hit enter. It will take a while since angular CLI will arrange necessary things to manifest your app.
👉 If prompt for routing support you can type "Y" and press enter
👉 If prompt for default style you can opt for "CSS" or anything you knew before.
👉 once the new project is created by Angular CLI then go one level deep onto your project directory path hierarchy in my case it is
"C:\Users\sunny\Source\Repos\AngularIntro"
👉 In the command prompt type "code ." to open your project in VS Code.
👉 When the project AngularIntro gets mounted onto VS Code you will see it as in image below
👉 Close the welcome tab and you will see the first hand usefull command to get you well versed with VSCode initially
Building Application
👉 Press Ctrl + ` which opens the terminal window. Type "ng serve" in that terminal window and hit enter.
For more CLI overview and commands we use for angular you can refer the link
https://angular.io/cli
For now, just know this that when you use the ng serve command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files. In the background node.js creates a port and server to host your app.
👉 Once the app is build using ng serve , Angular Live Development Server will open its port and provide us with that port address where our recently built application is hosted locally. As in image above it is at localhost:4200
Type "localhost:4200" in your browser, a default page provided by angular will be opened.
Congratulations you're in Angular now !!
Comments
Post a Comment