Angular with Laravel: A Comprehensive Guide for Beginners to Experts

Building a Simple Application using Angular with Laravel

Now that we have set up our development environment, let’s build a simple application using Angular with Laravel. We will create a basic CRUD (Create, Read, Update, Delete) application that allows us to manage a list of tasks.

1. Create a new Laravel project – Open a command prompt and run the following command:

   composer create-project --prefer-dist laravel/laravel tasklist

2. Generate a new Angular application – Open a command prompt and navigate to the tasklist directory. Run the following command to generate a new Angular application:
   

   ng new frontend

3. Create a new task model – In Laravel, we can create a new model using the following command:
   

   php artisan make:model Task -m

   This will create a new model file (app/Models/Task.php) and a new migration file (database/migrations/2021_03_14_000000_create_tasks_table.php).
4. Create a new tasks table – Run the following command to create a new tasks table in the database:
   

   php artisan migrate

5. Create a new tasks controller – In Laravel, we can create a new controller using the following command:
   

   php artisan make:controller TaskController --api

This will create a new controller file (app/Http/Controllers/TaskController.php) with API resource methods.

6. Implement API resource methods – Open the TaskController file and implement the following API resource methods:
   

   <?php
   
   public function index()
   {
       return Task::all();
   }
   
   public function store(Request $request)
   {
       $task = new Task();
       $task->title = $request->input('title');
       $task->description = $request->input('description');
       $task->save();
   
       return $task;
   }
   
   public function show($id)
   {
       return Task::findOrFail($id);
   }
   
   public function update(Request $request, $id)
   {
       $task = Task::findOrFail($id);
       $task->title = $request->input('title');
       $task->description = $request->input('description');
       $task->save();
   
       return $task;
   }
   
   public function destroy($id)
   {
       $task = Task::findOrFail($id);
       $task->delete();
   
       return response()->json(null, 204);
   }
   

7. Create a new route for the tasks API – Open the routes/api.php file and add the following route:
   

   Route::apiResource('tasks', 'TaskController');

8. Implement the tasks service in Angular – In Angular, we can create a new service using the following command:
   

   ng generate service task

   This will create a new service file (src/app/task.service.ts) that we can use to interact with the tasks API.
9. Implement the tasks component in Angular – In Angular, we can create a new component using the following command:
   

   ng generate component task-list

   This will create a new component file (src/app/task-list.component.ts) that we can use to display the list of tasks.
10. Implement the tasks component template in Angular – Open the task-list.component.html file and implement the following template:
    

    <h1>Task List</h1>
    
    <div *ngFor="let task of tasks">
      <h2>{{ task.title }}</h2>
      <p>{{ task.description }}</p>
      <button (click)="editTask(task)">Edit</button>
      <button (click)="deleteTask(task)">Delete</button>
    </div>
    

11. Implement the tasks component logic in Angular – Open the task-list.component.ts file and implement the following logic:
    

    <?php
    
    import { Component, OnInit } from '@angular/core';
    import { TaskService } from './task.service';
    
    @Component({
      selector: 'app-task-list',
      templateUrl: './task-list.component.html',
      styleUrls: ['./task-list.component.css']
    })
    export class TaskListComponent implements OnInit {
    
      tasks: any[];
    
      constructor(private taskService: TaskService) { }
    
      ngOnInit() {
        this.taskService.getTasks().subscribe(
          tasks => this.tasks = tasks
        );
      }
    
      editTask(task: any) {
        // TODO: Implement edit task functionality
      }
    
      deleteTask(task: any) {
        this.taskService.deleteTask(task.id).subscribe(
          () => {
            const index = this.tasks.indexOf(task);
            this.tasks.splice(index, 1);
          }
        );
      }
    
    }
    

12. Test the application – Run the Laravel development server using the following command:
    

    php artisan serve

    Open a web browser and navigate to http://localhost:8000. You should see the Laravel welcome page.

    Open another command prompt and navigate to the frontend directory of the project. Start the Angular development server using the following command:

    ng serve

    Open a web browser and navigate to http://localhost:4200. You should see the Angular application with the list of tasks retrieved from the API.

    Implement the add task functionality in Angular – Open the task-list.component.ts file and implement the following logic in the `addTask method`:

    addTask(title: string, description: string) {
      this.taskService.addTask(title, description).subscribe(
        task => {
          this.tasks.push(task);
          this.newTitle = '';
          this.newDescription = '';
        }
      );
    }
    

    Open the `task-list.component.html` file and implement the following template for the add task form:

    <h1>Task List</h1>
    
    <div *ngFor="let task of tasks">
      <h2>{{ task.title }}</h2>
      <p>{{ task.description }}</p>
      <button (click)="editTask(task)">Edit</button>
      <button (click)="deleteTask(task)">Delete</button>
    </div>
    
    <h2>Add Task</h2>
    
    <form>
      <label>Title</label>
      <input type="text" [(ngModel)]="newTitle">
    
      <label>Description</label>
      <textarea [(ngModel)]="newDescription"></textarea>
    
      <button type="submit" (click)="addTask(newTitle, newDescription)">Add Task</button>
    </form>
    

    Implement the edit task functionality in Angular – Open the task-list.component.ts file and implement the following logic in the editTask method:

    editTask(task: any) {
      const title = prompt('Enter new title:', task.title);
      const description = prompt('Enter new description:', task.description);
    
      if (title !== null && description !== null) {
        this.taskService.editTask(task.id, title, description).subscribe(
          () => {
            task.title = title;
            task.description = description;
          }
        );
      }
    }
    

    Open the task-list.component.html file and update the edit task button as follows:

    <button (click)="editTask(task)">Edit</button>

    Conclusion:

    In this tutorial, we learned how to create a full-stack web application using Angular with Laravel. We covered the basics of creating a new Angular application and integrating it with Laravel to create an API for managing tasks. We also implemented basic CRUD functionality for tasks in both the frontend and backend. We hope this tutorial was helpful for beginners who are interested in learning how to create full-stack web applications.