Check out our new training course on AngularJS for Flex Developers

Add Multiple Views to a Single App - AngularJS UI Router - Part 6

This is part of a series of posts about the AngularJS UI Router. Check out part 1, part 2, part 3, Part 4, and Part 5.

One aspect of the uiRouter is that you can add multiple views to a single Angular module. In this sample we're going to create an angular app that has a header, footer, and a main content area, all defined as separate views..

Create the Multiple Views Config

In previous samples, we had a lot of nested views. While nested views will work perfectly fine even if you have multiple views, I pulled them out of this sample for simplicity sake. To define the router, go back to the config block:


$stateProvider
.state('state1', {
url: '/state1',
views : {
"header" : {templateUrl : 'states/header.html'},
"mainContent" : {
templateUrl : 'states/state1.html',
controller : 'state1Controller'
},
"footer" : {templateUrl : 'states/footer.html'}
}
})
.state('state2', {
url: '/state2',
views : {
"header" : {templateUrl : 'states/header.html'},
"mainContent" : {
templateUrl : 'states/state2.html',
controller : 'state2Controller'
},
"footer" : {templateUrl : 'states/footer.html'}
}
})

Each state is defined with a name and an object defining that state's properties. The state has two properties. The first defines the state's URL. This is the URL that will show in the browser bar when the state is loaded. The second piece is an object defining the views. Each element of the view object refers to an active view. It tells the router that in the current state, which template each view will display. All view properties are valid here including the templateUrl and controller. I specify the controller on the mainContent views, but for the sake of this sample the header and footer do not have a custom controller.

Create the Template HTML

Let's create the HTML templates. First, the header.html:


<a ui-sref="state1">State 1</a> | <a ui-sref="state2">State 2</a>

I created a simple navigation bar, which includes link to switch between the two states. Now, the footer.html:


Copyright notice, contact link, and other footer stuff here!

I just put in some placeholder text for common things you might find in the footer of a public web site. Both footer.html and header.html are reused between the two states.

Finally, take a look at the state1.html, which will be the main content for the state1 view:


<h1>{{title}}</h1>
Other State 1 content

The state1.html template references the title from the controller; just as it did in previous samples. It also displays some static placeholder text for state 1 content.

This is state2.html which will be displayed when the app is displaying state 2:


<h1>{{title}}</h1>
Other State 2 Content

The template for state2 is almost identical to state1. The main different is that the description text for fake content refers to State2 instead of state1.

Create the Views in the Main Template

Finally, you'll have to add all three views to the main template of your HTML application.


<div ui-view="header"></div>
<div ui-view="mainContent"></div>
<div ui-view="footer"></div>

Previously, we just added the uiView directive with no value. However, when you have multiple views, you must name them so the uiRouter knows which one to direct at which app.

Test the App

Load the app, and you should see this:

The app loaded into the default state of State 1. You can see the navigation bar up top and the footer at the bottom, with the main content in the center. Click the State 2 link:

The main content changed, but the footer and header stayed the same.

Play with the code here.

What's Next

The next section of this series will discuss how to pass parameters to a state.

We wrote 20 pages on the Angular uiRouter, sign up to get it!

Deeper Nesting with Views - AngularJS UI Router - Part 5

This is part of a series of posts about the AngularJS UI Router. Check out part 1, part 2, part 3, and Part 4.

In the previous section of this series, we showed a sample of nesting a view inside another. This can be done for as many levels as you need, with a view put inside a view which is inside a view. This entry will show a sample of views that are nested 3 levels deep.

Define the Deeper Subviews

First, we need to define a subview that goes multiple levels deep. For completeness, here are all the defined states of state1:


$stateProvider
.state('state1', {
url: '/state1',
templateUrl : 'states/state1.html',
controller : 'state1Controller'
})
.state('state1.subview1', {
url: '/state1subview1',
templateUrl : 'states/state1subview1.html',
})
.state('state1.subview1.deeper', {
url: '/state1subview2deeper',
templateUrl : 'states/state1subview1deeper.html',
})
.state('state1.subview2', {
url: '/state1subview2',
templateUrl : 'states/state1subview2.html',
})
}]);

The default state is state1. Under state1, there are two states, state1.subview and state1.subview2. This code adds a brand new state, state1.subview.deeper. This is defined as proof of principle that the states can nest multiple levels deep. I left out state2 from the code here as it doesn't apply to this sample.

Modify the Subview HTML

Open up state1subview1.html file:


Sub view 1

<a ui-sref="state1.subview1">Hide Deeper Subview</a>
<a ui-sref="state1.subview1.deeper">Show Deeper Nested View 1</a>

<div ui-view></div>

The top is just text specifying the file being displayed. Next come two links. The first one loads the subview1, essentially hiding the second nested subview. The second links loads the second nested subview. Finally, the uiView directive is used on a div so uiRouter knows where to put the view that is three levels deep.

This is the template for the deeper nested view:


Deeper Even

It is simple with no additional functionality.

Test the Deeply Nested Views

Load the app and click the "Show Nested View 1" link:

Click the Show Deeper Nested View link, and the view that is two levels deep should display:

Play with the code here. You can use this approach to build complicated structures with dynamic content.

What's Next

The next entry in this series will show you how to add multiple views to a single application.

We wrote 20 pages on the Angular uiRouter, sign up to get it!

Nested Views - AngularJS UI Router - Part 4

This is part of a series of posts about the AngularJS UI Router. Check out part 1, part 2, part 3.

The samples this series has created so far have not demonstrated anything that couldn't be done using the ngRoute directive. Now is the time to advance. We'll add two nested views in the first state.

Define the Nested State

Creating a nested state is just like creating a non-nested state. It supports the sample object properties, such as the name, templateUrl, or controller. There are two ways to tell the uiRouter that this is a nested state. The first is to define the parent state, using a property named parent. I like this because it is a very overt. The second, more common, approach lies in the naming of the state. If a state includes a master state, followed by a period, followed by the state name, then that state is pegged as a substate.

Modify the config block to define two nested views:


$stateProvider
.state('state1', {
url: '/state1',
templateUrl : 'states/state1.html',
controller : 'state1Controller'
})
.state('state1.subview1', {
url: '/state1.subview1',
templateUrl : 'states/state1subview1.html',
})
.state('state1.subview2', {
url: '/state1.subview2',
templateUrl : 'states/state1subview2.html',
})
.state('state2', {
url: '/state2',
templateUrl : 'states/state2.html',
controller : 'state2Controller'
})

I repeated all states in this app for comparison purposes. State1 and state2 are defined with the state name and few properties. The first substate under state1 is named 'state1.subview1'. The second is named 'state1.subview2'. Each view is defined with a url, and a template, but for the purposes of this example I did not give them a custom controller. They will inherit from state1's controller in this case.

The period in the state name defines it as a substate, not the url property in the state object. The url could be anything you desire and is independent of the state name. For the purposes of these samples, I kept the state name and the url identical.

Create the Nested Views

Let's look at the HTML Behind the two subviews. This is subview 1:


Sub view 1

This is subview 2:


Sub view 2

Both are simplistic for demonstration purposes.

Activate the Nested Views

Let's look at the state1.html that will be used to activate the nested views:


<h1>{{title}}</h1>

<a ui-sref="state1">Hide Subview</a>
<a ui-sref="state1.subview1">Show Nested View 1</a>
<a ui-sref="state1.subview2">Show Nested View 2</a>
<div ui-view></div>

<a ui-sref="state2">Go to State 2</a>

The title display at the top and the link at the bottom to launch state 2 are the same as was used in previous samples. The middle part is new. It includes three hyperlinks, all using the uiSref directive to display and hide states. The first link goes directly to the state1; which is the default state. That will effectively hide all visible substates. The second link will open the first subview, and the third link will open the second subview.

After that we see a div with the uiView directive on it. This is where the subview is displayed in the context of the view. It is similar to how we put the main view on the main index page.

Test the Nested Views

Load this in an app to test the nested views:

The initial state displays all the links, but does not display any of the nested view content. Click the Show Nested View 1 link:

Then click the Nested View 2 Link:

Test out the code here.

What's Next?

The next entrie in this series will show you how to nest subviews more than 1 level deep. Multiple layers of nested views is part of what makes the uiRouter powerful.

We wrote 20 pages on the Angular uiRouter, sign up to get it!

Adding a Controller to a State - AngularJS UI Router - Part 3

This is part of a series of posts about the AngularJS UI Router. Check out part 1 and part 2.

When building Angular applications, the views are not useful without an associated controller. An Angular controller provides the business logic behind the view. Thankfully, uiRouter provides a way to associate the state with a controller.

Create the Controllers

The first thing we're going to do is create the controllers. We can create a controller for each of the two views in the application:


angular.module('routerTestApp').controller('state1Controller',
['$scope',function($scope){
$scope.title = "State 1 Controller"
}]
);
angular.module('routerTestApp').controller('state2Controller',
['$scope',function($scope){
$scope.title = "State 2 Controller"
}]
);

These are two simple controllers. Each once contains a $scope variable, title, which will be used to replace the hard coded title used in previous examples.

Next, edit the config block to tell the $stateProvider which controller should go with which view:


$stateProvider
.state('state1', {
url: '/state1',
templateUrl : 'states/state1.html',
controller : 'state1Controller'
})
.state('state2', {
url: '/state2',
templateUrl : 'states/state2.html',
controller : 'state2Controller'
})

The object which defines the state has a new property, named controller. This controller's value is a string that refers to the name of the controller. When the view is setup, the controller will be associated with the view.

Create new HTML Templates

For this sample, we'll need two new state templates. Instead of using hard coded titles in the template page, it will use a title whose text is populated by the title $scope variable. This is the template for state1:


<h1>{{title}}</h1>
<a ui-sref="state2">Go to State 2</a>

This is the template for state 2:


<h1>{{title}}</h1>
<a ui-sref="state1">Go to State 1</a>

These two templates will show the dynamic title variable as the header, and also still include the links to switch between states.

Test The App

Now you can load the app and see the changes. This is the initial load:

This is what the app should look like after changing to state 2:

Play with the full code here.

In a real world application, you'll see lots more code in the controllers and interaction in the views.

What's Next?

The next entry in this series will show you how to nest one view inside of another.

We wrote 20 pages on the Angular uiRouter, sign up to get it!

Setting a Default State - AngularJS UI Router - Part 2

This is part of a series of posts about the AngularJS UI Router. Check out article 1.

The biggest problem with part 1 of this series was that no default state was set, so the app would load a blank screen. That is something that needs to be addressed. I could use two different ways to set up a default state, and I'm going to explain both of them here.

Create a state with no URL

The first approach to creating a default state is to create a state with an empty URL attribute. Do this in the config that defines the states with the $stateProvider:


angular.module('routerTestApp').config(['$stateProvider',
function($stateProvider){
$stateProvider
.state('state1', {
url: '/state1',
templateUrl : 'states/state1.html'
})
.state('state2', {
url: '/state2',
templateUrl : 'states/state2.html'
})
.state('default', {
url: '',
templateUrl : 'states/state1.html'
})
}
]);

The new state is added at the end. The name of the state is default, and the url parameter is an empty string. This will make it so that upon initial load the application--with no URL variables--the state1.hml template will load. Now upon initial load the app, you'll see the correct state loaded even if you don't specify it in the URL:

Play with the app here.

As I congratulated myself on the creativity of this approach, I realized a limitation of this very quickly. If I want state1 to equal the default state, then every property of the state1 object will need to be defined as part of the state2 object, so it feels like some duplication of code.

Set a default state with the $urlRouteProvider

The uiRouter provides a standard way to set the default state. Into the config you can pass a uiRouter service named $urlRouteProvider. This service can be used to specify the default state:


angular.module('routerTestApp')
.config(['$stateProvider','$urlRouterProvider',
function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/state1");
// other state setup code here
}
]);

The otherwise() function is called on the urlRouteProvider and it accepts a single string. If no state is loaded, then the otherwise state will be specified.

Load the new app to see the initial state load:

Play with the code here.

I prefer using the $urlRouteProvider to set a default state on the application.

Final Thoughts

The next article in this series will show you how to associate a controller with the state. Controller's are the part of AngularJS that include business logic.

We wrote 20 pages on the Angular uiRouter, sign up to get it!

Switching Between Two States - AngularJS UI Router - Part 1

This is the first in a series of blog posts about the AngularJS UI Router.

Part of the AngularJS library is a router, named ngRoute. The ngRoute library allowed you to show different views of your Angular application based on the URL in the browser. This works great for simple applications; however it has some distinct limitations. Only a single view can be displayed per URL and nested views are not supported. Applications often have multiple views, such as a header, footer, and some main content. Main content is often split up into multiple sections. The ngRoute directive can only bring us so far.

The AngularUI team has created an alternate router, uiRouter, to addresses some of the limitations of the ngRoute. The ngRoute directive approaches an application as a collection of URLs, each one displaying a different view. The uiRouter looks at an application as a collection of states, and it allows multiple, nested states. This is a series of blog posts about using the uiRouter within an AngularJS application.

Switching Between Two States

The first sample will show you how to switch between two separate states.

Create the Application Skeleton

First, import the Angular library and the ui-router library:


<script src="//code.angularjs.org/1.5.8/angular.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js">

</script>

I reference both libraries from hosted CDN instead of copying them locally as part of my application. Next, create an Angular app in a script block:


<script>
angular.module('routerTestApp', ['ui.router']);
</script>

Configure the UI Router

A single configuration argument is passed into the Angular module, ui.router. This tells the Angular Module--routerTestApp--to load the uiRouter code and make it available to the application. This sample will create two UI States, state1 and state2. The router configuration is done in an Angular config block.


angular.module('routerTestApp').config(['$stateProvider',
function($stateProvider){
$stateProvider
.state('state1', {
url: '/state1',
templateUrl : 'states/state1.html'
})
.state('state2', {
url: '/state2',
templateUrl : 'states/state2.html'
})
}
]);

A service named $stateProvider is passed into the config block using the Angular dependency injection syntax. The $stateProvider service is part of the UI-router and is analogous to the $routeProvider used as part of ngRoute. The $stateProvider is used to define the two states of the application. In this case, a URL is defined. This is the value that will display in the URL when the state is displayed. A templateURL is used to refer to an HTML page that contains the view code that will be displayed when the state is active.

Create the HTML

First, we'll create the two HTML templates. The first is state1.html:


<h1>State 1</h1>
<a ui-sref="state2">Go to State 2</a>

This template is very simple. It includes a header with simple text stating 'State 1'. The anchor link is a bit more interesting. It includes an Angular directive named uiSref. This directive tells the uiRouter library to load a new state and change the URL whenever that link is clicked. The value of the uiSref directive is the name of the state that should be loaded. If the state doesn't exist, the anchor is immediately disabled and does not present the user with a link.

The state2.html template is almost identical to state1.html:


<h1>State 2</h1>
<a ui-sref="state1">Go to State 1</a>

The header says 'State 2' instead of 'State 1'. The link goes back to state1 instead of state2. The main index needs some HTML to make this work too. First, add the ngApp directive to the body tag:


<body ng-app="routerTestApp">

Then, add the ui-view:


<div ui-view></div>

The uiView directive tells the uiRouter directive to put the view here.

Test the App

Load the app in a browser, be sure to specify the current state with a URL like '/Index.html#/state1'. You should see the first state:

Click the link to open state 2. State2 should open:

The URL should change and state2 is displayed on the screen.

Play with the code here.

Final Thoughts

The Plunker is a bit tricky to work with given the current codebase, because no default state is specified for the initial load of the application. Without a default state, neither state1 or state2 will be displayed unless you specify the state in the URL when you load the application.

The next article in this series will address that.

We wrote 20 pages on the Angular uiRouter, sign up to get it!

Why use Angular's $log instead of JavaScript's console.log()?

console.log() is a great debugging technique when writing JavaScript code. It immediately prints a variable or text to the browser's console and you can use that to keep track of code that has run flawlessly. AngularJS provides a $log service that provides the same functionality. Why would we want to use one over the other?

Using console.log()

I use console.log() a lot, and it is probably sprinkled all over the samples I've written about in this blog. It is easy to use.

In any part of JavaScript, just add a line like this to output a constant:


console.log('some constant');

Use a line like this to output a variable:


var myVar = 'Some Variable';
console.log(myVar);

You can play with this code here.

It is a really simple sample, but can be valuable when you want to drill down into an object being returned from a service or something similar.

Using AngularJS's $log service

Angular requires more setup. First, import the Angular library:


<script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>

Then in a Script block, create an Angular module:


angular.module('mySimpleApp',[]);

Create an Angular controller, injecting the $log service into the controller function:


angular.module('mySimpleApp').controller('myController', ['$log',function($log){
}]);

Finally, perform the outputs similar to how we did in our console.log() example:


$log.debug('some constant')

var myVar = 'Some Variable';
$log.debug(myVar);

You can play with this code here.

You'll see the two samples operate very similarly.

Why use $log?

The main reason for using $log is for encapsulation purposes. When writing tests for your Angular controllers or services, it is better to have an object which you can easily mock. The Angular log service can be replaced during the Angular injection process. console.log() cannot be. I still use console.log() for quick and dirty debugging, primarily because that is what I learned first. For a more testable, encapsulated approach, go with the $log service.

How do I Disable an HTML Element with AngularJS?

I was working on a client application which was creating a lot of duplicate entries in a database. After some research, we learned that our users were clicking the submit button multiple times, causing multiple service calls, which was causing multiple database entries to be created.

We decided the solution was to disable the submit button. AngularJS makes it easy by using the ngDisabled directive.

Set up the App

First, import the Angular library:


<script src="//code.angularjs.org/1.5.6/angular.min.js"></script>

Then, create a sample Angular Module and controller:


angular.module('sampleApp',[]);

angular.module('sampleApp').controller('disableSampleCtrl',['$scope', function($scope){
}]);

I'm going to add two $scope variables to the controller for this sample:


$scope.buttonDisabled = false;
$scope.buttonDisabledButtonLabel = "Disable";

The buttonDisabled is a boolean value that will be used to toggle the ngDisabled property on the button in question. The buttonDisabledButtonLabel will be used as part of the label of the button which will trigger the disabled event.

Create the View

Let's create the HTML view.


<body ng-app="sampleApp">
<div ng-controller="disableSampleCtrl">
</div>

The Angular Module is attached the body tag with the ngApp directive. The controller is added to a div.

Inside the controller's view I'm going to be put two buttons:


<button ng-disabled="buttonDisabled" ng-click="onSubmitClick()">Submit</button>
<button ng-click="toggleDisableButton()">{{textDisabledButtonLabel}} Submit Button</button>

The first button is the button that gets disabled. In addition to the ngDisabled tag, whose value relates to the buttonDisabled property in the controller; there is also an ngClick attribute, so that the button can execute a controller function when it is clicked.

The second button is used to toggle the disabled property of the first.

Implement the Button Functions

Let's implement the controller functions for the buttons. First, implement the toggleDisableButton property:


$scope.toggleDisableButton = function(){
$scope.buttonDisabled = !$scope.buttonDisabled
if($scope.textDisabled){
$scope.buttonDisabledButtonLabel = "Enable";
} else {
$scope.buttonDisabledButtonLabel = "Disable";
}
}

This button swaps the value of the buttonDisabled property. It also changes the value of the buttonDisabledButtonLabel. This refers back to the label of the button that causes the disable / enablement.

The submit button also triggered a method when clicked:


$scope.onSubmitClick = function(){
console.log('something happened');
}

This function simple logs value out to the console; so you can tell whether or not the button is clickable.

Final Thoughts

Play with this App!

For the sake of completeness, in the plunker code I also demonstrated how to enable / disabled a text input.

How do you add an identity to an existing column in SQL Server?

I was helping a client change to a new web host. During this process I discovered an Access database was powering part of their web site. This had to go!

I imported the database into SQL Server. Unfortunately, this process removed the identify specifications on the primary key column for one of the tables. This means that the primary key column would not automatically fill in with an automatically incrementing integer. I opened up the table design, and tried to change the field back to an ID. Unfortunately, SQL Server does not allow you to add an identity specification to an existing column on an existing table.

How do I fix that?

What is the Process?

The process was tricky to figure out, but not all that too hard. Basically, do this:

  1. Create a new table with all the same columns as the old table. Make sure this new table has an identity column.
  2. Enable Identity Insert on the new table.
  3. Copy all data from the first table into the new table.
  4. Disable Identity Insert on the new table.
  5. Delete the original table.
  6. Rename the new table to the original table's name.

Then you're done.

What is the Code?

This whole process can be done quickly with a SQL Server script.

First, create the new table:


CREATE TABLE dbo.newtable_temp
(
Id int NOT NULL IDENTITY(1, 1),
textField nvarchar(100) NULL,
bitField bit not NULL
/* other fields */
)
ON [PRIMARY]
go

Then enable the identity insert:


SET IDENTITY_INSERT dbo. newtable_temp ON
Go

Next, use this script to insert all the rows from the original table into the new table:


IF EXISTS ( SELECT *
FROM dbo.newtable )
INSERT INTO dbo. newtable _temp ( Id, textField, bitField /* other fields */)
SELECT Id, textField, bitField /* other fields */
FROM dbo. newtable TABLOCKX
go

Then turn off the identity insert:


SET IDENTITY_INSERT dbo.newtable_temp ON
Go

Delete the original table:


DROP TABLE dbo.newtable
Go

Finally rename the old table:


Exec sp_rename 'newtable_temp', 'newtable'

And you should be good to go!

Much thanks to this Stack Overflow question for helping me out.

Why does my Angular $scope.$on() event Listener run twice?

I was working with a client on an app; and had to communicate between two different controllers. When something happened in one controller--the main app--I wanted to update the view in the main navigation. You can use Angular's $broadcast() to dispatch an event and $on to execute an event listener. The problem is; my event listener was executing twice. Why was this?

TLDR: There were two instance of the controller.

The App Architecture

I'm going to explain the app architecture. The app had a navigation section and a footer section, both were always displayed to the user. Between those two sections on the page were section for the main content. This was populated using an Angular router based on the URL. For the purposes of this sample, I'll just create a single simple view. The page will look like this:

  • Header
  • Main Content
  • Footer

Let's create the app outline. First, import the Angular library:


<script src="//code.angularjs.org/1.5.6/angular.min.js"></script>

This is often the first thing to do in any Angular applications. Now create the Angular app:


angular.module('sampleApp',[]);

Create a controller for the navigation and the main content:


angular.module('sampleApp').controller('navigation',['$scope', function($scope){
}]);

angular.module('sampleApp').controller('mainContent',['$scope','$rootScope', function($scope,$rootScope){
}]);

The navigation controller accepts the $scope service as an argument. The mainContent controller accepts both the $scope and the $rootScope as arguments.

The view looks like this:


<body ng-app="sampleApp">

<div ng-controller="navigation">
</div>

<div ng-controller="mainContent">
</div>

<div ng-controller="navigation">
</div>

Notice here that the footer and the header use the same controller. That was the root of my confusion; and the reason the event listener in the navigation was dispatched twice. Don't do that.

Populate the App

I'm going to give this app skeleton enough code to demonstrate the problem. First, in the mainContent controller:


$scope.someValue = '';
$scope.onButtonClick = function(){
$rootScope.$broadcast('somethingHappened',{value : $scope.someValue});
};

I created a single #scope variable named someValue; and a single $scope function, onButtonClick(). The $scope function will execute in response to a button click, and will use the $broadcast() function on the $rootScope to dispatch an event.. Here is the mainContent view code:


<input type="text" ng-model="someValue">
<button ng-click="onButtonClick()">Do Something</button>

Enter some text in the input, click the button, and that will execute the onButtonClick() function in the mainContent Controller.

So, far so good. No create an event listener inside the navigation controller:


$scope.savedValue = '';
$scope.$on('somethingHappened', function(event, args){
$scope.savedValue = args.value;
});

The navigation controller includes a single $scope variable, named savedValue. It uses the $on() function to listen to the 'somethingHappened' event. The function takes the value dispatched as part of the event and copies it into $scope.savedValue; which in turn updates the navigation view. This is the navigation view code:


Saved Value displayed in Nav Div: {{savedValue}}<br/>

Run this App and play with the code.

It took me some head-scratching to figure out why the $on() in the navigation controller was executing. I didn't realize the same controller was used in both the footer and header. Two instances of the controller means two event listeners, which means the method gets executed twice.

In my case it was easy to discover; but if you are using Angular Routes; or any code that dynamically associates views and controllers, the second instance of the view may not be obvious. Using the same controller code for two different views is a technically valid Angular approach, but in practice I prefer not to use a controller with multiple views.

More Entries

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.