AngularJS Tutorial - Building a Web App in 5 minutes

(/)

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

Rss (/rss) Privacy (/privacy) Posts (/posts) Workshops (/workshops)

Login (/login) to save your bookmarks.

GET CODING HELP NEW! (/HELP/REQUES

New? Create an account

LEARN (/LEARN) > POSTS (/POSTS) > ANGULARJS () > NICK KAYE

AngularJS Tutorial - Building a Web App in 5

minutes

(/about)

Nick has more than 20 years of experience building web applications for
companies like Chase, Nintendo, and General Electric.

Table of Contents
1 Introduction
2 Is it easy to build my own web app?
3 AngularJS Tutorial: Business
Website
4 Best Practices: Why Do We Care?
4.1 Good Code vs. Bad Code
4.2 AngularJS is a Great Solution
4.3 Better App Development
4.4 Blank Canvas
5 What exactly is AngularJS?
6 AngularJS is Easy to Implement
7 Excellent architecture with
AngularJS

1 Introduction
Whats the essential advantage of Angular? Whether youre a beginner building your
own website, or a professional seeking an edge on how to learn better app building,
this AngularJS tutorial is a great investment of 5 minutes to learn the best practices of
creating apps from a veteran software engineer and AngularJS expert.

7.1 Use Templates for Site Wide

Elements
7.2 Dynamically Load HTML Partials
for Content Pages
7.3 Use AngularJS Directives to
Enable Page Interaction
7.4 Use AngularJS Routes to handle
virtual URLs
7.5 Use AngularJS Controllers to
bring it all together
8 Best Practice = Best Outcome

DOWNLOAD: The Github repository of this AngularJS web app is available here

9 Follow Up: Say Hi!

(https://github.com/airpair/T0021-airpair-angularjs-tutorial).

2 Is it easy to build my own web app?

Yes. In the future (now) a creative person with even a modest knowledge of HTML, CSS
and Javascript can build a proper contemporary single page web site. Out there on

1 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

The Internet, Super-hardcore geeks are working together to solve all of the common
problems of web development by building modular, reusable solutions. These open
source projects put simple, powerful tools in the nimble hands of creative people.
Powerful tools like AngularJS.

3 AngularJS Tutorial: Business Website

(/about)

A local company, ACME Manufacturing, has asked us to build a new www.acme.com.

The basic areas will be:
Pages
Home
Services
Pricing
About
FAQ
Contact
Blog
List of Posts
View Post

To skip over the construction of a basic static website, well implement a free website
theme (https://wrapbootstrap.com) based on Bootstrap (http://getbootstrap.com/). For
this example we'll use, http://startbootstrap.com/modern-business
(http://startbootstrap.com/modern-business). We download the website template and
unzip it.
The original le structure is as one might expect in such a website template. We have a
css folder, js folder, and a whole lot of html les.

4 Best Practices: Why Do We Care?

Lets focus on index.html for a moment.
What do we aspire for our index.html to be? Anyone whos played with web
development at all has seen plenty of versions of index.html. But whats the best
practice, and why do we care?
Heres how the free website templates index.html looks in the browser:

2 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

(http://airpair-blog.s3.amazonaws.com/wp-content/uploads/2014/07/websitetemplate-legacy.png)
Theres the Navigation (at the top), and the Home Page of the site (all the content in the
middle). Everything looks ne.. right?

4.1 Good Code vs. Bad Code

Behind the scenes, this free website templates code is a mess.
If we use this website template as-is, the mess is going to keep forcing us to do extra
work over and over again, creating needless drag for all coders working on this project,
for as long as it stays online.
The problem is, this and every other .html le in this free website theme (e.g.
about.html, services.html, etc.) contains an extra copy of each and every piece of the
whole website!
Thats an awful lot of repeated HTML. And one contemporary web development
mantra that has brought a signicant increase of quality across the industry is: DON'T
REPEAT YOURSELF (http://en.wikipedia.org/wiki/Don).

4.2 AngularJS is a Great Solution

Angular is both the fastest road to a Minimally Viable Product (http://en.wikipedia.org
/wiki/Minimum_viable_product), and the most Future-Proof (http://en.wikipedia.org
/wiki/Future_proof) way for us to implement a proper contemporary single page web
app that will address all foreseeable needs, from the simplest Website to the most
complicated Web Application.
We dream of an index.html that functions as a standard for our entire website, in
order to help us avoid repeating ourselves in all those other html les. In this dream
future, we could change a site wide element (such as the navigation menu at the top of
the page) with a single line of code, to alter its appearance across all of the pages of the
website at once!
For simplicity, were going to pull it o with just regular ol static html, css, and

3 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

javascript les hosted on any basic website hosting service.

4.3 Better App Development

Well download a new index.html from the open source project HTML5 Boilerplate
(http://html5boilerplate.com/) (replacing the one we downloaded from the free
website theme) because the index.html from HTML5 Boilerplate implements superior
site wide practices.

(/about)

index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>

markup

<html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<!-- Meta-Information -->
<!-- etc -->
<!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com -->
<!-- etc -->
<!-- Our Website CSS Styles -->
<link rel="stylesheet" href="css/main.css">
Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

Notice (Our Website Content Goes Here) weve gutted the inside of the index.html ,
so all we are left with is a best-practice blank canvas.

4.4 Blank Canvas

Now, lets open this index.html le in our web browser.
It appears to be completely empty.

(http://airpair-blog.s3.amazonaws.com/wp-content/uploads/2014/07/empty-

4 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

new-index.png) Fear not! All is well. This blank canvas is the foundation of our ability to
separate our site wide concerns such as browser compliance and linking vendor
dependencies. All of those things are functioning correctly in the background, thanks
to our new index.html.

5 What exactly is AngularJS?

(/about)

Google describes Angular as what HTML would have been, had it been designed for
building web-apps. Bearing that in mind, lets take another look at our index.html, this
time using Firefox Developer Tools Firebug 3D View (https://developer.mozilla.org
/en-US/docs/Tools/3D_View):

(http://airpair-blog.s3.amazonaws.com/wp-content/uploads/2014/07/3d-viewof-template-page.png)
We see that HTML is already capable of describing a very organized Document Object
Model (DOM). The essential point of Angular is that we can harness the existing model
to create interactive experiences, instead of cluttering the code with new paradigms.
Interaction is driven by real people through their screens. Angular brings the DOM to
life; our page will be born interactive, without the clutter of having to write computer
code for every single aspect of things (e.g. loading sub-page templates, or populating
lists of items from data) that are actually relatively easy to say in plain language. When
Angular loads (and this is why we placed our 1 line of code at the end of the ) it will
look at the page and bring it to life based on extra information we have placed inside
of our HTML tags.

6 AngularJS is Easy to Implement

Enter the Dragon: Angular.
Like any good clean vendor dependency, this super-weapon is ours to wield in only a
single line of code.

5 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

We add this 1 line just before the end of the of our index.html:
markup
<html>
<body>
<span>this app is so cool</span>
<p>its straight up magic</p>
<span class="highlight"><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js
</body>
</html>

Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

(/about)

7 Excellent architecture with AngularJS

7.1 Use Templates for Site Wide Elements
Probably the most obvious site wide element wed like to unify in a single location is the
Navigation menu. Almost every Website or App has one.
Well dream big, and create a le templates/header.html that contains only the
Navigation menu HTML, without anything else cluttering up the le.
Furthermore, we wont repeat ourselves! Well remove all the other copies of the HTML
of the navigation menu from all of the other .html les in our website.
Heres our nal templates/header.html:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- etc -->
<!-- Collect the nav links, forms, and other content for toggling -->

markup

<div class="collapse navbar-collapse navbar-ex1-collapse">

<ul>
<li><a href="<span class="highlight">#/services</span>">Services</a></li>
<li><a href="<span class="highlight">#/pricing</span>">Pricing Table</a></li>
<li><a href="<span class="highlight">#/about</span>">About</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

Highlighted above, were dreaming really big with our URLs. Using a very powerful
aspect of Angular called Routes, well be able to bring those hashes to life as well!

7.2 Dynamically Load HTML Partials for Content Pages

Now, how awesome would it be if we could somehow transform all of those other
.html les from the free website theme?
We would like to remove all the redundant copies of the .. and .. and all the other
HTML. After all, we no longer want all those parts, now that were using our much
better HTML5 Boilerplate index.html.
We would like all those other .html les to be trimmed down, containing only the parts
of the content that are unique to each page.

6 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

Lets start with the About page. Well cut out just the content from the original .html le
from the free website theme. Then create a new le, partials/about.html and paste
only the unique content for the About page into this new .html le.
Heres the nal partials/about.html:
<div class="container">

markup

<div class="row">

(/about)

<div class="col-lg-12">
<span class="page-header">About
<small>It's Nice to Meet You!</small>
</span>
</div>

</div>
<!-- etc., more information about the company. -->
</div>
Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

Wow! So isolated, our concerns. Organized we are.

We repeat this process for all of the other pages in our website, creating les such as
partials/pricing.html and partials/services.html, etc.

7.3 Use AngularJS Directives to Enable Page Interaction

Are we ready to learn Kung Fu? We add a few Angular custom attributes to some
otherwise standard HTML tags. Take a look at our new index.html:

7 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->

markup

<head>

(/about)
<!-- Meta-Information -->
<!-- etc -->
<!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com -->
<!-- etc -->
<!-- Our Website CSS Styles -->
<link rel="stylesheet" href="css/main.css">
Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

Instead of cluttering up our index.html with a lot of content thats proprietary to the
individual sub-pages, weve used Angular Directives isolated it to a stack of side-wide
horizontal layers of functionality.
The ng-app directive binds the Angular app to this single pages html body.
<body <span class="highlight">ng-app="tutorialWebApp"</span>>

markup

Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

The ng-include directive eortlessly performs all of the heavy lifting required to load
our isolated site wide template le templates/header.html.
<div <span class="highlight">ng-include='"templates/header.html"'</span>></div>

markup

Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

Awesomely, the ng-view directive provides an automatic container, into which Angular
Routes will seamlessly include our page content templates/*.html
<div <span class="highlight">ng-view</span>></div>

markup

Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

7.4 Use AngularJS Routes to handle virtual URLs

Well simply write some Javascript inside of the now-empty js/main.js le. As foretold,
Angular Routes provides the framework to load partial html pages, e.g.
partials/page.html is loaded when a user clicks on the URL #/page An Angular
Controller connects the dots, enabling all of the if this then that to actually allow our
website or web app to function.

8 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

/**
* Main AngularJS Web Application
*/
var app = angular.module('tutorialWebApp', [
'ngRoute'
]);

markup

/**
* Configure the Routes
*/
app.config(['$routeProvider', function ($routeProvider) {
(/about)
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", <span class="highlight">controller: "PageCtrl"
// Pages
.when("/about", {templateUrl: "partials/about.html", <span class="highlight">controller: "PageCtrl"
.when("/faq", {templateUrl: "partials/faq.html", <span class="highlight">controller: "PageCtrl"
/* etc routes to other pages */
// Blog
Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

See the highlighted sections above? Weve touched on the nal concept of this tutorial,
Angular Controllers. In the next and nal step, well create each of these Controllers
weve described in the route conguration above.

7.5 Use AngularJS Controllers to bring it all together

An Angular Controller connects the dots, enabling all of the if this then that to
actually allow our website or web app to function.
/**
* Controls the Blog
*/
app.controller('BlogCtrl', function (/* $scope, $location, $http */) {
console.log("Blog Controller reporting for duty.");
});

markup

/**
* Controls all other Pages
*/
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
console.log("Page Controller reporting for duty.");
// Activates the Carousel
$('.carousel').carousel({
interval: 5000
});
// Activates Tooltips for Social Links
Get expert markup help (/find-an-expert?utm_source=airpair.com&utm_campaign=posts-{{campPeriod}}&utm_content={{vie

8 Best Practice = Best Outcome

AngularJS is actually made of science, but it sure does feel like magic.
Our nal product looks a lot like the original (a bunch of .html les) except its
lightning-fast and operates within a single page. More importantly, its ready for
much, much more bells and whistles as we delve deeper into the other things that
AngularJS can do.

9 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

(/about)

(http://airpair-blog.s3.amazonaws.com/wp-content/uploads/2014/07
/4xScreenshots.png)
View the nal working demo:

http://airpair.github.io/demos/2014/09/T0021-

airpair-angularjs-tutorial (http://airpair.github.io/demos/2014/09/T0021-airpairangularjs-tutorial)
Final source code is available on GitHub:

https://github.com/airpair/T0021-airpair-

angularjs-tutorial (https://github.com/airpair/T0021-airpair-angularjs-tutorial)

9 Follow Up: Say Hi!

I hope youve enjoyed this AngularJS tutorial as much as I enjoyed deep-diving into
these methodologies. Im passionate about quality engineering and user-driven
machine interaction design. If these methodologies have been helpful, or if you have a
specic question about Angular, please let me know Ill be happy to work with you.
www.nickkaye.com (http://www.nickkaye.com)

Like this post? Get angularjs content like this by email

Enter your email address

Send to "Your Name <>"

10 of 11

12/23/2014 7:34 PM

AngularJS Tutorial - Building a Web App in 5 minutes

https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

(/about)

This post is categorized under

angularjs (/posts/tag/angularjs)
javascript (/posts/tag/javascript)

Similar posts
(https://www.airpair.com AngularJS: From
/angularjs/posts/angularjsPrototyping to
from-prototypingFunctional Code
to-functional-code
How to scale a simple
angularJS prototype into
angularjs
a shippable and
maintainable product

Fernando
Villalobos
06 Dec, 2014

11 of 11

Recent posts (/posts)

(https://www.airpair.com
/angularjs/posts/jquery
angularjs-comparisonmigration-walkthrough
angularjs
jquery
javascript

Daniel
Lamb
28 Nov, 2014

jQuery vs.
AngularJS: A
Comparison and
Migration
Walkthrough
JavaScript expert Daniel
Lamb contrasts
AngularJS with jQuery
and shows how to

(https://www.airpair.com AngularJS
/angularjs/posts/angularjsPerformance in
performance-largeLarge Applications
applications
AngularJS expert
Abraham Polishchuk
angularjs
walks through
javascript
strategies to maximize
performance in large
Angular apps.
abraham
polishchuk
27 Nov, 2014

12/23/2014 7:34 PM