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.
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.
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
- 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.
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.
In the next section, we will actually analyze the module, controller and template files