What Is Angular Complete Guide

What is Angular?

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is used to develop front-end applications, providing single-page and mobile applications with features like declarative templates, dependency injection, end-to-end tooling, services, directives, and data bindings.

Prerequisites

• Basic knowledge of HTML and CSS
• Familiarity with JavaScript
• Node.js installed on your machine
• npm (Node Package Manager) installed
• An IDE or text editor, such as Visual Studio Code

Setting Up Angular Development Environment

1. Install Node.js and npm Download and install Node.js from nodejs.org. This includes npm as well.

2. Install Angular CLI Open your command line interface (CLI) and run the following command:

   npm install -g @angular/cli
   

3. Check Angular CLI Installation Confirm that Angular CLI is installed correctly by running:

   ng version
   

Creating a New Angular Application

1. Create a New Project Use Angular CLI to generate a new project. Run:

   ng new my-first-angular-app
   

   You will be prompted for additional options. For simplicity, you can select the default configuration:

   ? Would you like to add Angular routing? No
   ? Which stylesheet format would you like to use? CSS
   

2. Navigate to Your Project Directory Change to the project folder:

   cd my-first-angular-app
   

3. Serve Your Application Start the development server to view your application in the browser.

   ng serve
   

   Open your browser and go to http://localhost:4200/. You should see the default Angular welcome message.

Understanding the Angular Application Structure

Your newly created Angular project has the following main files and folders:

• src/: The source files of our application.

  • app/: Contains components, services, and other Angular code.
    • app.component.ts: The root component of your application.
    • app.component.html: The HTML template for the root component.
    • app.component.css: The CSS styles for the root component.
    • app.module.ts: The module file, which defines a module for bootstrapping the application.
  • assets/: Place static assets like images here.
  • index.html: The main HTML file.
  • styles.css: Place global styles here.

• angular.json: Configuration file for the Angular CLI build system.

• package.json: Metadata regarding your project and dependencies.

Creating a Simple Component

In Angular, applications are composed of modular components. Let’s create a simple component called Welcome.

1. Generate a New Component Run the following command to generate a new component:

   ng generate component welcome
   

   Or, using the shorter form:

   ng g c welcome
   

2. Update the Template Navigate to the welcome component folder inside src/app/, and open welcome.component.html.

   Add some HTML content to this file:

   <h1>Welcome to My First Angular App</h1>
   <p>This is my first component created using Angular!</p>
   

3. Use the Welcome Component Now, update the root component's template (src/app/app.component.html) to include the new component:

   <app-welcome></app-welcome>
   

4. Run Your Application If it's not already running, start the development server:

   ng serve
   

   Refresh the browser to see the changes.

Adding a Service

Angular Services are used for data handling and can be shared across components.

1. Generate a New Service Use the Angular CLI to generate a service:

   ng generate service welcome-service
   

2. Implementing the Service Open the generated service file welcome-service.service.ts and add a method to return a welcome message.

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class WelcomeServiceService {
   
     constructor() { }
   
     getWelcomeMessage(): string {
       return "Hello from the welcome service!";
     }
   }
   

3. Inject and Use the Service in the Welcome Component Open welcome.component.ts and inject the WelcomeServiceService.

   import { Component, OnInit } from '@angular/core';
   import { WelcomeServiceService } from '../welcome-service.service';
   
   @Component({
     selector: 'app-welcome',
     templateUrl: './welcome.component.html',
     styleUrls: ['./welcome.component.css']
   })
   export class WelcomeComponent implements OnInit {
   
     welcomeMessage: string;
   
     constructor(private welcomeService: WelcomeServiceService) { 
       this.welcomeMessage = this.welcomeService.getWelcomeMessage();
     }
   
     ngOnInit(): void {
     }
   }
   

4. Update the Template with Service Data Modify welcome.component.html to display the welcome message from the service:

   <h1>Welcome to My First Angular App</h1>
   <p>{{ welcomeMessage }}</p>
   <p>This is my first component created using Angular!</p>
   

5. Run Your Updated Application Restart the Angular server if needed and refresh the browser to see the updated welcome message.

Summary

• Angular CLI is a powerful command-line tool for managing Angular projects.
• Components are the building blocks of Angular applications.
• Services help in managing data and are reusable across different components.