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

Adding components to our application

Now, we are going to continue to add some more components to our application. We must remember that, in the application summary, we defined a page for the bikes list that refers to the api/bikes endpoint of our API; also, we will have a bike details page that refers to the api/bikes/id endpoint, containing the details of the selected bike. And, we will do the same to the api/builders endpoint.

So, let's start creating the components:

  1. Open your Terminal window inside ./Client/src/app, and type the following command:

 ng g c pages/bikes/bike-detail

At the end of the previous command, you will see the following structure, inside the bikes modules:

Bikes module structure

The preceding command will create a root bikes folder to store every module related to the bikes endpoint; this pattern allows us to have a modular application, where...

Previous Section
End of Section 3
Next Section