如何在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'
});

}）;