Javascript UI development and Ajax frameworks have been pretty painful and tedious for as long as I can remember, but the past few years the constantly evolving landscape has given us new tools that make it just as simple as writing server side compiled code. We now have development tools that allow you to debug through javascript, watch variables and insert data into the debugging process and even change elements on the fly while debugging. However, the very nature of javascript and HTML combos lend themselves to be pretty messy.

Developers are constantly munging HTML and javascript together and writing javascript code inline to manipulate DOM elements. It can be a downright daunting task to go back and edit code you wrote a few months ago in frameworks like Dojo and ExtJS. I won’t even mention having to look over someone else’s code… It makes me want to shiver. It’s not always because the other person’s code is bad, it’s usually because they munged it all together in a different way than you do. This is all a reminder of the days when programmers intermingled ASP/JSP code into the same files as HTML. Luckily, on the server side, we have had Struts, Spring MVC and .NET MVC frameworks  just to name a few. These frameworks provide Model View Controller (MVC) architecture to separate presentation logic from business logic and aggregation logic. This is something that HTML and Ajax frameworks have been missing… until now.

AngularJS is just HTML and Javascript

AngularJS by Google is a really simple Javascript framework that gives you the ability to separate the parts of your web client application by concerns. Angular allows you to define clearly delineated Controller, Service and Model layers that are completely separate from the templates or HTML. In fact, it you look at an HTML template from an Angular application, it looks pretty much just like plain HTML and it fairly easy to read and understand. I will repeat, it is just HTML.

Let’s look at an example. Angular provides that most applications would be “single-page” meaning that you won’t ever transition away from the header and footer once you reach the index.html, but instead the “live area” of the page will change based on elements that you choose as you click links. Thanks to HTML 5 history mechanisms, the Url appears to change as you switch pages. This makes the application extremely fast since you aren’t loading anything but changes as you progress through the application.

Essentially, if you use Angular routing, you will map a url say /test to a controller object, this controller object will process data and pass data to the HTML partial that will be included into the live area. The controller will typically interact with one or more services. The data that is passed to the HTML partial is merely the model. This is typical MVC architecture. Now let’s see how my application is structured.

Directives

The power of Angular likes mostly in directives.  Without this functionality Angular wouldn’t be nearly as useful to anyone. Directives define functionality and are mostly uses in conjunction with an html tag. For example, I can include my header partial just by using <header-menu></header-menu> in my index.html. The directive for this functionality is defined as follows:

 

directives.directive('headerMenu', function () {
    'use strict';
    return {
    	scope: false,
		//replace: true,
		//transclude: true,
    	restrict: 'E',
        templateUrl: 'templates/partial/header.html',
        controller: 'controllers.HeaderController'
    };
});

 

The HeaderController in this instance is unnecessary although, I might want to do some inclusion of dynamic elements of the header with it. Let’s take a look at the HeaderController…

 

controllers.HeaderController = function ($scope, $cookies) {
'use strict';

function init() {

var user = $cookies.username;
$scope.username = $cookies.username;

}

$scope.searchBar = new UISearch(document.getElementById( 'sb-search' ) );
$scope.searchBar.open();
$scope.searchData = {};
$scope.searchData.advanceSearchClicked = function() {

$scope.searchData.showAdvanced = !$scope.searchData.showAdvanced;

if ($scope.searchData.showAdvanced) {
$scope.searchBar.close();
} else {
$scope.searchBar.open();

}

};

init();
};

I’m not doing anything spectacular here… but you get the idea. You can also do controllers using the routing functionality. I do this by creating a configuration.js and defining JSON data that will provide data to the routing module.

…

 

var routes = routes || {};

 
//Route configurations
routes["/dashboard"] =  { 
        
         controller: 'controllers.DashboardController', 
		 templateUrl: 'templates/dashboard.html', 
		 aliases: ['/dash','/dasher'],
		 searchable: false,
		 meta: {
		   title: "Dashboard",
		   description: 'This is my description'
		 }
		 
 };
 
//in application.js

...

application.config(['$routeProvider', '$locationProvider','cfg', function AppConfig($routeProvider, $locationProvider, cfg, $routeParams) {
 
     $locationProvider.html5Mode(true).hashPrefix('!');
	 
	 console.log(cfg);
	 for (var route in cfg.routes)  {
		 
		 var routeObj = cfg.routes[route];
		 
		 $routeProvider.when(route, routeObj);
		
		if (routeObj.aliases) {
		 for (var i = 0; i < routeObj.aliases.length; i++)  
			  $routeProvider.when(routeObj.aliases[i], routeObj);
		}
		 
		 
		 
	 }


...

Notice that I am using HTML 5 routing… This is essential if you want pretty urls without having #! in them. Angular will automatically interpret for browsers that don’t support the HTML 5 history mechanism.

Services
Services in Angular are just areas where we can interact with servers or complete calculation or logic that is necessary for a page or to present data. For example, you might aggregate data from two REST services in an Angular service and add it to the scope. Let’s look at an example service that does just that.

services.factory('CMS', ['$resource','cfg', function($resource, cfg) {
  return function(postId) {
    
	console.log(cfg.cmsServiceAddress);
	return { 
	
	Post: $resource(cfg.cmsServiceAddress + '/?json=get_post&id=' + postId, {id: '@id'}),
	Posts: $resource(cfg.cmsServiceAddress + '/?json=get_posts'),
	Page: $resource(cfg.cmsServiceAddress + '/?json=get_page&id=' + postId, {id: '@id'}),
	
	};
  
  };
}]);

We are are getting fancy now by using resource to automatically populate a model for us. This particular service, gets data from WordPress via the JSON API plugin. Now lets see how to use it.

 

			 CMS(postId).Page.get({id: postId}, function(p){
                           console.log('Page success, got data: ', p); 
			
			    if (p && p.status == "ok") {
					
					title = p.page.title;
					description = p.page.description;
					
					$scope.Page = p;
					$scope.Content = p.page;
					
					 } else {
	
	     				alertService.add("Error", "Failed to Load Content...");
 
  					}
			
			}, function(err){

					alertService.add("Error", "Failed to Load Content...");
    				console.log('Page error');
						  
			});
			 

Scopes are Angular’s way to pass data, in the controller we pass the data to the HTML partial via the scope… In this case, we are adding content to the page this way. Let’s see how it is used.

 

<img src=”images/loading.gif” width=”214″ height=”206″ ng-show=”showLoad == true” class=”center”></img>

</div>

<div ng-bind-html=”Content.content”></div>

I display a loading dialog until the Content is loaded and then the page is rendered replacing the image. It’s pretty simple.

You can also include data in pages from the scope using the expression syntax. {{Content.content}} would put the content directly into the page for display.

Angular’s power also lies in it’s flexibility and architecture. Regardless of who the programmer is, the application should work similar enough for anyone familiar with Angular to work on it. And it really only takes a couple days to be up and running if you have knowledge of Javascript and HTML5. CSS can be extremely helpful as well since CSS is the mechanism by which a lot of the dynamic mechanisms work.

I think AngularJS is the future of web programming. Google has backed it and now we can stop pulling our hair out while trying to code in other inferior Javascript frameworks… AngularJS is definitely the Rolls Royce of the Ajax and dynamic web frameworks. Stay tuned for future posts because I am going to be presenting more examples from the AngularJS cookbook.