angularjs tutorial - building a web app in 5 minutes.pdf

(/) Rss (/rss) Privacy (/privacy) Posts (/posts) Workshops (/workshops) GET CODING HELP NEW! (/HELP/REQUEST

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

AngularJS Tutorial - Building a Web App in 5minutes

Nick has more than 20 years of experience building web applications for

companies like Chase, Nintendo, and General Electric.

1 Introduction

What’s the essential advantage of Angular? Whether you’re 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.

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

(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

New? Create an accountLogin (/login) to save your bookmarks.

Table of Contents1 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

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

9 Follow Up: Say Hi!

(/about)

AngularJS Tutorial - Building a Web App in 5 minutes https://www.airpair.com/angularjs/building-angularjs-app-tutorial#7-4-us...

1 of 11 12/23/2014 7:34 PM

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

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, we’ll 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 file structure is as one might expect in such a website template. We have a

css folder, js folder, and a whole lot of html files.

4 Best Practices: Why Do We Care?

Let’s focus on index.html for a moment.

What do we aspire for our index.html to be? Anyone who’s played with web

development at all has seen plenty of versions of index.html. But what’s the best

practice, and why do we care?

Here’s how the free website template’s index.html looks in the browser:

(/about)


2 of 11 12/23/2014 7:34 PM

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

template-legacy.png)

There’s the Navigation (at the top), and the Home Page of the site (all the content in the

middle). Everything looks fine.. right?

4.1 Good Code vs. Bad Code

Behind the scenes, this free website template’s 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 file 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!

That’s an awful lot of repeated HTML. And one contemporary web development

mantra that has brought a significant 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 files. 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, we’re going to pull it off with just regular ol’ static html, css, and

(


3 of 11 12/23/2014 7:34 PM

javascript files hosted on any basic website hosting service.

4.3 Better App Development

We’ll 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.

index.html

Notice (“Our Website Content Goes Here”) we’ve gutted the inside of the index.html ,

so all we are left with is a best-practice blank canvas.

4.4 Blank Canvas

Now, let’s open this index.html file in our web browser.

It appears to be completely empty.

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

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

<!DOCTYPE html>









<html class="no-js"> 

<head>











<link rel="stylesheet" href="css/main.css">

markup

(/about)


4 of 11 12/23/2014 7:34 PM

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?

Google describes Angular as “what HTML would have been, had it been designed for

building web-apps”. Bearing that in mind, let’s 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-view-

of-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.

(/about)


5 of 11 12/23/2014 7:34 PM

We add this 1 line just before the end of the of our index.html:

7 Excellent architecture with AngularJS

7.1 Use Templates for Site Wide Elements

Probably the most obvious site wide element we’d like to unify in a single location is the

Navigation menu. Almost every Website or App has one.

We’ll dream big, and create a file templates/header.html that contains only the

Navigation menu HTML, without anything else cluttering up the file.

Furthermore, we won’t repeat ourselves! We’ll remove all the other copies of the HTML

of the navigation menu from all of the other .html files in our website.

Here’s our final templates/header.html:

Highlighted above, we’re dreaming really big with our URLs. Using a very powerful

aspect of Angular called Routes, we’ll 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 files 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 we’re using our much

better HTML5 Boilerplate index.html.

We would like all those other .html files to be trimmed down, containing only the parts

of the content that are unique to each page.


<html>

<body>

<span>this app is so cool</span>

<p>it’s straight up magic</p>

<span class="highlight"><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js

</body>

</html>

markup


<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="container">





<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>



</div>



</nav>

markup

(/about)


6 of 11 12/23/2014 7:34 PM

Let’s start with the About page. We’ll cut out just the content from the original .html file

from the free website theme. Then create a new file, partials/about.html and paste

only the unique content for the About page into this new .html file.

Here’s the final partials/about.html:

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

We repeat this process for all of the other pages in our website, creating files 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:


<div class="container">

<div class="row">

<div class="col-lg-12">

<span class="page-header">About

<small>It's Nice to Meet You!</small>

</span>

</div>

</div>



</div>

markup

(/about)


7 of 11 12/23/2014 7:34 PM

Instead of cluttering up our index.html with a lot of content that’s proprietary to the

individual sub-pages, we’ve 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 page’s html body.

The ng-include directive effortlessly performs all of the heavy lifting required to load

our isolated site wide template file templates/header.html.

Awesomely, the ng-view directive provides an automatic container, into which Angular

Routes will seamlessly include our page content templates/*.html

7.4 Use AngularJS Routes to handle virtual URLs

We’ll simply write some Javascript inside of the now-empty js/main.js file. 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.


<!DOCTYPE html>









<html class="no-js"> 

<head>











<link rel="stylesheet" href="css/main.css">

markup


<body <span class="highlight">ng-app="tutorialWebApp"</span>> markup


<div <span class="highlight">ng-include='"templates/header.html"'</span>></div> markup


<div <span class="highlight">ng-view</span>></div> markup

(/about)


8 of 11 12/23/2014 7:34 PM

See the highlighted sections above? We’ve touched on the final concept of this tutorial,

Angular Controllers. In the next and final step, we’ll create each of these Controllers

we’ve described in the route configuration 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.

8 Best Practice = Best Outcome

AngularJS is actually made of science, but it sure does feel like magic.

Our final product looks a lot like the original (a bunch of .html files) except it’s

lightning-fast and operates within a single page. More importantly, it’s ready for

much, much more bells and whistles as we delve deeper into the other things that

AngularJS can do.


/**

* Main AngularJS Web Application

*/

var app = angular.module('tutorialWebApp', [

'ngRoute'

]);

/**

* Configure the Routes

*/

app.config(['$routeProvider', function ($routeProvider) {

$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

markup


/**

* Controls the Blog

*/

app.controller('BlogCtrl', function (/* $scope, $location, $http */) {

console.log("Blog Controller reporting for duty.");

});

/**

* 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

markup

(/about)


9 of 11 12/23/2014 7:34 PM

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

/4xScreenshots.png)

View the final working demo: http://airpair.github.io/demos/2014/09/T0021-

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

angularjs-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 you’ve enjoyed this AngularJS tutorial as much as I enjoyed deep-diving into

these methodologies. I’m passionate about quality engineering and user-driven

machine interaction design. If these methodologies have been helpful, or if you have a

specific question about Angular, please let me know I’ll 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 <>"

(/about)


10 of 11 12/23/2014 7:34 PM

Recent posts (/posts)

This post is categorized under

angularjs (/posts/tag/angularjs)

javascript (/posts/tag/javascript)

Similar posts

AngularJS: From

Prototyping to

Functional CodeHow to scale a simpleangularJS prototype intoa shippable andmaintainable product

(https://www.airpair.com/angularjs/posts/angularjs-from-prototyping-to-functional-code

angularjs

Fernando

Villalobos

06 Dec, 2014

jQuery vs.

AngularJS: A

Comparison and

Migration

WalkthroughJavaScript expert DanielLamb contrastsAngularJS with jQueryand shows how to

(https://www.airpair.com/angularjs/posts/jqueryangularjs-comparison-migration-walkthrough

angularjs

jquery

javascript

Daniel

Lamb

28 Nov, 2014

AngularJS

Performance in

Large ApplicationsAngularJS expertAbraham Polishchukwalks throughstrategies to maximizeperformance in largeAngular apps.

(https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications

angularjs

javascript

abraham

polishchuk

27 Nov, 2014

(/about)


11 of 11 12/23/2014 7:34 PM

angularjs tutorial - building a web app in 5 minutes.pdf

Documents