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

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