CodeToLive

Introduction to Angular

Angular is a powerful front-end framework developed by Google for building dynamic, modern web applications. It's a complete rewrite of AngularJS and provides a component-based architecture for building scalable applications.

What is Angular?

Angular is a TypeScript-based open-source web application framework that follows the component-based architecture pattern. It allows developers to build applications for web, mobile, and desktop platforms.

Key Features of Angular

• Components: Angular apps are built using components that control views (HTML templates).
• Directives: Extend HTML with custom attributes and elements.
• Dependency Injection: A design pattern where a class requests dependencies from external sources.
• TypeScript: Angular is built with TypeScript, which provides static typing and other features.
• RxJS: Library for reactive programming using Observables.
• Modules: Angular apps are modular and organized into NgModules.
• Two-way Data Binding: Automatic synchronization between model and view.

Angular Architecture

Angular applications follow a modular structure composed of:

• Modules: Containers for different parts of your application.
• Components: Control views and handle user interaction.
• Services: Provide business logic and data to components.
• Directives: Extend HTML with custom behavior.
• Pipes: Transform displayed values in templates.

Setting Up an Angular Project

To create a new Angular project, you need to have Node.js and npm installed. Then install the Angular CLI:

npm install -g @angular/cli
                

Create a new project:

ng new my-angular-app
cd my-angular-app
ng serve --open
                

This will create a new Angular project and open it in your default browser at http://localhost:4200/.

Basic Angular App Structure

A typical Angular project structure looks like this:

my-angular-app/
├── e2e/                  # End-to-end tests
├── node_modules/         # NPM dependencies
├── src/                  # Application source code
│   ├── app/              # Application components
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── app.module.ts
│   ├── assets/           # Static assets
│   ├── environments/     # Environment configurations
│   ├── index.html        # Main HTML file
│   └── main.ts           # Application entry point
├── angular.json          # Angular CLI configuration
├── package.json          # NPM configuration
└── tsconfig.json         # TypeScript configuration
                

Your First Component

Here's a simple Angular component example:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to {{title}}!</h1>
    <p>Current count: {{count}}</p>
    <button (click)="increment()">Increment</button>
  `,
  styles: []
})
export class AppComponent {
  title = 'My Angular App';
  count = 0;

  increment() {
    this.count++;
  }
}
                

Angular Modules

Every Angular app has at least one module, the root module (AppModule):

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
                

Angular CLI Commands

Some useful Angular CLI commands:

• ng new project-name - Create new project
• ng generate component component-name - Generate new component
• ng serve - Run development server
• ng build - Build project for production
• ng test - Run unit tests
• ng e2e - Run end-to-end tests

Next: Components