A Quick Guide to Setup Angular CLI

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps. The architecture of an Angular application relies on certain fundamental concepts. In this post you will learn about how to setup angular development environment quickly.

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Here is an overview of constructing web and mobile apps with Angular:

- The first step involves writing code using Typescript, HTML, CSS, etc.

- Then, the Typescript code needs to be compiled to Javascript.

- Finally, the application is hosted on a web server.

- An angular view combines a component and template.

- Navigation between different views is defined by routers.

- Automatic synchronization or data-binding occurs between the model and view components in the model, offering a reactive user experience.

Therefore, the building blocks of the Angular workspace are fit for designing impressive Single Page Applications (SPAs).

Advantages of using Angular

1. Functionality out of the box

The default setup of Angular gives you everything you need, right out of the box. This includes tools to take care of routing, so you can easily fetch the data you want to present in your application. Angular’s preconfigured environment not only helps with development, but also facilitates testing.

2. TypeScript

Angular is built with TypeScript. The main advantage of this strongly typed language is that it helps developers to keep their code clean and understandable. Bugs are easier to spot and eliminate with the ability to see common errors as you type.

3. Consistency

To further enhance consistency, the Angular team developed a CLI tool that can be used to create certain repeatable blocks of code from the command line. Also, the framework’s documentation serves as an up-to-date reference for developers.

4. Productivity

A welcome side effect of greater consistency is an improvement in productivity. Developers don’t need to spend valuable time trying to figure out what a function, utility, or component does, and once you have mastered how to write a component, writing another one is easy by following the same general guidelines and code structure.

The high readability of Angular code also makes it easy for new developers to slot into an ongoing project.

The type system allows developers to catch potential bugs earlier. Thanks to being integrated in IDEs such as VS Code and WebStorm, TypeScript incrementally recompiles and highlights errors as you type.

Each of these factors contributes to reducing development time and cost.

5. Maintainability

Angular supports superb code maintainability of code in several ways. Firstly, when moving up from one major version to another, all Angular-related packages are updated at the same time — this means that HTTP, Routing, and Angular Material are also included.

Updating is easy and can usually be achieved by using only one command, ‘ng update’. This means that you don’t spend time worrying if the new packages are supported, puzzle over which version you should use, or wonder when a particular open-source package will be updated to the latest version.

6. Modular development structure

The modular nature of Angular means that developers can effectively divide code into modules. This allows for easy organization of app functionality and the creation of reusable chunks of code which can vastly reduce development time and cost. The Angular community further supports this with a variety of ready-made components

Modules also make it possible to efficiently divide development work across teams while ensuring that code stays clean and organized as well as allowing the application to be scaled seamlessly.

7. Angular Material

Angular Material is a collection of ready-to-use, well-tested UI components and modules that follow Google’s Material Design principles. It contains a range of UI components, such as navigation patterns, form controls, buttons, and indicators. Components are adapted to suit various browsers, well-documented, and written based on the latest guidelines.

Developed by the Angular community, these modules simplify the design workflow for teams, allowing developers to add new elements and develop applications rapidly with minimal impact on performance.

Let’s start Installation setup

Prerequisites

To use the Angular framework, you should be familiar with the following:

- JavaScript

- HTML

- CSS

Knowledge of TypeScript is helpful, but not required.

Step 1: Install Node.js

To install Angular cli, you must have Node js (LTS version) and npm package manager installed in your system, npm package manager automatically gets installed while installing node.js, To install nodejs, go to https://nodejs.org/en/download/ and download node js, It will download .exe file in your system then install it by clicking next and install.

To check whether nodejs is install perfectly just open command prompt and run: node -v or node -version. It will display node version else it will throw error if not installed properly.

Also check npm version : npm — v or npm — version

Step 2: Install Angular CLI

To install Angular CLI globally using npm, open a terminal/console and enter the following command:

$ npm install -g @angular/cli

Step 3: Create a new Project

After installation is being completed, you can create a new angular project.

To create a new project, enter below command

$ ng new MyDemoApp

Here MyNewApp is a project name

On hitting above command, ng CLI will ask few configurational questions

? Would you like to add Angular routing? No

It’s up to you, if you want separate routing file then hit yes

? Which style sheet format would you like to use? CSS

You may choose any style format from these four i.e css, scss, sass, less

Step 4: Run created project

Now move to the project folder

1. Go to that project folder, by entering below command

cd MyDemoApp

. Run project Run the project by executing below command

ng serve --open

— open: opens browser to run project

Or just navigate to http://localhost:4200/

The result will be like:

More commands you will need while working on project

ng new

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

ng generate

Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.

ng generate component component_name
ng generate service service_name
ng generate directive directive_name

ng serve

Easily test your app locally while developing.

Test, Lint

Make your code really shine. Run your unit tests, your end-to-end tests, or execute the official Angular linter with the breeze of a command.

Conclusion:

That’s it, This is how we can have our first angular project setup, Happy coding😊 .