Converting a ngRoute based AngularJS app to Angular ui-router

My AngularJS app I’ve been developing for a while was using ngRoute for it’s routing between views (I put together a simple example for reference on GitHub here). I got to the point where I need more that just single URL based routes to views, I needed to have at least one of the views incorporate other nested views that are part of a wizard set of pages. This is something that’s not supported by default in ngRoute, so I’m taking a look at AngularJS ui-router as an alternative.

AngularUI Router is state based, rather than that URL based.

Here’s my starting point for my app before adding the nested views and converting to ui-router:

[code]
var myApp = angular.module(‘MyApp’, [ "ngRoute", "ngAnimate",
"MyControllers" ]);

myApp.config([ ‘$routeProvider’, function($routeProvider{
$routeProvider.when(‘/’, {
templateUrl : ‘home.html’
}).when(‘/page1’, {
templateUrl : ‘page1/page1.html’,
controller : ‘Page1Controller’
}).when(‘/page2’, {
templateUrl : ‘page2.html’
}).when(‘/page3’, {
templateUrl : ‘page3.html’
}).otherwise({
redirectTo : ‘/’
});
}]);
[/code]

Converted to the state based approach, my routing config now looks like:

[code]
var myApp = angular.module(‘MyApp’, [ "ui.router", "ngAnimate", "MyControllers" ]);

myApp.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
// show home page
.state(‘home’, {
url: ‘/home’,
templateUrl: ‘home.html’
})

//show page2
.state(‘page2’, {
url: ‘/page2’,
templateUrl: ‘page2/page2.html’,
controller: ‘Page2Controller’
})

//show page3
.state(‘page3’, {
url: ‘/page3’,
templateUrl: ‘page3.html’
})

// catch all route
// send users to the home page
$urlRouterProvider.otherwise(‘/home’);
});[/code]

The ng-view from ngRoute is now replaced with the ui-view directive from ui-router:

[code]
<div ng-view></div>
[/code]

becomes:

[code]
<div ui-view></div>
[/code]

My menu links looked like this previously:

[code]
<li><a href="index.html#/home">Home</a></li>
<li><a href="index.html#/page1">Page 1</a></li>
<li><a href="index.html#/page2">Page 2</a></li>
[/code]

 

Instead of using URLs that map to view templates, ui-router uses states and state changes to move between page templates – here’s what the replacement for the above menu links looked like:

[code]
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="page1">Page 1</a></li>
<li><a ui-sref="page2">Page 2</a></li>
[/code]

Right now the routing configuration is really not that much different than before: the ui-router config is slightly different and ui-sref states replaced the links. Where the interesting part is that now you can also support nested views, that look like this in the configuration:

[code]
$stateProvider
// show page2
.state(‘page2’, {
url: ‘/page2’,
templateUrl: ‘page2/page2.html’
})

//show page2 – sub page1
.state(‘page2.subsection1’, {
url: ‘/page2/sub1’,
templateUrl: ‘page2/page2sub1.html’
})

//show page2 – sub page2
.state(‘page2.subsection2’, {
url: ‘/page2/sub2’,
templateUrl: ‘page2/page2sub2.html’
})
[/code]

This is the routing for page2 and two nested views that are nested within the main ui-view (ui-view is the ui-router replacement for ng-view ) with a states of page2.subsection1 and page2.subsection2.

The nested views have corresponding nested states in the routing, identified with a dot notation. Assuming page 2 has a submenu and it’s own ui-view nested view, the submenu would like like this:

[code]
<li><a ui-sref="page2.subsection1">Subsection 1</a></li>
<li><a ui-sref="page2.subsection2">Subsection 2</a></li>
[/code]

With a following ui-view nested view in the page following the Page 2’s submenu:

[code]
<div ui-view></div>
[/code]

… clicking on the submenu items will load the nested view fragments into this nested view.

Full docs for ui-router are here.

I have two working sample apps showing an approach using ngRouter and then the examples above updates to use ng-router:

  • Using ng-route here
  • Using ui-router here

Linbpq: configure via web page before bbs and chat apps start

It’s not immediately obvious from the docs, but after installing and creating a bpq32.cfg file for pilinbpq BPQ32 on the Pi (or Linux in general probably), after you’ve started pilinbpq running, you need to hit the admin web pages to configure the last few params before the services are accessible.

For example, if you telnet into your node locally and then type bbs or chat, you’ll see the error: “bbs application is not running”.

Hit the admin web pages for both bbs and chat, and complete the blank fields in the config. For me these where the applicationID and Streams values. The Id matches the id value of the app in the bpq32.cfg file. Streams is I think number of concurrent clients. Save values, restart, and you should be good.

Apache httpd in a Docker container

I have a ‘getting started‘ post on Docker already, so I thought it would be useful to pull together some of the simplest possible examples of building and running Docker containers, as real examples.

On the Docker Hub there’s many prebuilt images already. As a quick example, let’s use the Apache Httpd image and build a container that runs httpd and serves an example webpage.

This is pretty much the instructions that are on the httpd image page, so no surprises here.

In a new folder, create a Dockerfile:

FROM httpd:2.4
COPY ./public-html/ /usr/local/apache2/htdocs/

Create an index.html file in public-html and put some hello world content in it.

Next, from a Docker Quickstart Terminal, cd into the folder when you created the Dockerfile and public-html, and build your image:

docker build -t imagename .

 
Now to start up a container based on your image called imagename (name it whatever you like), and expose port 80 on the container to port 80 to the outside world:

docker run -it -p 80:80 imagename

Now point a browser at the IP of your docker machine (displayed when Docker Quickstart starts up), and success, you should see your html being served from apache in your container!

If you’re on Windows, the equivalent to capture the tty output is:

winpty docker run -it -p 80:80 imagename

Installing an SSL certificate on OpenShift Online

SSL certificates are relative inexpensive, but there’s a number of organizations that are starting to offer certs for free – Let’s Encrypt is one. Their approach requires a script to renew your cert every 90 days. In some hosted environments however it might not be possible to run such a script.

For OpenShift hosted apps, you can both assign your own domain name to an application, and also import an SSL cert. See instructions here. Since it’s currently not possible to run a script like what Let’s Encrypt uses (see SO post here), certs from other organizations are more easily imported. StartCom is offering free SSL certs for 1 year, after which presumably you renew for another year.

Depending on what you are hosting, you may need to find and replace any hardcoded references to content loaded via http instead of https (to avoid ‘mixed content’ warnings in your browser). Once you’ve done this though, you get a shiny new green SSL padlock on your site!