Question

我已经使用ui-router定义了这样的状态：

(function() {
    'use strict';
    angular.module('test.app').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider.state('home', {
            url: '/',
            templateUrl: 'home/home.html',
            controller: 'HomeController',
            controllerAs: 'home'
        }).state('about', {
            url: '/about',
            templateUrl: 'about/about.html',
            controller: 'AboutController',
            controllerAs: 'about'
        });

        $urlRouterProvider.otherwise('/');

        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    }])
    .run(['$rootScope', '$templateCache', function($rootScope, $templateCache) {
        $rootScope.$on('$stateChangeStart', function(event, next, current) {
            if (typeof(current) !== 'undefined'){
                $templateCache.remove(current.templateUrl);
            }
        });
    }]);
})();

我在我的app模块中注入了ui.router。

angular.module('test.app', [..., 'ui.router'...]

home.html的：

<div data-ui-view>
    <h1>I am home!</h1>
</div>

about.html：

<div data-ui-view>
    <h1>I am about!</h1>
</div>

我正在使用browser-sync在本地服务器上托管它：

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: "./src"
        },
        port: 8080
    })
});

我在这里遇到一个奇怪的问题。默认路由'/'运行正常并加载home.html但是当我尝试访问'/about'时，我在浏览器中收到消息Cannot GET /about。控制台中没有错误。

我尝试了这个this和更多线程，但没有好处！我哪里出错了？

AngularJS - UI路由器不工作（无法GET /状态）

0 个答案: