How to Install Angular on Windows

What Is Angular?

Angular is an open-source, JavaScript framework maintained by Google and written in TypeScript. Its chief purpose is to develop single-page applications. Angular is a framework that provides developers with a standard structure and lets users create large, scalable applications in a way that can be easily maintained.

Angular is considered one of the most popular JavaScript libraries for building Web applications. It lets you use HTML as a template language and allows users to extend HTML syntax to express their application's components succinctly and clearly. In addition, Angular's data binding and dependency injection dispose of much of the code developers would otherwise have to write, saving time and making the entire development process much more efficient. Even better, the development process happens within the browser, which — through APIs — enables developers to work with the back-end infrastructure more efficiently.

What Is Angular CLI?

Angular CLI is a command-line interface tool (that’s what the CLI stands for) used to develop, initialize, scaffold, and maintain Angular applications directly from a command shell. It is the official tool used for initializing and working with Angular projects. In addition, Angular CLI automates your development workflow — saving you from dealing with complex configurations and building tools like TypeScript, Webpack, etc.

So, What’s the Difference Between Angular and Angular CLI?

To sum it up, Angular CLI is a tool — a command-line interface that builds applications based on your input and helps you add new services, directives, and components from the command line. At the same time, Angular.js is a structural framework for dynamic web apps. It enables you to use HTML as the template language and facilitates extending the syntax of HTML to clearly and succinctly express your application's components.

What Is Node.js?

Node.Js, sometimes called just Node, is an open-source development platform designed to execute JavaScript code on the server side. Node.js is handy for developing applications that depend on a persistent connection from a browser to a server. This platform is frequently used for real-time applications like chat, news feeds, and web push notifications.

In summary, Node.js is a cross-platform JavaScript runtime environment running on a JavaScript Engine. It executes JavaScript code outside the web browser, which was developed to build scalable network applications. Although many developers consider it an exclusive back-end framework, Node.js can also be used for front-end development.

Now let’s get to installing Angular and Node.js on Windows!

How to Install Node.js on Windows

Before you commit to these installations, you should have basic working knowledge of:

• CSS
• HTML
• JavaScript

Additionally, it’s helpful if you know TypeScript, but it’s not mandatory. Here’s what we recommend for the best outcome:

1. Installing Node.js

• Use this link to download the Node.js installer and install it on your system.
•  Open the command prompt and type “npm-v” to check the version and installation.

2. Installing TypeScript

• Open this link and download the TypeScript installer, placing it in your device.
•  Type the command “npm install -g typescript,” running it on the command prompt.

3. Installing Angular CLI

a. Before you install Angular on your local Windows system, you must have these resources in place.

• Node.js. Angular needs an active LTS or maintenance LTS version. You should already have this installed back in Step 1. You can verify your Node.js installation by typing “$ node -v” in the command prompt.
• NPM Package Manager. Angular, Angular CLI, and all Angular applications rely on npm packages to accommodate most of their functions and features. Therefore, you will need an NPM packager manager to download and install the npm packages. Use the “npm-v” command to verify that you have the client installed.
• If you can’t use a node version manager. If your system doesn’t let you use an nvm, you can use this Node.js installer or this NodeSource installer.

b. Install Angular CLI with the npm package manager.

npm install -g @angular/cli

c. PowerShell script execution is disabled by default on Windows client computers. If you want to execute PowerShell scripts, something necessary for npm global binaries, set this execution policy, but read the message displayed after you run the command and follow the directions. Also, be sure you understand the implications of setting up an execution policy.

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

4. Setting Up a Basic Angular CLI Workflow

First, invoke the tool on the command line via the ng executable. If you need online help, it’s available on the command line. Enter the following command to list the commands or options for any given command (e.g., generate) plus a short description.

ng help

ng generate –help

When you’re ready to create, build, and serve a new, basic Angular project on your development server, go to your new workspace’s parent directory and use the following commands:

ng new my-first-project

cd my-first-project

ng serve

Next, in your browser, open http://localhost:4200/, and you will see the new application run. When you invoke the ng serve command to construct an application and serve it locally, the server will automatically rebuild the application and reload the page if you change any source files.

5. Creating a Workspace and an Initial Application

Now that you have all these resources installed, it’s time to create a workspace and your initial application.

• Run the CLI command “ng new,” then provide the name “my-app” as seen below:
  ng new my-app 
• This “ng new” command will prompt you for information regarding features you want to include in the initial app. Press “Enter” or the “Return” key to accept the defaults.

Angular CLI will install the required npm packages and any other dependencies, although the process may take a few minutes. But when it’s complete, you have a new workspace, ready to go! 

6. Running Your Application

Angular CLI features a server so you can build and serve your app locally.

• Access your workspace folder, such as “my-app.”
• Run this command:
  cd my-app ng serve --open

“Ng serve” launches the server, monitors your files, and rebuilds the app when you make any file changes. The “—open” (alternately, just “-o”) option will automatically open your browser to http://localhost:4200/. If the installation and setup were successful, you would see a page like the following:

Angular CLI Commands

Here’s a quick reference table showing a sample of CLI commands.

Are You Interested in Full Stack Web Development?

There is a giant demand for full stack web development, and if this is the kind of career that interests you, Simplilearn can give you the vital training you need to master these critical skills. The Full Stack Developer - MERN Stack course, held in collaboration with Caltech CTME, will teach you modern coding techniques with the intensity of a bootcamp learning atmosphere.

The program gives you the foundation necessary for building full-stack web apps using Java programming language. You will start with JavaScript basics, then move on to more advanced concepts like Angular, Spring Boot, Hibernate, JSPs, and MVC.

According to Indeed, full-stack web developers in the United States earn a yearly average of $101,402. So don't delay; visit Simplilearn today and get started on a rewarding, challenging career that is always in demand!