BurgerPedia: A Complete Laravel 5 and AngularJS Tutorial with Bootstrap to Make it Pretty – Part 8

Published on October 5, 2016 in AJAX/HTML/CSS/jQuery/Javascript/Laravel/PHP/Tutorials & Samples/Web Development

Part 8 – Integrating AngularJS and Bootstrap

Now that we have the Laravel backend completely ready and all of our API routes defined, let’s go ahead and setup our frontend for viewers using AngularJS and Bootstrap. The first part is downloading and installing the various AngularJS and Bootstrap files in the right location.

Inside Laravel’s root folder, you’ll find a public folder – this is where all publicly accessible files are stored. The public directory contains the index.php file, which is the entry point for all requests entering your application. This directory also houses your assets such as images, JavaScript, and CSS. All of our frontend files will be placed inside the public folder. Laravel has some pre-installed folders and files. This includes the base assets as well as the CSS and JS folders.

Let’s install our frontend libraries. We’ll begin with AngularJS. AngularJS is a full featured JavaScript framework, with the core goal of simplification. It excels at building dynamic, single page web apps (SPAs) and supports the Model View Controller (MVC) programming structure. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. You can download a fresh copy of AngularJS from their official website. In my case, I have downloaded version 1.5.8 of AngularJS. Once Angular has been downloaded, you can copy the contents inside the public/js folder. I have created a subfolder called angular to store the contents of AngularJS. At this point, your folder structure should look similar to the following:

Next, we will go ahead and install Bootstrap. Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs. You can download a fresh copy of Bootstrap from their official website. In my case, I have download version 3.3.7 of Bootstrap. Once you’ve downloaded and unpacked Bootstrap, you will notice that it contains three subfolders:

The css folder contains Bootstrap’s CSS files
The js folder contains Bootstrap’s optional Javascript files
The fonts folder contains the Glyphicons fonts

We will copy the contents of the css and js files into our project’s css and js folders located inside the public folder. We will also go ahead and copy the fonts folder into the public folder as well. Now, your folder structure should look similar to the following:

At this point, we now have both libraries installed and now we need to connect them to our Laravel backend. To do so, we need to create a view that will load both AngularJS and Bootstrap. In Laravel, all requests to the application are mapped to specific functions or controller routes. The routes are responsible for instructing the application where URLs go. In our case, we want http://localhost/burgerpedia/ to render the burgers.php view file, so we will create the following route within routes/web.php:

Route::get('/', function () {
    return view('burgers');
});

Remember that Laravel separates routing in 5.3 into API directives and Web directives. That is why we are updating the web.php routing file. Now, what we are saying with this line of code is that the root page of our application should render the burgers view. Remember that we will be using AngularJS to create a single page application to display and update our hamburgers and their descriptions. So the purpose of this view is simply to have a container for our AngularJS frontend. So, let’s go ahead and create our burgers view. But before that, lets look at the full web.php file:

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| This file is where you may define all of the routes that are handled
| by your application. Just tell Laravel the URIs it should respond
| to using a Closure or controller method. Build something great!
|
*/

Route::get('/', function () {
    return view('burgers');
});

Now lets create our burgers view file. Views contain the HTML served by your Laravel application and separate your controller / application logic from your presentation logic. Views are stored in the resources/views directory. We will create a view file called burgers.php inside the resources/views folder.

Make sure to create a file called burgers.php, and not burgers.blade.php. Any file named *.blade.php passes through Laravel’s blade templating engine. Blade’s variables definition is very close to AngularJS’s variable definition and this will cause conflicts between Angular and the blade engine. That is because both Laravel’s blade templating ending and AngularJS use the {{ }} symbol. You could display the contents of the foo variable like so in both Laravel’s blade and Angular:

Hello, {{ $name }}.

Now, we are going to create the burgers.php file. All the content from the burgers.php file has been copied over from the Jumbotron sample template that can be found in the Bootstrap examples section .

Here are the contents of burgers.php

<!DOCTYPE html>
<html lang="en" ng-app="BurgerPedia">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="BurgerPedia">
    <meta name="author" content="Mifty Yusuf">

    <title>BurgerPedia - We've Got the Burgers</title>

    <!-- Bootstrap core CSS -->
    <link href="<?= asset('css/bootstrap.min.css') ?>" rel="stylesheet">
	
	<!-- custom CSS for the page -->
    <link href="<?= asset('css/burgerpedia.css') ?>" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	
	
  </head>

  <body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">BurgerPedia</a>
        </div>
      </div>
    </nav>

	<!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        <!-- this is where content will be injected -->
        <div ng-view></div>
    </div>

	<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
	<script src="<?= asset('js/angular/angular.min.js') ?>"></script>
	<script src="<?= asset('js/angular/angular-route.min.js') ?>"></script>
	<script src="<?= asset('js/jquery.min.js') ?>"></script>
	<script src="<?= asset('js/bootstrap.min.js') ?>"></script>
	
	<!-- AngularJS Application Scripts -->
	<script src="<?= asset('app/app.module.js') ?>"></script>
	<script src="<?= asset('app/hamburgers/hamburgers.controller.js') ?>"></script>
	<script src="<?= asset('app/hamburger/hamburger.controller.js') ?>"></script>
		
		

  </body>
</html>

Here are the important parts about this file.

The most important part of the file is the 2nd line where we declare the following:

<html lang="en" ng-app="BurgerPedia">

Although this appears to be a normal html script tag, you will notice the section that states ng-app=Burgerpedia. This is the part where we explicitly bind this page to an Angular app called BurgerPedia that we will be defining in the next section.

Next, we have 2 lines below load the default, minified bootstrap css file (bootstrap.min.css) along with a custom css file (burgerpedia.css)

    <!-- Bootstrap core CSS -->
    <link href="<?= asset('css/bootstrap.min.css') ?>" rel="stylesheet">
	
	<!-- custom CSS for the page -->
    <link href="<?= asset('css/burgerpedia.css') ?>" rel="stylesheet">

The contents of burgerpedia is simply some CSS styling that is added on top of the regular bootstrap styling.

After that, we have a section for injecting the various Angular views. We will talk more about AngularJS views in the next chapter. For the moment, here is the piece of code responsible for loading the AngularJS views:

	<!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        <!-- this is where content will be injected -->
        <div ng-view></div>
    </div>

Finally, we load all of our javascript files at the bottom of the file since this is standard practice these days. The Javascript files loaded include bootstrap JS files and various Angular JS files that we will discuss further in the next section, which is dedicated to AngularJS. Here are the various Javascript files that are loaded in burgers.php

	<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
	<script src="<?= asset('js/angular/angular.min.js') ?>"></script>
	<script src="<?= asset('js/angular/angular-route.min.js') ?>"></script>
	<script src="<?= asset('js/jquery.min.js') ?>"></script>
	<script src="<?= asset('js/bootstrap.min.js') ?>"></script>
	
	<!-- AngularJS Application Scripts -->
	<script src="<?= asset('app/app.module.js') ?>"></script>
	<script src="<?= asset('app/hamburgers/hamburgers.controller.js') ?>"></script>
	<script src="<?= asset('app/hamburger/hamburger.controller.js') ?>"></script>

Now, if you were to go to http://localhost/burgerpedia, you will see our main template loaded but nothing would work since we have not yet defined the AnuglarJS hooks. Here is a screenshot of what things currently look like:

In the next tutorial, we will go ahead and connect AngularJS to our view

Previous Step: Basic Validations
Next Step: Getting familiar with AngularJS

Tutorial Contents
Burgerpedia – Tutorial Introduction Part 1 – Installing Laravel Part 2 – Creating the Database Tables using Migrations Part 3 – Seeding the Database Tables Part 4 – Creating the Models and the Relationships Part 5 – Setting up the Routes Part 6 – Creating the Controllers Part 7 – Basic Validations Part 8 – Integrating AngularJS and Bootstrap Part 9 – Getting familiar with AngularJS Part 10 – AngularJS Modules Controllers and Templates Tutorial Conclusion
Tutorial Resources
View the tutorial live View tutorial on GitHub Download the tutorial

Tags: AngularJS Bootstrap Laravel

Mifty Yusuf is a Montreal-based software developer who enjoys playing with new web technologies as well as comic books and illustrations. He beleives that, no matter what the question is, the answer is always Batman!