Getting Started With Angular

The Code Points May 22, 2022 0

Angular, formerly Angular JS, is a JavaScript framework (written in typescripts) for creating modern single-page apps for the web, mobile, and desktop.

In this article, we will learn the world of Angular, looking at the framework's essential concepts and details.

In this article, we will go through the prerequisites for getting Angular setup and running on our local PC, as well as how to construct our first Angular project after doing so.

Set up your application:

NodeJS must be installed on our machine before we can set up Angular to operate locally. Our development environment must additionally include Node.js and a npm package management.

Node.js:

Angular, the Angular CLI, and Angular apps rely on libraries available as npm packages for features and functionality. You'll need a npm package manager to download and install npm packages.

This Quick Start makes use of the npm client command-line interface, which comes pre-installed with Node.js.

Go to nodejs.org to download Node.js.

Node.js version 10.x or higher is required for Angular.

Run node -v in a terminal/console window to check your version.

Install the Angular CLI:

Angular CLI is used to create Angular projects, produce application and library code, and conduct various development processes like as testing, bundling, and deployment. Locally or globally, the Angular CLI can be installed.

Run the following line in your terminal to install the Angular CLI:

npm install -g @angular/cli

Create new application:

In an Angular workspace, you create new applications. One or more projects' files are stored on a workspace. A project is a collection of files that make up an app, a library, or e2e tests.

To create a new workspace and an initial app project, follow these steps:

To create a new application called todo, use the ng new command:

ng new todo --routing=true --style=scss

On your desktop, the ng new command produces a basic Angular application. The --routing and --style flags specify how the program should handle navigation and styling. Later in this tutorial, we'll go over these features in greater depth.

If you are asked if you want to require stronger type checking, you can say yes.

Use the following cd command to go inside your new project:

cd todo

Use ng serve to run your todo application:

ng serve --open

When the CLI asks if you want to use analytics, say no.

To see your new starter application, go to http://localhost:4200/ in your browser. The application reloads automatically whenever any of the source files are changed.

You may wish to open a second terminal tab or window to run commands while ng serve is executing. If you want to cease serving your program at any time, press Ctrl+C in the terminal.

Get to know your Angular application:

This session focuses on the application source files in src/app. The CLI creates the following important files automatically:

1. app.module.ts: AppComponent defines the logic for the app's base component. This is the view for this root component..
2. app.component.ts: This file, often known as the class, contains the logic for the app's main page.
3. app.component.html: The HTML for AppComponent is contained in this file. The template refers to the contents of this file. The view, or what you see in the browser, is determined by the template.
4. app.component.css: This file contains the AppComponent styles. When you wish to define styles that just apply to a specific component rather than your entire program, you use this file.

A component in Angular is made up of main three parts 1) the template, 2) styles, and 3) class. For example, is made up of the files app.component.ts, app.component.html, and app.component.css. The logic, view, and styles are separated in this framework, making the program more maintainable and scalable.

The Angular CLI also creates a file named app.component.spec.ts for component testing, but because this article isn't about testing, you may disregard it.

The CLI creates these four files in the directory you choose whenever you generate a component.

Conclusion

In this article, we have successfully created our first ever Angular Application. In the next article, we will learn the Angular file structure.

Next Article: Angular Project File Structure