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)

Installing the Bootstrap CSS framework

In this section, we will once again use the newest feature that's available in Angular CLI 6: the add command. Using this, we will add Bootstrap 4 to our application:

  1. Inside the Client folder of chapter-10, open your Terminal window and type the following command:
 ng add @ng-bootstrap/schematics
  1. The previous command will create and update the following files:
+ @ng-bootstrap/[email protected]
added 3 packages in 26.372s
Installed packages for tooling via npm.
UPDATE package.json (1589 bytes)
UPDATE src/app/app.module.ts (1516 bytes)
UPDATE angular.json (3706 bytes)
  1. In the package.json file, we will add the following dependencies:
     "@ng-bootstrap/schematics": "^2.0.0-alpha.1",
        "@ng-bootstrap/ng-bootstrap": "^2.0.0-alpha.0",
        "bootstrap": "^4.0.0&quot...