For enquiries call:
+1-469-442-0620
HomeBlogWeb DevelopmentHow to Install Angular on Windows
In this article, you will learn how you can install Angular CLI on your Windows machine and use it to create real-life Angular Applications/Projects.
As you know, Angular is popularly used to create SPAs (Single page applications). Angular is an in-demand, open-source, and modern web application development framework by Google, as compared to all other Libraries and Frameworks like ReactJs, VueJs, MithrilJs, etc.
The reasons behind this are many. Angular provides you full access to use all its sub-packages like routing, Async calls, Security, etc. To know more about full stack development, check out the best Full Stack course.
In this blog, we will cover the installation of Angular on Windows. By end of the article, you will understand how to -
Get to know more about angular cli.
We assume you are already aware of the basics of web development including HTML, CSS, and JavaScript. (if so, please proceed otherwise we strongly recommand to learn those first before jumping into Angular).
In order to continue, you must have —
PS: While working with Angular, knowledge of TypeScript is good to have, but is not mandatory.
The very first thing required to install is Node.js. (If already installed, skip this part and jump to the next part of this blog.)
Node.js is again an open-source and cross-platform JavaScript run-time environment that allows to execute JavaScript code outside of a browser (on the Server-side). Node.js is responsible to manage and install all npm dependencies for your Angular application. It provides the required libraries to run the Angular project. Node.js acts as a run-time environment for any Angular application which uses servers over localhost. For more information on Node.js refer to official docs.
Angular requires the latest/stable version of Node.js in order to continue. Go to the official website in order to install Node.js on your machine locally.
You can install any version, the current one or latest stable version, as per your need. Just click on the button and it will start downloading the package on your machine.
Once downloaded click on the icons downloaded and follow the steps, till the installation is completed. To check the version installed of Node.js you can use the following command in a terminal/console window. —
node -v
or
node — — version
As Node.js serves as Run time environment for the application, similarly NPM(node package manager) is used as a dependency management tool for any JavaScript application. NPM will allow us to install the libraries required for any Angular application; for example jQuery, angular-router, angular-http, bootstrap, and many more. Wondering where to begin your developer journey? Check out Web Design Courses online.
You can explore a number of packages available in the npm store here.
Note: Once you have installed Node.js it will automatically install NPM on your machine, and you can check the version installed using the below command.
npm -v
Earlier in the initial days of Angular, developers used to create whole architecture, webpack files, build process, etc for any project on their own from scratch which was quite a time-consuming and lengthy process. To make it easier for the developer, Angular team come up with the easy-to-use tool named Angular CLI.
As the name suggests CLI (command line interface) provides a user (developer) friendly interface where you can run commands to make your development life easier and faster.
Angular CLI comes with a number of commands available to use from creating a new project, to creating components, creating a routing configuration file, services, and many more.
To install the Angular CLI on your machine, open the terminal window and run the following command:
npm install -g @angular/cli
where -g denotes that CLI is being installed globally to your machine, which means you can create or run any command of CLI anywhere on your machine. Once you run the above command CLI will be installed on your machine, and you can verify the version installed using the following command:
ng version
To know more about Angular CLI commands, you can refer to this blog which contains a number of commands to use.
Now, let’s create our first ever Angular project using Angular CLI. Open your terminal window and type the command below on your machine.
ng new hello-world
Here ng is our CLI prefix, new denotes that we are creating a new project and hello-world is our project name. You can choose any name you want.
After running this command you will find the full architecture of the project in the directory where you run this command. The project folder will be something like below in the image -
The first file to render on running this application will be index.html which present in the src folder.
For more details about components/Service and source code you can explore this link. Run the application
one with the installation process of Angular application via CLI, it’s time to run the application locally. Angular CLI comes with complete tool-chain/commands for the development of front-end applications on your machine.
Run the following command on the terminal (Navigate to the project directory if you are not in that directory).
ng serve
or
ng serve --open
The --open (or just -o) option automatically opens your browser to http://localhost:4200/.
ng servecommand will serve your application on localhost server which you can check by navigating to your browser with the below URL http://localhost:4200/. You can customise the port as per your requirement.
ng serve command may take a few seconds to run your application, and once completed, you should see a web page similar to the following.
Now you can make changes in the default component’s template which is app.component.html .
Also, moving forward, you can generate a number of components/service/routing files using CLI commands as per your requirements and keep learning.
Looking to enhance your programming skills? Dive into the world of Python with our unique python certification course. Unleash your coding potential and become a Python pro today!
In this blog you have learnt -
Now that you have basic hands-on knowledge of getting started with an Angular application, you can start exploring Angular further.
If you have any questions/doubts related to this blog, please let us know in the comment box below...we would be more than happy to help you out!
There are cases when you need to uninstall Angular-CLI from your operating system, you can simply do so by running this below command on terminal -
npm uninstall -g @angular/cli
It's always recommended to run the command
npm cache clean
After un installation of Angular CLI from your system in order to avoid unwanted errors while installing it again.
| Name | Date | Fee | Know more |
|---|
.png&w=3840&q=75)
%20(1).png&w=3840&q=75)
%20(1).png&w=3840&q=75)
