How To Tutor On Angular 7

Angular 7 is a popular web development framework developed by Google. It is used for building dynamic and responsive single-page applications (SPAs).

Prerequisites

• Basic knowledge of HTML, CSS, and JavaScript.
• Node.js and npm installed on your system. You can download and install it from Node.js.

Step 1: Install Angular CLI

The Angular CLI (Command Line Interface) is a tool that simplifies the process of creating, building, and managing Angular applications.

To install Angular CLI globally, open a terminal or command prompt and run:

npm install -g @angular/cli

Step 2: Create a New Angular Project

Once Angular CLI is installed, you can create a new Angular project. Run the following command to create a new project named my-angular-app:

ng new my-angular-app

This command will prompt you to choose some configuration options like whether you want to use Angular routing and which stylesheets to use (CSS, SCSS, etc.). You can choose according to your preference.

After the project is created, navigate to the project directory:

cd my-angular-app

Step 3: Serve the Angular Application

To run the Angular application, use the following command:

ng serve

This will start the development server. By default, the application will be available at http://localhost:4200.

Step 4: Understanding the Folder Structure

Here’s an overview of the typical folder structure in an Angular project:

• src/app: This is where your application code (components, services, modules) will go.
• src/assets: Static assets like images, icons, or other files.
• src/environments: Configuration files for different environments (development, production, etc.).
• angular.json: Configuration file for the Angular CLI.
• package.json: Defines the project’s dependencies and scripts.

Step 5: Create a New Component

In Angular, the building blocks of the application are components. A component consists of an HTML template, CSS styles, and a TypeScript class.

To create a new component, run the following command:

ng generate component my-component

This will create a new component named my-component in the src/app directory, and Angular CLI will automatically update the necessary files.

In the src/app/my-component folder, you’ll find:

• my-component.component.ts: The TypeScript file that defines the logic of the component.
• my-component.component.html: The HTML template for the component.
• my-component.component.css: The CSS styles for the component.

Step 6: Modify the Component

Let’s modify the newly created component to display some content.

In the my-component.component.html file, replace its content with:

<h2>Welcome to My Angular Component!</h2>
<p>This is my first component in Angular 7.</p>

In the app.component.html file (located in src/app), add the following to include the new component:

<app-my-component></app-my-component>

Now, when you visit http://localhost:4200, you should see the content from the my-component displayed.

Step 7: Creating a Service

In Angular, services are used for logic that is not directly tied to the UI (like fetching data from an API). Services are injected into components using Angular’s dependency injection system.

To create a service, run:

ng generate service my-service

This creates a my-service.service.ts file where you can write logic.

For example, to create a simple service that provides a greeting message:

In my-service.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {

  constructor() { }

  getGreeting() {
    return "Hello from MyService!";
  }
}

Step 8: Using the Service in a Component

Now, let’s inject this service into the my-component.

1. In the my-component.component.ts file, add the following import and constructor:

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my-service.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  greeting: string;

  constructor(private myService: MyService) { }

  ngOnInit() {
    this.greeting = this.myService.getGreeting();
  }
}

2. In the my-component.component.html file, display the greeting:

<h2>{{ greeting }}</h2>

Now, when you visit the application, you should see “Hello from MyService!” displayed, which is provided by the service.

Step 9: Routing (Optional)

To add routing in your Angular application, follow these steps:

1. Open app-routing.module.ts and configure the routes:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponentComponent } from './my-component/my-component.component';

const routes: Routes = [
  { path: 'my-component', component: MyComponentComponent },
  { path: '', redirectTo: '/my-component', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. In the app.component.html file, add a navigation link to the new route:

<nav>
  <a routerLink="/my-component">Go to My Component</a>
</nav>

<router-outlet></router-outlet>

Step 10: Build the Application

Once you’re ready to deploy your application, you can build it for production by running:

ng build --prod

This will create an optimized version of the app in the dist/ folder, which you can deploy to a server.

Key Features in Angular 7:

• Angular CLI: The Angular Command Line Interface (CLI) makes it easier to create, develop, and maintain Angular applications.
• RxJS and Observables: Angular relies on RxJS for handling asynchronous operations, including HTTP requests.
• Components: Angular applications are built using components, which consist of HTML templates, CSS styles, and TypeScript classes.
• Services and Dependency Injection: Angular promotes the use of services to separate logic from UI components, and uses dependency injection to manage service instances.
• Routing: Angular has a powerful routing system for managing navigation in single-page applications (SPAs).