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)

What this book covers

Chapter 1, Understanding the Core Concepts of Laravel 5, introduces the Laravel framework as a powerful tool for the development of web applications and explores the use of the paradigm convention over configuration. We will see how, out of the box, Laravel has all of the features that we need to build modern web applications, token-based authentication, routes, resources, and more. Also, we will find out why the Laravel framework is one of the most popular PHP frameworks for developing web applications today. We will learn how to set up the environment, look at the Laravel application lifecycle, and see how to use the Artisan CLI.

Chapter 2, The Benefits of TypeScript, looks at how TypeScript enables you to write consistent JavaScript code. We examine the features that it includes, such as static typing and other features that are very common in object-oriented languages. Also, we look at using the new features of the latest version of ECMAScript, and find out TypeScript helps us to write clean and well-organized code. In this chapter, we will see the benefits of TypeScript over traditional JavaScript, discover how to use static typing, and understand how to use Interfaces, Classes, and Generics, as well as Import and Export classes.

Chapter 3, Understanding the Core Concepts of Angular 6, dives into Angular, which is one of the most popular frameworks for the development of frontend web applications. In addition to being very versatile and complete, Angular also includes the Angular CLI tool for generating modules, components, services, and many more utilities. In this chapter, we will learn how to use the new version of the Angular CLI, understand the core concepts of Angular, and get to grips with the component lifecycle.

Chapter 4, Building the Baseline Backend Application, is where we will start building the sample application. In this chapter, we are going to create a Laravel application using the RESTful architecture. We will take a closer look at some points that we mentioned briefly in the first chapter, such as the use of Docker containers to configure our environment and also how to keep our database populated. we will even check out how to use the MySQL Docker container, how to use migrations and database seed, and also how to create consistent documentation with Swagger UI.

Chapter 5, Creating a RESTful API Using Laravel - Part 1, will introduce RESTful APIs. You will learn how to build a RESTful API using the core elements of the Laravel framework—controllers, routes, and eloquent Object Relational Mapping (ORM). We also show some basic wireframes for the application we are building. In addition, we will look more closely at some relationships that you will need to be familiar with, such as one-to-one, one-to-many, and many-to-many.

Chapter 6, Creating a RESTful API Using Laravel - Part 2, continues our project of building a sample API, though, at that point, we will still have a long way to go in Laravel. We will learn how to use some features that are very common among web applications, such as token-based authentication, request validation, and custom error messages; we will also see how to use Laravel resources. Also, we will see how to use the Swagger documentation to test our API.

Chapter 7, Progressive Web Applications with Angular CLI, covers the changes that have affected angular-cli.json since the previous Angular version. The angular-cli.json file has now improved its support for multiple applications. We will see how to use the ng add a command to create a PWA and how we can organize our project structure to leave a single basis for a scalable project. Also, we will see how to use the Angular CLI to create service-work and manifest files.

Chapter 8, Dealing with Angular Router and Components, is where we come to one of the most important parts of Single-Page Applications (SPAs), which is the use of routes. Luckily, the Angular framework provides a powerful tool for dealing with application routing: the @angular/router dependency. In this chapter, we will learn how to use some of these features, such as router outlets and child-views, and we will see how to create master-detail pages. Also, we will start to create the frontend views.

Chapter 9, Creating Services and User Authentication, is one where we will create many new things, and we will be performing some refactoring to memorize import details. This is a great way to learn new things in a regular and progressive way. Also, we will dig deeper into the operation and use of the HTTP module of the Angular framework, now known as httpClient. In addition, we will look at interceptors, handling errors, using authorization headers, and how to protect application routes using route guards.

Chapter 10, Frontend Views with Bootstrap 4 and NgBootstrap, explains how to include the Bootstrap CSS framework and NgBootstrap components inside a running Angular application using the new ng add command from Angular CLI. Also, we will see how to connect our Angular services with components and how to use the backend API to put it all together. We will learn to configure CORS on our backend API, and how to use it with our Angular client-side application. We will also learn to deal with the Angular pipe, template-driven forms, model-driven forms, and form validations.

Chapter 11, Building and Deploying Angular Tests, covers how to install, customize, and extend the Bootstrap CSS framework, as well as how to use NgBootstrap components and how to connect Angular services with components and UI interfaces. We will learn to write Angular unit tests, configure application linters (for SCSS and Tslint) to maintain code consistency, create NPM scripts, and also create a Docker image and deploy the application.