javascript - 如何在Angular.js中处理静态网址 anchor

当您输入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自动重定向到该页面。

最佳答案

不使用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中的!标记。只需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);
        });