Hands-On Full Stack Web Development With Angular 6 and Laravel 5 by Monteiro, Fernando -- Read -- Imperial Library of Trantor

Index

Title Page Copyright and Credits

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

Dedication PacktPub.com

Why subscribe? PacktPub.com

Contributors

About the author About the reviewer Packt is searching for authors like you

Preface

Who this book is for What this book covers To get the most out of this book

Download the example code files Download the color images Conventions used

Get in touch

Reviews

Understanding the Core Concepts of Laravel 5

Setting up the environment

Installing Composer package manager Installing Docker Configuring PHPDocker.io Setting up PHPDocker and Laravel Installing VS Code text editor

The basic architecture of Laravel applications

Laravel directory structure The MVC flow

Laravel application life cycle Artisan command-line interface MVC and routes

Creating models Creating controllers Creating views Creating routes

Connecting with a database

Setting up the database inside a Docker container Creating a migrations file and database seed Using the resource flag to create CRUD methods Creating the Blade template engine

Summary

The Benefits of TypeScript

Installing TypeScript

Creating a TypeScript project Benefits of TypeScript

Writing JavaScript code with static types

Creating a tuple Using the void type The opt-out type checking - any Using enum Using the never type Types: undefined and null

Understanding interfaces, classes, and generics in TypeScript

Creating a class Declaring an interface Creating generic functions

Working with modules

Using the class export feature Importing and using external classes

Summary

Understanding the Core Concepts of Angular 6

Angular 6 – smaller, faster, and easier Angular and the component method for developing modern web applications

Angular's main building blocks The component life cycle

Installing the tools – Git, the Angular CLI, and VS Code plugins

Installing Git Installing the Angular CLI Installing VS Code Angular plugins

Creating a simple Angular application

The structure of an Angular application

The package.json file Dotfiles – .editorconfig, .gitignore, and .angular-cli.json Environments

Running the sample application Adding a new module Adding a new component Adding a new route Creating an Angular service Template data binding

Simple deployment Summary

Building the Baseline Backend Application

Additional notes about Laravel with Docker

Creating the Docker Compose foundation

Configuring nginx Configuring php-fpm Creating a docker-compose configuration file

Building the application container

Using PHP Composer to scaffold a Laravel application

Creating the application scaffold Running the application

Setting up a MySQL database

Adding a storage folder Configuring the .env file Using a MySQL external client

Migrations and database seed

Creating the migration boilerplate Creating our first database seed Exploring the Workbench table view

API documentation with the Swagger framework

Installing the L5-Swagger library Creating the application API controller Generating and publishing the API documentation Adding Swagger definitions

Summary

Creating a RESTful API Using Laravel - Part 1

Preparing the application and understanding what we are building

Refactoring the application files What we are building The application's summary Creating models and migrations files Adding content to migration files

Eloquent ORM relationship

One-to-one relationship One-to-many relationship Many-to-many relationship Seeding our database Querying the database using Tinker

Creating controllers and routes

Creating and updating the controller function Creating the API routes Generating Swagger UI documentation

Summary

Creating a RESTful API Using Laravel - Part 2

Dealing with request validation and error messages

HTTP status code Implementing the Controllers validation Adding custom error handling Checking API URLs with the Swagger UI

Get all records Get record by ID

Checking API response errors

Token-based authentication

Installing tymon-jwt-auth Updating the User model Setting up the auth guard Creating the authController Creating user routes Protecting API routes Creating and logging in a User

Dealing with Laravel resources

Creating BikesResource Creating BuildersResource Creating ItemsResource Creating ratingResource Adding resources to controllers

Summary

Progressive Web Applications with the Angular CLI

Starting a web application with the Angular CLI

Preparing the baseline code Scaffolding a web application with the Angular CLI Creating the directory structure

Building the baseline for a PWA

Adding PWA features using ng add Understanding the key files in PWA

PWA in action

Running the application in production mode Angular service – workers in action Debugging a progressive web application

Creating boilerplate Angular components

Creating the home module and component Creating the bikes module and component Creating the builders module and component Preparing Auth routes – login, register, and logout components Creating a layout component

Summary

Dealing with the Angular Router and Components

Preparing the baseline code Adding components to our application Dealing with Angular routes

Creating authentication routes Creating home routing

Configuring child routes for details pages

Adding builders child routes Adding bikers child routes Refactoring app.component.html

Building frontend views

Creating the navigation component Creating the home view and template Creating the bikes router-outlet Creating the bike-list view and template Creating the bike-detail view and template Creating the builders router-outlet Creating the builder-list view and template Creating the builder-detail view and template Creating the login view and template Creating the register view and template Testing routes and views

Summary

Creating Services and User Authentication

Preparing the baseline code Dealing with models and classes

Creating the User class model Creating the builders class model Creating the Bike class model

Using the new HttpClient to deal with XHR requests

Creating the auth service

Creating the Register function Creating the Login function Creating the Logout function Creating the setToken and getToken functions Creating the getUser function Creating the isAuthenticated function Creating the handleError function

Creating the bikes service

Creating CRUD functions Creating the voteOnBike function Creating the handleError function

Creating the builders service

Dealing with the HttpErrorHandler service

Creating a handler error service Importing HttpErrorHandler into app.module.ts Refactoring the builders service Refactoring the bikes service

How to use authorization headers

Creating an HTTP interceptor Adding AppHttpInterceptorService to the main module

How to protect application routes with route guards

Creating the route guard for bike-detail

Summary

Frontend Views with Bootstrap 4 and NgBootstrap

Preparing the baseline code Installing the Bootstrap CSS framework

Removing the Bootstrap CSS import Adding Bootstrap SCSS imports Overriding Bootstrap variables

Writing Angular templates with Bootstrap

Adding template bindings to the navigation component Adding template bindings to the login page Adding template bindings to the register page Adding template bindings to the bike-detail page Adding template bindings to the bike-list page Adding template bindings to the builder-detail page Adding template bindings to the builder-list page

Setting up CORS on a Laravel backend

Setting up Laravel CORS

Connecting Angular services with application components

Adding environment configuration Creating the navigation methods Creating the bike-detail methods Creating the bike-list methods Creating the builder-detail methods Creating the builder-list methods

Dealing with Angular pipes, forms, and validation

Creating a pipe filter

Intoducing Angular forms Understanding Angular template-driven forms

Reviewing the login form template and component

Understanding Angular reactive/model-driven forms

Reviewing the register form template and component

Adding frontend form validation

Dealing with form validation on template-driven forms Dealing with form validation on model-driven forms

Summary

Building and Deploying Angular Tests

Preparing the baseline code Setting application linters

Adding stylelint for SCSS files

Adding new scripts to the package.json file Adding the .stylelintrc configuration Installing the Stylelint plugin for VS Code Setting VS Code for the new linter

Applying stylelint rules on style.scss Fixing SCSS errors Adding TSLint-angular to the package.json file Creating linter tasks in package.json

Understanding Angular tests Writing unit and e2e tests

Fixing unit tests

Fixing authGuard tests Fixing authService tests Fixing login tests Fixing register tests Fixing bike service tests Fixing bike-detail tests Fixing bike-list tests Fixing bike tests Fixing builders service tests Fixing builder-detail tests Fixing builder-list components Fixing builders tests Fixing home tests Fixing app tests Fixing app interceptor tests

Adding unit tests Fixing e2e tests

Application deployment

Creating Docker images for frontend applications

Creating a Dockerfile Creating an nginx file Creating npm building tasks Creating the bash script Running npm build scripts

Reviewing Docker commands

Building the application for production Testing Docker images

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

← Prev
Back
Next →

← Prev
Back
Next →