Setting up the Development Environment for Angular Development

Angular is a development platform that is written in the TypeScript language. It consists of smaller sub-systems, including a JavaScript framework, a command-line interface, a language service, and a rich collection of first-party libraries

1. JavaScript Framework: At its core, Angular provides a robust JavaScript framework for building single-page client applications. It offers features like data binding, dependency injection, routing, and state management, among others, to streamline the development process and create dynamic, interactive web applications.
2. Command-Line Interface (CLI): Angular CLI is a powerful tool that simplifies the creation, development, and maintenance of Angular projects. It provides a set of commands for tasks such as project scaffolding, generating components, services, modules, and running tests. The CLI abstracts away the configuration complexity and enables developers to focus on writing code.
3. Language Service: The Angular Language Service enhances the development experience in supported editors by providing features like IntelliSense, error checking, and code navigation for Angular templates and TypeScript code. It helps developers write code more efficiently and catch errors early in development.
4. First-Party Libraries: Angular has a rich collection of first-party libraries that extend its functionality and provide additional features for building web applications. These libraries include Angular Router for client-side routing, Angular Forms for creating forms with two-way data binding, Angular HTTP Client for making HTTP requests, and many others. These libraries are designed to work seamlessly with Angular and provide comprehensive solutions for common development tasks.

Angular enables developers to build scalable web applications with TypeScript, a strict syntactic superset of JavaScript. Developing with Angular does not require knowledge of JavaScript, but it is nice to have.

Setting up the Development environment for Angular Development can be categorised into 3 sections

• Setting up the Angular CLI
• Generate Angular application?
• Code editor setup

Setting up the Angular CLI workspace

Angular CLI stands for Angular Command Line Interface. The primary motivation behind creating the Angular CLI was to help developers focus on application building, eliminating the configuration boilerplate. Essentially, with a simple command, you should be able to initialize an application, add new artefacts, run tests, and create a production-grade bundle. The Angular CLI supports all of this with the use of special commands.

Angular CLI acts as a multi-dimensional tool for Angular developers, offering a range of functionalities that eliminate the need for manual setup and configuration. Through a simple command-line interface, developers can initiate projects, generate components, services, and modules, and perform various tasks essential for Angular development.

Angular CLI is more than just a standard tool; it's a dynamic toolbox with a wealth of capabilities that enable developers to improve and expedite the Angular development process.

The first thing we need to do is install Node.js

Install Node.js.

Node.js is a JavaScript runtime built on top of Chrome’s v8 JavaScript engine. Angular requires an active or maintenance Long Time Support (LTS) version. If you have already installed it, you can run node -v in the command line to check which version you are running. The Angular CLI uses Node.js to accomplish specific tasks, such as serving, building, and bundling your application.

Why use Node.js?

Node.js is often used as a development server for Angular applications. During the development phase, Angular developers need a convenient way to serve their applications locally for testing and debugging purposes. Node.js, with its ability to execute JavaScript code on the server side, provides an ideal runtime environment for running a development server.

Angular applications typically consist of multiple components, services, stylesheets, and other assets. When the application is served locally, these files need to be accessible through a web server. Node.js makes it straightforward to set up a simple HTTP server to serve these files to the browser.

Angular CLI, the official command-line interface for Angular development, leverages Node.js to provide a seamless development experience. When you run the ng serve command, Angular CLI uses Node.js to start a development server, serving your Angular application on a local port.

This development server supports features like live reloading, which automatically refreshes the browser when changes are made to the codebase, enhancing the developer's productivity

Install NodeJS

To install Node.js, just navigate to the below link, download the Node.js setup and install it.

Once you've successfully installed Node.js, you can verify that npm (Node Package Manager) is also installed by checking its version in your terminal or command prompt.

NPM

npm, short for Node Package Manager, is the default package manager for the Node.js runtime environment. It plays a crucial role in managing dependencies and facilitating the development, sharing, and distribution of JavaScript code, including libraries, frameworks, tools, and applications.

npm is a software package manager that is included by default in Node.js. You can check this out by running npm -v on the command line.

An Angular application consists of various libraries, called packages, that exist in a central place called the npm registry. The npm client downloads and installs the libraries that are needed to run an Angular application from the npm registry on your local computer.

So far, we have installed Node.js and checked its npm package manager version. now we need to install Angular CLI

Installing the Angular CLI

The Angular CLI is part of the Angular ecosystem and can be downloaded from the npm package registry. Since it is used for creating Angular projects, we need to install it globally in our system.

Open a terminal and run the following command:

npm install -g @angular/cli        

The above command will install the latest stable version of the Angular CLI

The command that we used to install Angular CLI uses the npm client, followed by a set of runtime arguments:

• install or i: Denotes the installation of a package
• -g: Indicates that the package will be installed on the system globally
• @angular/cli: The name of the package to install

The Angular CLI follows the same major version as the Angular framework.For example, if you are using Angular version 12, you would typically use Angular CLI version 12 as well. This ensures that the CLI commands and project setup options are in sync with the Angular framework's features and requirements.

If you want a different version than Angular CLI, such as version 15, you can run the following command:

npm install -g @angular/cli@15        

The preceding command will fetch and install the latest version of Angular CLI 15.

Generate Angular application?

Now that we have prepared our development environment, we can start creating magic by scaffolding our first Angular application. We use the new command of the Angular CLI and pass the name of the application that we want to create as an option. To do so, go to a folder of your choice and type the following:

ng new my-app        

When you run ng new my-app, the Angular CLI will generate a new Angular project structure in a directory named "my-app". It will set up the necessary files and configurations for an Angular application, including the initial component, module, and configuration files like package.json and angular.json.

Next, Angular CLI will ask if you want to include routing in your application

Routing is related to navigating from one view of your application to another, For now, answer No to the question and press Enter. The next question is related to the styling of your application:

It is common to use CSS for styling Angular applications. However, you can use preprocessors like SCSS or Less to add value to your development workflow. In this book, we work with CSS directly, so accept the default choice, CSS, and press Enter.

After pressing enter, the Angular CLI will start to generate the application file The process may take some time, depending on your internet connection. During this time, the Angular CLI downloads and installs all necessary packages and creates default files for your Angular application. When finished, it will have created a folder called my-app. The folder represents an Angular CLI workspace that contains a single Angular application called my-app at the root level.

The workspace contains various folders and configuration files that the Angular CLI needs to build, test, and publish the Angular application:

Start the application

Navigate to the newly created folder and start your application with the following commands:

ng serve        

or

npm run start        

The Angular CLI compiles the Angular project and starts a web server that watches for changes in project files. This way, whenever you change your application code, the web server rebuilds the project to reflect the new changes.

if you see the application compiled successfully, that means the newly created application was compiled successfully and served in the web address https://localhost:4200/

Simply, open the web browser and type the above web address

you can see the below web page in the web browser

That's all, You have successfully created your first Angular application now.

Code editor setup (Visual Studio Code)

Working on an Angular project without an Integrated Development Environment (IDE) can be painful.?

A code editor can provide an agile development workflow that includes compilation at runtime, static type checking, introspection, code completion, and visual assistance for debugging and building our app. Visual Studio Code (VS Code) is one of the most popular editors in the Angular ecosystem, with a rich collection of extensions for working with Angular.

What makes VS Code so great is not only its design and ease of use but also its access to a ton of plugins, and there are some great ones for Angular development.

Install Angular Essentials extensions

The most popular features are included in the Angular Essentials extension pack from John Papa. To get it, go through the following steps:

1. Navigate to the Extensions menu of VS Code.

2. Type Angular Essentials in the search box.

3. Click the Install button on the first entry item.

We installed and set up the most wanted features that needed to work with Angular development. That’s it! Your journey into the world of Angular has just begun.

In the next NGX-LK newsletter, I will bring you some more cool stuff about Angular.