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

Related Content you might be interested in

Current Title:

Small book image
Hands-On Full Stack Web Development with Angular 6 and Laravel 5
Fernando Monteiro
Jul, 2018 | 420 pages
Small book image
Building RESTful Web Services with PHP 7
Waheed ud din
Sep, 2017 | 244 pages
Small book image
Laravel 5 Essentials
Martin Bean
Apr, 2015 | 144 pages
Small book image
Learning Bootstrap 4 by Building Projects
Eduonix Learning Solutions
Aug, 2018 | 218 pages
Table of Contents (13 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Understanding the Core Concepts of Laravel 5
Understanding the Core Concepts of Laravel 5
Setting up the environment
The basic architecture of Laravel applications
Laravel application life cycle
Artisan command-line interface
MVC and routes
Connecting with a database
Summary
2
The Benefits of TypeScript
The Benefits of TypeScript
Installing TypeScript
Writing JavaScript code with static types
Understanding interfaces, classes, and generics in TypeScript
Working with modules
Summary
3
Understanding the Core Concepts of Angular 6
Understanding the Core Concepts of Angular 6
Angular 6 – smaller, faster, and easier
Angular and the component method for developing modern web applications
Installing the tools – Git, the Angular CLI, and VS Code plugins
Creating a simple Angular application
Simple deployment
Summary
4
Building the Baseline Backend Application
Building the Baseline Backend Application
Additional notes about Laravel with Docker
Using PHP Composer to scaffold a Laravel application
Setting up a MySQL database
Migrations and database seed
API documentation with the Swagger framework
Summary
5
Creating a RESTful API Using Laravel - Part 1
Creating a RESTful API Using Laravel - Part 1
Preparing the application and understanding what we are building
Eloquent ORM relationship
Creating controllers and routes
Summary
6
Creating a RESTful API Using Laravel - Part 2
Creating a RESTful API Using Laravel - Part 2
Dealing with request validation and error messages
Token-based authentication
Dealing with Laravel resources
Summary
7
Progressive Web Applications with the Angular CLI
Progressive Web Applications with the Angular CLI
Starting a web application with the Angular CLI
Building the baseline for a PWA
PWA in action
Creating boilerplate Angular components
Summary
8
Dealing with the Angular Router and Components
Dealing with the Angular Router and Components
Preparing the baseline code
Adding components to our application
Dealing with Angular routes
Configuring child routes for details pages
Building frontend views
Summary
9
Creating Services and User Authentication
Creating Services and User Authentication
Preparing the baseline code
Dealing with models and classes
Using the new HttpClient to deal with XHR requests
Dealing with the HttpErrorHandler service
How to use authorization headers
How to protect application routes with route guards
Summary
10
Frontend Views with Bootstrap 4 and NgBootstrap
Frontend Views with Bootstrap 4 and NgBootstrap
Preparing the baseline code
Installing the Bootstrap CSS framework
Writing Angular templates with Bootstrap
Setting up CORS on a Laravel backend
Connecting Angular services with application components
Dealing with Angular pipes, forms, and validation
Summary
11
Building and Deploying Angular Tests
Building and Deploying Angular Tests
Preparing the baseline code
Setting application linters
Understanding Angular tests
Writing unit and e2e tests
Application deployment
Summary
12
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Dealing with Angular routes

At this point, we will continue with the development of our sample application. In the previous chapter, we created some Angular components for the frontend application, but before we write the contents of each one of them, we are going to create some routes.

Before we dive into the code, it’s important for you to understand how the Angular router works.

When you click on a link or go to a URL (for example, http://localhost:4200/bikes), the Angular router:

  1. Checks the browser URL.
  2. Finds which router state corresponds to the URL.
  3. Applies route guards, if they were defined in the router state.
  4. Activates the respective Angular component to display the page.

Also, each route can contain the following properties:

  • path: String; the path to match the URL
  • patchMatch: String; how to match the URL
  • component: Class reference; component to activate when...
Previous Section
End of Section 4
Next Section