Angular and much more

Angular’s evolution has taken the development world by storm, beginning with its significant announcement at the ng-Europe conference back in October 2014. Since then, it has become a cornerstone for developing robust and dynamic web applications. This article guides you through setting up a new Angular project named “Task,” emphasizing the creation of a comprehensive task management application.

The Beginning 🚀

The journey into Angular begins with the Angular CLI, a powerful toolset for initializing, developing, and maintaining Angular applications. To kickstart your project:

1. Angular CLI Installation:
   • Ensure you have Node.js installed, then proceed with Angular CLI installation using npm:

   • npm install -g @angular/cli

2. Project Initialization:
   • Create a new Angular project “Task” with routing enabled and SCSS for styles:

   • ng new Task --routing=true --style=scss

3. Component Generation:
   • Generate essential components for managing tasks:

   • ng generate component Tasks

   • ng generate component TaskDetail

   • ng generate component AddTask

4. Routing Setup:
   • Configure routing in app-routing.module.ts to navigate between components seamlessly:

   • import { NgModule } from '@angular/core';

   • import { RouterModule, Routes } from '@angular/router';

   • import { TasksComponent } from './tasks/tasks.component';

   • import { TaskDetailComponent } from './task-detail/task-detail.component';

   • import { AddTaskComponent } from './add-task/add-task.component';

   • const routes: Routes = [

   • { path: 'tasks', component: TasksComponent },

   • { path: 'task/:id', component: TaskDetailComponent },

   • { path: 'add-task', component: AddTaskComponent },

   • { path: '', redirectTo: '/tasks', pathMatch: 'full' },

   • ];

   • @NgModule({

   • imports: [RouterModule.forRoot(routes)],

   • exports: [RouterModule]

   • })

   • export class AppRoutingModule { }

5. Backend Integration:
   • Implement TaskService to perform CRUD operations against a backend API:

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

   • import { HttpClient } from '@angular/common/http';

   • import { Observable } from 'rxjs';

   • import { Task } from './task';

   • @Injectable({

   • providedIn: 'root'

   • })

   • export class TaskService {

   • private apiUrl = 'http://yourapi/tasks';

   • constructor(private http: HttpClient) { }

   • getTasks(): Observable {
      return this.http.get(this.apiUrl);
     }
     
     getTask(id: number): Observable {
      return this.http.get(${this.apiUrl}/${id});
     }
     
     addTask(task: Task): Observable {
      return this.http.post(this.apiUrl, task);
     }
     
     updateTask(task: Task): Observable {
      return this.http.put(${this.apiUrl}/${task.id}, task);
     }
     
     deleteTask(id: number): Observable {
      return this.http.delete(${this.apiUrl}/${id});
     }
     }

6. Frontend Interaction:
   • Utilize TaskService in TasksComponent to interact with the backend and display tasks:

   • import { Component, OnInit } from '@angular/core';

   • import { TaskService } from '../task.service';

   • import { Task } from '../task';

   • @Component({

   • selector: 'app-tasks',

   • templateUrl: './tasks.component.html',

   • styleUrls: ['./tasks.component.scss']

   • })

   • export class TasksComponent implements OnInit {

   • tasks: Task[];

   • constructor(private taskService: TaskService) { }

   • ngOnInit() {

   •  this.getTasks();

   • }

   • getTasks(): void {

   •  this.taskService.getTasks()

   •    .subscribe(tasks => this.tasks = tasks);

   • }

   • }

7. Styling:
   • Define styles for your task components to ensure a user-friendly interface:

   • .task-container {

   • margin: auto;

   • width: 50%;

   • padding: 20px;

   • box-shadow: 0 4px 8px rgba(0,0,0,0.2);

   • }

   • .task-item {

   • display: flex;

   • justify-content: space-between;

   • padding: 10px;

   • margin-top: 10px;

   • border: 1px solid #ccc;

   • border-radius: 5px;

   • }

   • .task-title {

   • font-size: 18px;

   • }

   • .delete-button {

   • cursor: pointer;

   • color: red;

   • }

Setting Up Protection 🛡️

Securing your application is paramount, and Angular aids this with built-in CSRF protection. For back-end CSRF protection, use Node.js/Express with csurf and cookie-parser. Ensure Angular’s HttpClientModule is imported in your app.module.ts for front-end CSRF protection.

Building the Task Application’s UI 🎨

The UI of your task application is the face of your project. Angular provides directives like ngFor for listing tasks and ngModel for two-way data binding, significantly easing the development process.

Leveraging Angular Libraries and Frameworks 📚

To further enhance your application, Angular offers integration with various libraries and frameworks like Angular Material for UI components, NGRX for state management, and RxJS for handling asynchronous operations.

Conclusion

The journey through Angular development is filled with vast possibilities. Utilizing Angular CLI, incorporating essential components, and leveraging external libraries can significantly enrich your application, making “Task” a robust, dynamic, and user-friendly task management tool.