Basic Angular 3

Basic Angular 3: An Introduction

What is Angular 3?

Angular 3 does not exist as an official version. Google skipped version 3 to align the Angular package versions, jumping directly from Angular 2 to Angular 4. However, the concepts from Angular 2 and later versions are relevant to understanding the basics of Angular’s modern framework. This guide focuses on Angular basics with examples applicable to Angular 2+ versions.

Key Features of Angular Framework

1. Component-Based Architecture
   Angular uses components to define views and logic, making applications modular and maintainable.

2. Modules
   Angular applications are divided into modules (NgModules), organizing code into cohesive blocks.

3. Templates
   Templates define the HTML structure and are linked to logic with Angular syntax.

4. Directives
   Angular directives dynamically manipulate the DOM and extend HTML functionality.

5. Two-Way Data Binding
   Angular synchronizes the UI and the data model seamlessly.

6. Services and Dependency Injection (DI)
   Angular uses services for reusable business logic and DI to inject dependencies into components.

7. Routing
   Angular Router provides navigation between different views in a single-page application.

Basic Angular 3 Building Blocks

1. Modules
   Modules are containers for components, directives, pipes, and services.

   Example:

   typescript

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule],
     bootstrap: [AppComponent],
   })
   export class AppModule {}
   

2. Components
   Components are the heart of Angular applications, defining templates and logic.

   Example:

   typescript

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     template: '<h1>{{ title }}</h1>',
     styles: ['h1 { color: green; }'],
   })
   export class AppComponent {
     title = 'Welcome to Angular!';
   }
   

3. Templates
   Templates bind data from the component logic to the UI.

   Example:

   html

   <h1>{{ title }}</h1>
   <button (click)="changeTitle()">Change Title</button>
   

   Component Logic:

   typescript

   changeTitle() {
     this.title = 'Title Updated!';
   }
   

4. Directives
   Angular includes structural (*ngIf, *ngFor) and attribute (ngClass, ngStyle) directives.

   Example - Structural Directive:

   html

   <div *ngIf="showContent">Content is visible!</div>
   

   Example - Attribute Directive:

   html

   <p [ngStyle]="{ color: textColor }">Styled Text</p>
   

5. Data Binding

   • Interpolation:
     html

     <p>{{ message }}</p>
     

   • Property Binding:
     html

     <img [src]="imageUrl">
     

   • Event Binding:
     html

     <button (click)="onClick()">Click Me</button>
     

   • Two-Way Binding:
     html

     <input [(ngModel)]="userInput">
     

6. Routing
   Angular Router manages navigation.

   Example:

   typescript

   import { RouterModule, Routes } from '@angular/router';
   import { HomeComponent } from './home/home.component';
   
   const routes: Routes = [
     { path: '', component: HomeComponent },
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule],
   })
   export class AppRoutingModule {}
   

Angular CLI: Setting Up a Basic Project

1. Install Angular CLI:

   bash

   npm install -g @angular/cli
   

2. Create a New Angular Project:

   bash

   ng new my-angular-app
   cd my-angular-app
   

3. Serve the Application:

   bash

   ng serve
   

4. View the Application:
   Open http://localhost:4200 in your browser.