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

in AJAX/HTML/CSS/jQuery/Javascript/Laravel/PHP/Tutorials & Samples/Web Development

Part 9 – Getting familiar with AngularJS

Note #1: OK, prior to this tutorial, I had zero experience with AngularJS. Don’t get me wrong. I heard about AngularJS and knew that it could do some really amazing stuff but I had never actually used it. So, I decided to read a few articles and tutorials and was able to get my AngularJS pages up-and-running in less than a day. So, if there are things that I am doing wrong with Angular, or things that could be improved, please let me know in the comments section.

Note #2: I am absolutely in love with Angular! The simplicity of the framework along with how quickly you can be up and running is unbelievable! It literally took me about 1 hour to get the entire front-end of Burgerpedia done with AngularJS. And it only took that long because I had no idea what I was doing at the beginning.

i-heart-angular

Bootstraping to our Static Template

Now lets get started on Angular. In the previous tutorial, I had a Laravel file called hamburgers.php that contained my Laravel application. Inside this file, I made a connection to my AngularJS frontend by defining the following in my <html> tag


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

This line attaches our AngularJS application, called Burgerpedia to the html tag, giving it control over all elements inside the html tag. Don’t worry, we will be defining BurgerPedia a little later…

The ng-app attribute represents an Angular directive, named ngApp. This directive is used to flag the HTML element that Angular should consider to be the root element of our application. This gives application developers the freedom to tell Angular if the entire HTML page or only a portion of it should be treated as the AngularJS application. In the my case, I wanted the Burgerpedia application to have full control so I placed it inside the html tag.

What I have done is known as bootstrapping Angular the application using the ngApp. Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse clicks, key presses or incoming HTTP responses) that might change the model. Once such an event occurs, Angular detects if it caused any model changes and if changes are found, Angular will reflect them in the view by updating all of the affected bindings.

At the bottom of the burgers.php file, I have included all the various Javascript files that we will needed. Here is what was added 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 let’s go through each of the files and why they are needed. Lets start with the various framework files that are included:

  • angular.min.js: contains the core Angular framework. This is all you need to get your Angular app running.
  • angular-route.min.js: This module provides routing and deep-linking services and directives for Angular apps. We need this library to tell us which controller to use for which route. As of AngularJS version 1.2+, you must include ‘ngRoute’ as an dependency by including this file
  • jquery.min.js: This is the jQuery library. All Bootstrap javascript plugins require jQuery but jQuery is not included within the Twitter Bootstrap download.
  • Bootstrap.min.js: contains all Bootstrap Javascript plugins in a single file.

Next, we’ll look at the 3 application-specific Javascript files that are included:

  • app.module.js: contains our core BurgerPedia module
  • hamburgers.controller.js: contains the controller logic for the hamburgers list view
  • hamburger.controller.js: contains the controller logic for a detailed hamburger view along with all its descriptions

We will explore the contents of all 3 application-specific files later in the next chapter but for now, lets understand views and templates in Angular a little bit better

Angular Views and Templates

Inside burgers.php, I made a hook for my AngularJS views by adding the following lines:

 

    <div id="main">
        <!-- this is where content will be injected -->
        <div ng-view></div>
    </div>

AngularJS supports Single Page Application (SPA) via multiple views on a single page. To do this AngularJS has provides ng-view and ng-template directives. The ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration. This section is important because it defines the various views that AngularJS should load based on where we are on our Single Page Application.

In Angular, the view is a projection of the model through the HTML template. This means that whenever the model changes, Angular refreshes the appropriate binding points, which updates the view. For the Burgerdia frontend, we will need 2 views:

  • One view to list all of our hamburgers (hamburgers.template.htm)
  • One view for a single hamburger and its descriptions (hamburger.template.htm)

We will bind each view to a controller using the scope. A scope can be seen as the glue which allows the template, model, and controller to work together. Angular uses scopes, along with the information contained in the template, data model, and controller, to keep models and views separate, but in sync. Any changes made to the model are reflected in the view; any changes that occur in the view are reflected in the model.

Directory Structure

Because AngularJS can be used to develop largescale applications, the folder structure that you setup at the beginning of your project is very important. In fact, they have an entire section in the AngularJS tutorial dedicated to Directory and File Organization. According to official Angular documentation:

It might be tempting, for the sake of simplicity, to put everything in one file, or have one file per type; e.g. all controllers in one file, all components in another file, all services in a third file, and so on. This might seem to work well in the beginning, but as our application grows it becomes a burden to maintain. As we add more and more features, our files will get bigger and bigger and it will be difficult to navigate and find the code we are looking for.

Instead we should put each feature/entity in its own file. Each stand-alone controller will be defined in its own file, each component will be defined in each own file, etc.

Now that we know this important fact, this explains why I have created an app directory inside the javascript directory. Inside the App directory is where all my app-related javascript files and their corresponding templates are located. I have grouped my files into directories by feature. Since we have a section in our application that lists hamburgers, we will put all related files into a hamburgers/ directory under app/. We also have another part of our application that shows the details of a specific hamburger. This is located in the hamburger/ directory under app. So our final directory structure for the angular application looks like so:

app/

  hamburgers/

    habmburgers.controller.js

    phone-list.component.spec.js

  hamburger/

    phone-list.component.js

    phone-list.component.spec.js

  app.module.js

In the next section, we will actually analyze the module, controller and template files

Previous Step: Getting familiar with AngularJS
Next Step: AngularJS Modules Controllers and Templates

Tutorial Contents
Tutorial Resources

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!

4 Comments

  1. {{hamburger_name}}
    added by {{hamburger_author}} on {{hamburger_created_date}}
    {{hamburger_overview}}

    i am getting this as output, can you tell me where i did mistake?

Leave a Reply

Your email address will not be published.

*

Latest from AJAX

Go to Top