如何在Angular.js中處理靜態網址錨

Question

如何當你輸入例如URL處理情況http://localhost/#!/somepage/但問題是，AngularJS不處理它並不會加載該頁面，否則，如果你去somepage經過索引文件，它可以正常工作。

我使用ui-router ，我的路由腳本如下所示：

angular.module('WEBAPP', ['ui.router', 'bw.paging'])
    .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $urlRouterProvider.when('', '/');

        var states = [
            {
                name: 'home',
                url: '/',
                templateUrl: 'application/partials/home_header.html'
            },

            {
                name: 'somepage',
                url: 'somepage/',
                templateUrl: 'application/partials/somepage.html',
            },

            {
                name: '404',
                url: '404/',
                templateUrl: 'application/partials/404.html'
            },

        ]

        states.forEach(function (state) {
            $stateProvider.state(state);
        });
    });

當我在瀏覽器http://localhost/#!/somepage/輸入url時，我想如何進行正確的路由，AngularJS會自動重定向到該頁面。

Answer 1

不使用for each嘗試一下。我可能錯了，但是我認為當您在此處使用每種狀態時，最后一個狀態將綁定$ stateprovider而不是綁定所有狀態。 這樣嘗試。

$urlRouterProvider.otherwise('/');
$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'application/partials/home_header.html'
    })
    .state('somepage', {
        url: 'somepage/',
        templateUrl: 'application/partials/somepage.html',
    })
    .state('404', {
        url: '404/',
        templateUrl: 'application/partials/404.html'
    })

已編輯

更改以下url: 'somepage/'

到這個url: '/somepage'

並在呼叫時刪除! 標記url.just http://localhost/#/somepage就足夠了。

var states = [
            {
                name: 'home',
                url: '/',
                templateUrl: 'application/partials/home_header.html'
            },

            {
                name: 'somepage',
                url: '/somepage',
                templateUrl: 'application/partials/somepage.html',
            },

            {
                name: '404',
                url: '/404',
                templateUrl: 'application/partials/404.html'
            },

        ]

        states.forEach(function (state) {
            $stateProvider.state(state);
        });

Answer 2

用這個

angular.module('WEBAPP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/home', {
    templateUrl: 'application/partials/home_header.html'

}).when('/somepage', {
    templateUrl: 'application/partials/somepage.html'

}).otherwise({
    templateUrl: '/home'
});

}）;