Book Image

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

By : Fernando Monteiro
Book Image

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

By: Fernando Monteiro

Overview of this book

Angular, considered as one of the most popular and powerful frontend frameworks, has undergone a major overhaul to embrace emerging web technologies so that developers can build cutting-edge web applications. This book gives you practical knowledge of building modern full-stack web apps from scratch using Angular with a Laravel Restful back end. The book begins with a thorough introduction to Laravel and Angular and its core concepts like custom errors messages, components, routers, and Angular-cli, with each concept being explained first, and then put into practice in the case-study project. With the basics covered, you will learn how sophisticated UI features can be added using NgBootstrao and a component-based architecture. You will learn to extend and customize variables from Bootstrap CSS framework. You will learn how to create secure web application with Angular and Laravel using token based authentication. Finally, you will learn all about progressive web applications and build and deploy a complete fullstack application using Docker and Docker-compose. By the end of this book, you'll gain a solid understanding of Angular 6 and how it interacts with a Laravel 5.x backend
Table of Contents (13 chapters)

The basic architecture of Laravel applications

As mentioned previously, Laravel is an MVC framework for the development of modern web applications. It is a software architecture standard that separates the representation of information from users' interaction with it. The architectural standard that it has adopted is not so new; it has been around since the mid-1970s. It remains current, and a number of frameworks still use it today.

You can read more about the MVC pattern at

Laravel directory structure

Now, let's look at how this pattern is implemented within an application with Laravel:

  1. Open the VS Code editor.
  2. If this is the first time you are opening VS Code, click on the top menu and navigate to File | Open.
  3. Search for the chapter-01 folder, and click Open.
  4. Expand the app folder at the left-hand side of VS Code.

The application files are as follows:

Laravel root folder
The phpdocker folder and docker-compose.yml files are not part of the Laravel framework; we added these files manually, earlier in this chapter.

The MVC flow

In a very basic MVC workflow, when a user interacts with our application, the steps in the following screenshot are performed. Imagine a simple web application about books, with a search input field. When the user types a book name and presses Enter, the following flow cycle will occur:

MVC flow

The MVC is represented by the following folders and files:

MVC Architecture Application Path File
Model app/ User.php
View resources/views welcome.blade.php
Controller app/Http/Controllers Auth/AuthController.php

Note that the application models are at the root of the app folder, and the application already has at least one file for MVC implementation.

Also note that the app folder contains all of the core files for our application. The other folders have very intuitive names, such as the following:

Bootstrap Cache, autoload, and bootstrap applications
Config Application's configuration
Database Factory, migrations, and seeds
Public JavaScript, CSS, fonts, and images
Resource Views, SASS/LESS, and localization
Storage This folder has separated apps, frameworks, and logs
Tests Unit tests using PHPunit

Composer dependencies

Now, let's see how things work in the Laravel structure.