Creating your first Angular App A-Z

7 min readApr 23, 2023

1.What is Angular?
2.Install Node.js
3.Install Angular CLI using npm
4.Install an IDE
5.Creating your first Angular app
6.View your first Angular app in browser
7. Host it on web server

1. What is Angular?

Angular is not a programming language, but a web application framework developed by Google for building dynamic, single-page web applications using TypeScript. It provides a set of powerful tools and features for building complex, responsive, and scalable web applications.

The official Angular website is angular.io

Benefits of using the Angular framework:

Improved code maintainability: Angular uses a component-based architecture that promotes modularity and code reusability, making it easier to manage and maintain large and complex applications.
Enhanced development productivity: Angular provides a wide range of tools, libraries, and features that make it easier and faster to develop complex web applications.
Cross-platform development: Angular allows developers to write code once and deploy it across multiple platforms, including desktop, mobile, and web.
Enhanced user experience: Angular’s declarative approach to building UIs, along with its powerful data binding capabilities, allows developers to create highly responsive and interactive user interfaces.
Robust testing capabilities: Angular provides a built-in testing framework that allows developers to easily write and run unit and integration tests, ensuring high code quality and reducing the likelihood of bugs and errors.

Okay! Let’s get started and install our environment so we can make our first Angular application!

2. Install Node.js:

What is Node.js?

Node.js is an open-source, cross-platform runtime environment that allows developers to build server-side applications using JavaScript. It uses an event-driven, non-blocking I/O model, which makes it lightweight and efficient, and enables it to handle large amounts of data and connections simultaneously. Node.js is often used to build scalable, high-performance web applications, real-time systems, and network applications.

You will need to install Node.js on your computer. You can download installers for Windows and Mac or binaries for Linux from the official Node.js website.Be sure to install the version labeled LTS. Other versions have not yet been tested with npm. Click below to download Node.js:

Download | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

The Windows and Mac installers are pretty much self-explanatory. I use Ubuntu 22.04 at the moment, so I will show you the bash commands below. For other Linux distros refer to the link below.

https://nodejs.org/en/download/package-manager

Ubuntu:

Refresh your local package index first, and then install nodejs using the following commands:

$ sudo apt update
$ sudo apt install nodejs

Check that the install was successful by querying node for its version number:

$ node -v

v18.16.0

Also, install the node package manager (npm), and check the version.

$ sudo apt install npm
$ npm -v

8.19.2

Node.js is also available in the Snap Store if you prefer to use that method.

3. Install Angular CLI using npm:

To install Angular, you will need to install npm, the Node.js package manager. You did this above in step 2. Windows and MacOS installers should include npm by default. You can find out all about npm from these links:

To install Angular using npm open a terminal and run the following command:

$npm install -g @angular/cli

Note: On Windows client computers, the execution of PowerShell scripts is disabled by default. To allow the execution of PowerShell scripts, which is needed for npm global binaries, you must set the following execution policy:

content_copySet-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy.

4. Install an IDE

You will need an Integrated Development Environment (IDE) to manage your application. I Prefer VS Code since it is free and provides all of the necessary add-ins.

There are several IDEs that you can use with Angular. Here are a few popular options:

Visual Studio Code (VS Code): VS Code is a free, open-source IDE developed by Microsoft. It has a large and active community, with many extensions available for Angular development. The Angular team itself recommends using VS Code for Angular development.

WebStorm: WebStorm is a commercial IDE developed by JetBrains. It has extensive support for JavaScript and TypeScript development, including Angular-specific features like code completion, refactoring, and debugging.

Sublime Text: Sublime Text is a lightweight, customizable text editor that can be extended with plugins. It has support for TypeScript and Angular syntax highlighting, and there are several Angular-specific plugins available.

Eclipse: Eclipse is a popular Java-based IDE that also has support for TypeScript and Angular development through plugins like Angular IDE and TypeScript IDE.

Ultimately, the choice of IDE comes down to personal preference and project requirements. VS Code is a popular choice for Angular development due to its extensive Angular support and large community, but other IDEs may offer additional features or integrations that better fit your needs.

5. Creating your first Angular App

Creating an Angular workspace and initial starter app is quite simple.
Open your terminal and navigate to the desired directory. Note that you do not need to create a new folder for your workspace, the command will do so.

Run the CLI command ng new and provide the name my-first-app, as shown here:

ng new my-first-app

The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

creating a new app with default parameters

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

The CLI creates a new workspace and a simple Welcome app, ready to run!

6. View your first Angular App in your browser.

Navigate into the workspace folder and serve the app using the following commands:

cd my-first-app
ng serve --open

ng servewill serve the app on localhost:4200 and --open will open a browser window of your first starter app. I will show you how to customize the starter app in future blogs.

7. Host it on a web server

Creating your first app on localhost:4200 is exciting but what are the next steps?

I will teach you how to customize the starter app and make your own custom apps in future blogs. To finish off this blog I will show you how to host the Angular starter app on a web server.

1. Find a reliable host.
I have been using GreenGeeks.com to host many websites since 2010. They offer plans as low as $2.95/mth and have tons of great tools such as cpanel and softalicious . I have also contacted their support many times and they are always very responsive and helpful!

*Please note that I am a GreenGeeks affiliate and I may make a commission if you sign up for a new account. There is no additional cost to you and it helps me cover the costs of my time and effort. And, yes I really do use GreenGeeks!
Thank You! -ngexamples

2. Build your application

From the terminal and within the workspace folder run the ng build command