Apps in AngularJS
Kent Elchuk explains how to quickly build AngularJS applications for the web and how to customise their look and feel.
Kent Elchuk explains how to build AngularJS applications for the web in no time at all and feel like you’re launching your very own dot com business. We’re old aren’t we?
This tutorial is an extension of a JQuery and AngularJS article we published previously [see Tutorials, p88, LXF218]. If you’ve read that tutorial or have the coding sample that will help. If not, you can still follow along as this tutorial is about extending AngularJS’s appearance and functionality. We’ll be covering how to add a new theme to a one-page application; using AngularJS to create image galleries; the everyday features used in basic web development and changing its appearance with Bootstrap, CSS and JQuery.
The main file that’s run is called index.php. As a refresher, the specialised content that runs for each page, such as / about, is delivered via a script.js file and delivered into the ng-view directive, which makes packaging the code you want for each page straightforward. One major change from our original simple application is that all the files need to be PHP this time rather than HTML. To make this change, the routes are altered in script.js and the files are just renamed with . php extensions. Why do we need to do this? This means we can post the contact form to a PHP file for processing and sending email to the site owner. We’ll cover this later.
We also have two other small additions: an image for the home page and a new page called gallery. We’ve supplied the gallery with several categories. Thus, when you select your category, only images for that category are displayed. When an image is clicked, a popup of the image picture is displayed. We’ll describe the gallery in more detail later.
Use Bootstrap
In the modern era of web development, responsive design has become the standard. In this tutorial, we use Bootstrap as our responsive framework. Other examples of responsive frameworks are Skeleton CSS and Foundation. Also, many template makers have built their own frameworks, such as Theme Fusion. However, since Bootstrap is very popular, it has great documentation and is easy to use. The framework uses a grid system. This means you have a row with a set amount of columns for which you can set various breakpoints: e.g. under 576px (pixels) for small phone screens; 768px for tablets; 992px for larger devices and 1,200px for large devices. Before we move on to the breakpoints and how to deal with them, we’ll make using Bootstrap an easy process.
The first thing we want to enforce is that each section is a row. In fact, everything in a row will be surrounded by <div class="row"></div>. Make extra note of the row class which is applied to the div element. Typically, columns are inside the div element. The key here is that all columns can add up to a maximum of 12. Assuming that you want three equal columns in your Bootstrap row, you’d use the following code block: <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div>
Since the row evenly accepts a number adding up to 12, each column has the class col-md-4 since the three fours
add up to twelve. Although that looks simple, these columns are slammed side by side into a row without any separation. To fix this issue and make three stacked columns with some separation, you can add another row within each <div class="col-md-4"></div> tag. In fact, once you have one main row and made the desired columns, each column can contain as many nested rows as you want to give it.
The about.php file included with this tutorial pages has a three-column layout. However, let’s continue and turn it into a clean three-column layout. To make all the columns the same height, you can apply the row-eq-height class to the top row with <div class="row row-eq-height” . With Bootstrap, the class could be missing, so you may need to add it yourself.
The easiest way to add new CSS code to your application is to create a CSS file called style.css and add it to the root folder. To make it accessible, open the file index.php and add the line into the head under the other CSS links: <link rel="stylesheet" href="style.css" />
In the style.css file add the following code: .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
As you can see, the little snippet adds properties to the row-eq-height class which makes it flex and allows each column to be of equal height.
AngularJS forms
This simple form can be used to collect data from a user and add the data to a database and send the results via email. This particular form has form fields for name, phone, email, message and a hidden input with a random string to protect from cross-site request forgery. The actual form is added to the /contact page and includes a new controller that triggers on click and sends the post data for processing, which in this case is sending an email. The controller used in this example is called contactController. You can find that in the /contact. php file included with this tutorial. Here’s the form input: <input type="text" size="40" name="email" ng-model="email" placeholder="Email" value="{{email}}" ng-pattern="/^[_a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\. [a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$/" required>
The first input is type="text" which is the standard for a text input field. The second attribute, size="40" , refers to the width. The third attribute, name="email" , refers to the name of the input; it’s critical because it identifies the item when all data is posted, emailed or stored in the database. The ng-model is the important Angular part of the input. Inside script.js, any code that’s added into the input field translates into $scope.email.
The placeholder is just the text a user sees inside the form that briefly describes something. In this case, it reminds the user to include their email address in the input box. The value is what the user enters into the form. With AngularJS, it has scope; thus the value that is added and displayed through the {{email}} tags is also the same as the $scope.email.
The next attribute ng-pattern does a check to ensure that the email address follows the proper pattern of a real email address. Thus, test@example.com would pass, but something like ‘blah’ or blash@example would fail. Finally, the required entry means that filling out this text input is required or the form won’t submit.
Since we are posting data with AngularJS and using PHP as the server-side language, the first step is to change the route from contact.html to contact.php. After that, the controller, contactController is added to the bottom of script.js to ensure the form is handled correctly. Again, you’ll notice a pattern. An enclosed controller, named ng-controller in the HTML view, has a matching controller name in the file script.js because that’s where the code exists for handling the controller. In this particular case, the check_credentials() function is surrounded by an ng-click directive. When the user submits the form, you can see the logic used to handle this submission is wrapped within the $scope.check_credentials = function () {} scope.
It’s inside this function that the error-checking and post request takes place. I’ll guide you through that next process. The code block below shows the basics of a post request:
var request = $http({ method: “"post", url: "post.php", data: {
email: $scope.email,