AngularJS Quickstart for Designers

Within the past year, our organization has gone through some major technology changes. Although the changes have been productive for our developers, they often result in some amount of challenges for designers, as we need to keep up with the rapid pace of change. As a designer, I am always looking for tools to bridge that gap between designers and developers – with the main goal being to get prototypes up and running as quickly as possible.

Now that much of our development is being done using APIs, I decided to take some time to try and learn something new in hopes of making me more productive and improve our design and development processes. In that short time, I discovered AngularJS – made available by the folks at Google. For me, AngularJS has become a good tool for fast and easy prototyping. In the past, I’ve often relied on our developers to setup our development environments, access to a database, or even explain to me some technical aspects of a project. With AngularJS, I’m able to get up and running without many resources and learn some technical things along the way. This makes it so I don’t have to spend time waiting for someone else – plus it’s always good to learn something new every once in awhile.

For this post, I’ll walk through the process of creating a simple AngularJS app and go over some of the key development concepts. By the end of it, you’ll be up and running with a simple multi-page app that uses a mocked API for displaying content.

Getting started

The first thing I liked about AngularJS was how easy I was able to get going. Because the application you are creating is all Javascript, you don’t need much in terms of a server. Any web server that supports HTML/JS will suffice. For this demo, I’ll be using my UW Staff homepage:

http://staff.washington.edu/charlon/angular-demo

I typically start with a basic HTML5 page structure (i.e. HTML5 Boilerplate) and make any modifications to add additional libraries such as including Bootstrap, jQuery, and AngularJS through various content delivery networks (CDNs). I also include 2 Javascript files at the very end that will serve as the main code to power much of our demo application.

Tip: CDNs are a great way to include any library without having to download and install them. I’ve gone to strictly using CDNs for many of my development projects as it’s become a great time saver.

index.html

<!DOCTYPE html>
    <html data-ng-app="demoApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Angular Demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- bootstrap -->
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

    </head>
    <body>

        <div class="container">
            <div class="navbar">
                <div class="navbar-inner">
                    <a href="#/" class="brand">Title</a>
                    <ul class="nav">
			<li><a href="#/posts">Posts</a></li>
                        <li><a href="#/about">About</a></li>
                    </ul>
                </div>
            </div>

            <!-- placeholder for views -->
            <div data-ng-view=""></div>

        </div>
        
        <!-- jquery/angular -->
        <script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

        <!-- app javascript -->
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>

    </body>
</html>

You will want to take notice of a couple things within the markup that are specific to AngularJS.

AngularJS uses a custom attribute “ng-” as a way to interact with the HTML. This is simply a shortcut to the “data-” attribute commonly associated with HTML5. Although you don’t have to add the “data-”, I prefer to use both attributes in conjunction (i.e. “data-ng-”) for code readability and validation.

Modules and Routes

We’ll use “app.js” to initialize our application “module” and define our “routes”. Modules are basically containers for the application or specific plugin functionality. For this demo, the entire HTML markup will contain the app and therefore, the module is initialized at a very high level. Simply put, anything found between the “html” code block will contain the “demoApp”.

The “data-ng-view” block will be used as a placeholder for the demoApp. AngularJS now knows that anything being outputted to the user for the demoApp will be done inside of that code block.

index.html

<html data-ng-app="demoApp">
...
    <div data-ng-view=""></div>
... 
</html>

app.js

// app module
var demoApp = angular.module('demoApp', []);

Routes provide a connection between a “view” and “controller” – through the use of a URL. The routes are defined within a module config and basically tells AngularJS how to pair a “view” template with a “controller” based on a given URL the user is requesting. In the case of this demo, I have 2 views (welcome.html and about.html) each paired with their own controllers that add some logic to the views. Whenever the users visits a URL (i.e. http://staff.washington.edu/charlon/angular-demo/#/about), AngularJS knows that it should use “about.html” and “AboutController” and render that output back to the user.

app.js

// routes
demoApp.config(function ($routeProvider) {

   $routeProvider
    .when('/',
        {
            controller: 'HomeController',
            templateUrl: 'views/welcome.html'
        })
    .when('/about',
        {
            controller: 'AboutController',
            templateUrl: 'views/about.html'
        })
    .otherwise({ redirectTo: '/' });
});

Controllers and Views

Controllers provide logic to the application. The “controller.js” file will contain the controllers that we specified in our routes earlier. Functionality within a controller can only be used by a view that was given permission to access it via the routes. In a later example, we’ll do something more advanced like working with data. For now, we’ll declare a simple variable called “header” within each controller that will be displayed in the view.

controller.js

// home controller
demoApp.controller('HomeController', function ($scope) {
    $scope.header = "Welcome to my Angular demo";
});

// about controller
demoApp.controller('AboutController', function ($scope) {
    $scope.header = "About";
});

Views are pretty much HTML snippets that comprise the app as a whole. Since the “route” makes the connection between the “view” and “controller”, the following view (about.html) is able to get a value for {{header}} which was declared in its controller (AboutController).

about.html

<div id="about">
    <h2>{{header}}</h2>
    ...
</div>

Mocking API data

Much of the initial demo can be done using static HTML methods. However, the really cool things about AngularJS (as well as other JS frameworks) is the ability to interact with APIs.

Many of our more recent projects are web-service-based applications where we are often interacting with an REST API. In terms of doing prototyping or basic HTML/CSS work, I wanted to mock actual data rather than copying/pasting many lines of static code. Since our developers were actively creating the APIs, why not use what they had made to create true visual representation of the data? Often times, I found that designing with fake data was not always ideal as I would have make code changes once my templates were hooked up to a real data source.

Going back to our demo, we’ll assume next that we want to display some blog post that we are accessing via a REST API. In order to get our mock data working, we simply add a new route to “app.js” that will handle displaying our blog data.

app.js

.when('/posts',
    {
        controller: 'PostController',
        templateUrl: 'views/posts.html'
    })

Mocked data

AngularJS is robust enough that it has built-in resources that will allow you to interact directly with a REST API. However for this example, the Post data will live inside of a controller (PostController) in the form of a JSON array.

Tip: Get sample JSON datasets from your developers! It’s a good way to be in the loop with the actual data that you will need to design for.

controllers.js

demoApp.controller('PostController', function ($scope) {

    $scope.header = "Posts";

    // define json for posts
    $scope.posts =  [{
        "id": "1",
        "title": "Vestibulum Id Ligular",
        "author": "bob",
        "intro": "Aenean lacinia bibendum",
        "extended": "Aenean lacinia bibendum nulla sed consectetur..."
    },{
...
    }];
});

The new view (post.html) uses a “data-ng-repeat” directive to iterate through all the post items.

post.html

<div id="posts">
    <h2>{{header}}</h2>

    <ul class="media-list">

	<!-- repeat list of posts -->
        <li class="media" data-ng-repeat="post in posts | orderBy: 'id'">
            <a class="pull-left" href="#"><img class="media-object" src="http://placehold.it/100x100"></a>
            <div class="media-body">
                <h4 class="media-heading">{{post.title}} <small class="muted">by: {{post.author}}</small></h4>
                <p>{{post.extended}}</p>
            </div>
        </li>

    </ul>
</div>

Once you visit the URL (http://staff.washington.edu/charlon/angular-demo/#/posts) , you should now see all the Post data contained in the JSON. Instead of having to manage many lines of HTML, you are now able to focus on the design of the actual data that you will be using.

I’ll continue this demo series in the upcoming blog posts with some more advanced concepts of AngularJS. For now, please feel free to download the demo at the following URL:

http://staff.washington.edu/charlon/angular-demo.zip

I hope you find it useful. Thanks!

Additional Resources

http://angularjs.org/
http://www.youtube.com/watch?v=i9MHigUZKEM
http://www.cheatography.com/proloser/cheat-sheets/angularjs/

Charlon Palacay

Charlon is a member of the ACA UX team.

One comment

  1. Gavin Elster · May 31, 2013

    Awesome article! You did a great job of walking through the project.

    We just started using Angular at ORIS and I’ve been chewing through a bunch of documentation and tutorials. We purchased the Show Me AngularJS video series, and it’s been incredibly helpful to getting on-boarded. Your demo has also been really useful—I look forward to your next article!