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

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

by Fernando Monteiro
Released July 2018
Publisher(s): Packt Publishing
ISBN: 9781788833912

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build modern, fast, and progressive web applications using modern features of PHP 7 and TypeScript

Key Features

  • Explore the latest features of Angular and Laravel to build applications that are powerful, consistent, and maintainable
  • Develop modern user interfaces with a reusable component-based architecture using Angular 6 and Bootstrap 4
  • Learn how to build secure backend APIs with Laravel

Book Description

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

What you will learn

  • Explore the core features of Angular 6 to create sophisticated user interfaces
  • Use Laravel 5 to its full extent to create a versatile backend layer based on RESTful APIs
  • Configure a web application in order to accept user-defined data and persist it into the database using server-side APIs
  • Build an off-line-first application using service-worker and manifest file
  • Deal with token based authentication on single page application (SPA).
  • Secure your application against threats and vulnerabilities in a time efficient way
  • Deploy using Docker and Docker-compose

Who this book is for

This book targets developers who are new to Angular, Laravel, or both, and are seeking a practical, best-practice approach to development with these technologies. They must have some knowledge of HTML, CSS and JavaScript. Familiarity of PHP is assumed to get the most from this book.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Hands-On Full Stack Web Development with Angular 6 and Laravel 5
  3. Dedication
  4. PacktPub.com
    1. Why subscribe?
    2. PacktPub.com
  5. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  7. Understanding the Core Concepts of Laravel 5
    1. Setting up the environment
      1. Installing Composer package manager
      2. Installing Docker
      3. Configuring PHPDocker.io
      4. Setting up PHPDocker and Laravel
      5. Installing VS Code text editor
    2. The basic architecture of Laravel applications
      1. Laravel directory structure
      2. The MVC flow
    3. Laravel application life cycle
    4. Artisan command-line interface
    5. MVC and routes
      1. Creating models
      2. Creating controllers
      3. Creating views
      4. Creating routes
    6. Connecting with a database
      1. Setting up the database inside a Docker container
      2. Creating a migrations file and database seed
      3. Using the resource flag to create CRUD methods
      4. Creating the Blade template engine
    7. Summary
  8. The Benefits of TypeScript
    1. Installing TypeScript
      1. Creating a TypeScript project
      2. Benefits of TypeScript
    2. Writing JavaScript code with static types
      1. Creating a tuple
      2. Using the void type
      3. The opt-out type checking - any
      4. Using enum
      5. Using the never type
      6. Types: undefined and null
    3. Understanding interfaces, classes, and generics in TypeScript
      1. Creating a class
      2. Declaring an interface
      3. Creating generic functions
    4. Working with modules
      1. Using the class export feature
      2. Importing and using external classes 
    5. Summary
  9. Understanding the Core Concepts of Angular 6
    1. Angular 6 – smaller, faster, and easier
    2. Angular and the component method for developing modern web applications
      1. Angular's main building blocks
      2. The component life cycle
    3. Installing the tools – Git, the Angular CLI, and VS Code plugins
      1. Installing Git
      2. Installing the Angular CLI
      3. Installing VS Code Angular plugins
    4. Creating a simple Angular application
      1. The structure of an Angular application
        1.  The package.json file 
        2. Dotfiles – .editorconfig, .gitignore, and .angular-cli.json
        3. Environments
      2. Running the sample application
      3. Adding a new module
      4. Adding a new component
      5. Adding a new route 
      6. Creating an Angular service
      7. Template data binding 
    5. Simple deployment
    6. Summary
  10. Building the Baseline Backend Application
    1. Additional notes about Laravel with Docker
      1. Creating the Docker Compose foundation
        1. Configuring nginx
        2. Configuring php-fpm
        3. Creating a docker-compose configuration file
      2. Building the application container
    2. Using PHP Composer to scaffold a Laravel application
      1. Creating the application scaffold
      2. Running the application
    3. Setting up a MySQL database
      1. Adding a storage folder
      2. Configuring the .env file
      3. Using a MySQL external client
    4. Migrations and database seed
      1. Creating the migration boilerplate
      2. Creating our first database seed
      3. Exploring the Workbench table view
    5. API documentation with the Swagger framework
      1. Installing the L5-Swagger library
      2. Creating the application API controller
      3. Generating and publishing the API documentation
      4. Adding Swagger definitions
    6. Summary
  11. Creating a RESTful API Using Laravel - Part 1
    1. Preparing the application and understanding what we are building
      1. Refactoring the application files
      2. What we are building
      3. The application's summary
      4. Creating models and migrations files
      5. Adding content to migration files
    2. Eloquent ORM relationship
      1. One-to-one relationship
      2. One-to-many relationship
      3. Many-to-many relationship
      4. Seeding our database
      5. Querying the database using Tinker
    3. Creating controllers and routes
      1. Creating and updating the controller function
      2. Creating the API routes
      3. Generating Swagger UI documentation
    4. Summary
  12. Creating a RESTful API Using Laravel - Part 2
    1. Dealing with request validation and error messages
      1. HTTP status code
      2. Implementing the Controllers validation
      3. Adding custom error handling
      4. Checking API URLs with the Swagger UI 
        1. Get all records
        2. Get record by ID
      5. Checking API response errors
    2. Token-based authentication
      1. Installing tymon-jwt-auth
      2. Updating the User model
      3. Setting up the auth guard
      4. Creating the authController
      5. Creating user routes
      6. Protecting API routes
      7. Creating and logging in a User
    3. Dealing with Laravel resources
      1. Creating BikesResource
      2. Creating BuildersResource
      3. Creating ItemsResource
      4. Creating ratingResource
      5. Adding resources to controllers
    4. Summary
  13. Progressive Web Applications with the Angular CLI
    1. Starting a web application with the Angular CLI
      1. Preparing the baseline code
      2. Scaffolding a web application with the Angular CLI
      3. Creating the directory structure
    2. Building the baseline for a PWA
      1. Adding PWA features using ng add
      2. Understanding the key files in PWA
    3. PWA in action
      1. Running the application in production mode
      2. Angular service – workers in action
      3. Debugging a progressive web application
    4. Creating boilerplate Angular components
      1. Creating the home module and component
      2. Creating the bikes module and component
      3. Creating the builders module and component
      4. Preparing Auth routes – login, register, and logout components
      5. Creating a layout component
    5. Summary
  14. Dealing with the Angular Router and Components
    1. Preparing the baseline code
    2. Adding components to our application
    3. Dealing with Angular routes
      1. Creating authentication routes
      2. Creating home routing
    4. Configuring child routes for details pages
      1. Adding builders child routes
      2. Adding bikers child routes
      3. Refactoring app.component.html
    5. Building frontend views
      1. Creating the navigation component
      2. Creating the home view and template
      3. Creating the bikes router-outlet
      4. Creating the bike-list view and template
      5. Creating the bike-detail view and template
      6. Creating the builders router-outlet
      7. Creating the builder-list view and template
      8. Creating the builder-detail view and template
      9. Creating the login view and template
      10. Creating the register view and template
      11. Testing routes and views 
    6. Summary
  15. Creating Services and User Authentication
    1. Preparing the baseline code
    2. Dealing with models and classes
      1. Creating the User class model
      2. Creating the builders class model
      3. Creating the Bike class model
    3. Using the new HttpClient to deal with XHR requests
      1. Creating the auth service
        1. Creating the Register function
        2. Creating the Login function
        3. Creating the Logout function
        4. Creating the setToken and getToken functions
        5. Creating the getUser function
        6. Creating the isAuthenticated function
        7. Creating the handleError function
      2. Creating the bikes service
        1. Creating CRUD functions
        2. Creating the voteOnBike function
        3. Creating the handleError function
      3. Creating the builders service
    4. Dealing with the HttpErrorHandler service
      1. Creating a handler error service
      2. Importing HttpErrorHandler into app.module.ts
      3. Refactoring the builders service
      4. Refactoring the bikes service
    5. How to use authorization headers
      1. Creating an HTTP interceptor
      2. Adding AppHttpInterceptorService to the main module
    6. How to protect application routes with route guards
      1. Creating the route guard for bike-detail
    7. Summary
  16. Frontend Views with Bootstrap 4 and NgBootstrap
    1. Preparing the baseline code
    2. Installing the Bootstrap CSS framework
      1. Removing the Bootstrap CSS import
      2. Adding Bootstrap SCSS imports
      3. Overriding Bootstrap variables
    3. Writing Angular templates with Bootstrap
      1. Adding template bindings to the navigation component
      2. Adding template bindings to the login page
      3. Adding template bindings to the register page
      4. Adding template bindings to the bike-detail page
      5. Adding template bindings to the bike-list page
      6. Adding template bindings to the builder-detail page
      7. Adding template bindings to the builder-list page
    4. Setting up CORS on a Laravel backend
      1. Setting up Laravel CORS
    5. Connecting Angular services with application components
      1. Adding environment configuration
      2. Creating the navigation methods
      3. Creating the bike-detail methods
      4. Creating the bike-list methods
      5. Creating the builder-detail methods
      6. Creating the builder-list methods
    6. Dealing with Angular pipes, forms, and validation
      1. Creating a pipe filter
        1. Intoducing Angular forms
        2. Understanding Angular template-driven forms
          1. Reviewing the login form template and component
        3. Understanding Angular reactive/model-driven forms
          1. Reviewing the register form template and component
      2. Adding frontend form validation
        1. Dealing with form validation on template-driven forms
        2. Dealing with form validation on model-driven forms
    7. Summary
  17. Building and Deploying Angular Tests
    1. Preparing the baseline code
    2. Setting application linters
      1. Adding stylelint for SCSS files
        1. Adding new scripts to the package.json file
        2. Adding the .stylelintrc configuration
        3. Installing the Stylelint plugin for VS Code
        4. Setting VS Code for the new linter
      2. Applying stylelint rules on style.scss
      3. Fixing SCSS errors
      4. Adding TSLint-angular to the package.json file
      5. Creating linter tasks in package.json
    3. Understanding Angular tests
    4. Writing unit and e2e tests
      1. Fixing unit tests
        1. Fixing authGuard tests
        2. Fixing authService tests
        3. Fixing login tests
        4. Fixing register tests
        5. Fixing bike service tests
        6. Fixing bike-detail tests
        7. Fixing bike-list tests
        8. Fixing bike tests
        9. Fixing builders service tests
        10. Fixing builder-detail tests
        11. Fixing builder-list components
        12. Fixing builders tests
        13. Fixing home tests
        14. Fixing app tests
        15. Fixing app interceptor tests
      2. Adding unit tests
      3. Fixing e2e tests
    5. Application deployment
      1. Creating Docker images for frontend applications
        1. Creating a Dockerfile
        2. Creating an nginx file
        3. Creating npm building tasks
        4. Creating the bash script
        5. Running npm build scripts
      2. Reviewing Docker commands
        1. Building the application for production
        2. Testing Docker images
    6. Summary
  18. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Hands-On Full Stack Web Development with Angular 6 and Laravel 5
  • Author(s): Fernando Monteiro
  • Release date: July 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788833912