Getting routing to work with hashes in AngularJS

Question

There is a partially working example of my issue at http://nwlink.com/~geoffrey/routing/default.html

var routingInterface = angular.module("routingInterface", ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {

        $stateProvider.state("first",
        {
            url: "",
            template: '<h1>{{title}}</h1><timer-control action="second" wait="10" ></timer-control>' +
                '<p>This page is supposed to change to another in ten seconds</p>',
            controller: function($scope) {
                $scope.title = "Welcome to Routing";
            }
        });

        $stateProvider.state("second",
        {
            url: "",
            template: '<h1>{{title}}<h2><p>This page is supposed to be displayed after the routing works</p>',
            controller: function($scope) {
                $scope.title = "Second page for routing";
            }
        });
    });

State "first" always comes up no matter which hash is displayed. I thought I was copying syntax from an example correctly, but I'm not getting something right.

There's a directive on the first view:

routingController.directive('timerControl',
[
    '$timeout', '$state', '$location', 
    function($timeout, $state, $location) {
        return {
            scope: {
                action: "@",
                wait: "@"
            },
            link: function($scope) {
                if (!$scope.wait) {
                    $scope.wait = 30;
                }
                var tOut = $timeout(function() {
                        $timeout.cancel(tOut);
                        //this doesn't work: 
                        //  $location.hash($scope.action);

                        // does work but doesn't put a hash on the url 
                        // like I expected
                        $state.go($scope.action); 
                    },
                    Number($scope.wait) * 1000);
            },
            template: '<span class="ng-hide"></span>'
        };
    }
]);

This does work put a new hash on the url to navigate to the new view, but it angular adds a second hash mark. But even if I type it in correctly in the url, something (the browser? or angularJS?) is adding a "/" to whatever I type. And I never ever display anything other than the first view.

I need a way to have views be unique but still expressed on the url somehow. If I have to use parameters that would also be ok. I expect that there will have to be parameters for some of the views.

Answer 1

I was actually very close to the right answer.

var routingInterface = angular.module("routingInterface", ['ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {
        //this was the first omission
        //it allows the first page to render even without the hash
        $urlRouterProvider.otherwise("first");

        $stateProvider.state("first",
        {
            url: "/first", // this is what puts the hash on the Url
                           // and responds to the hash
            template: '<h1>{{title}}</h1><timer-control action="second" wait="10" ></timer-control>' +
                '<p>This page is supposed to change to another in ten seconds</p>',
            controller: function ($scope) {
                $scope.title = "Welcome to Routing";
            }
        });

        $stateProvider.state("second",
        {
            url: "/second", //this is what puts the hash on the Url and
                            //and responds to the hash
            template: '<h1>{{title}}</h1><p>This page is supposed to be displayed after the routing works</p>',
            controller: function ($scope) {
                $scope.title = "Second page for routing";
            }
        });
    });