讓路由在AngularJS中使用哈希

Question

我的問題在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";
            }
        });
    });

無論顯示哪個哈希，狀態“第一”總是出現。 我以為我正在從一個例子中正確地復制語法，但我沒有得到正確的答案。

第一個視圖有一個指令：

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>'
        };
    }
]);

這確實可以在url上添加一個新哈希來導航到新視圖，但是它會添加第二個哈希標記。 但即使我在網址中正確輸入它，某些東西（瀏覽器？或angularJS？）也會為我輸入的內容添加“/”。 我從來沒有展示過第一個視圖以外的任何東西。

我需要一種方法讓視圖獨一無二，但仍然以某種方式在網址上表達。 如果我必須使用也可以的參數。 我希望某些視圖必須有參數。

Answer 1

我實際上非常接近正確的答案。

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";
            }
        });
    });