Question

我有两个状态 - 全局布局状态，所有其他状态应该呈现，以及登录状态。当我的应用程序启动时，它不会抛出任何错误，但模板不会呈现，但在调试会话中我已经看到它们已被加载。这是主要页面：

<!DOCTYPE html>
<html>
   <head><head>
   <body>
       <div ui-view></div>
   </body>
</html>

这是我的app模块：

import angular from 'angular';
import '@uirouter/angularjs';
import routing from './app.config';
import '../login'

const requires = ['ui.router', 'app.login'];

angular.module('app', requires).config(routing);

angular.bootstrap(document, ['app']);

app.config.js ：

export default function routing($stateProvider, $urlRouterProvider) {
    "ngInject";

    $stateProvider.state('app', {
        abstract: true,
        template: require('./layout/layout.html')
    });
    $urlRouterProvider.otherwise('/');
}

布局如下：

<div ui-view></div>

这里是登录模块：

login.config.js

export default function loginConfig($stateProvider) {
    "ngInject";

    $stateProvider.state('app.login', {
        url: '/login',
        controller: 'LoginCtrl as $ctrl',
        template: require('./login.html')
    });
}

login.controller.js

class LoginCtrl {
    constructor() {
        "ngInject";
    }

    btnClicked() {
        console.log("YAY!");
    }
}

的login.html

<div>
     <button ng-click="$ctrl.btnClicked()"></button>
</div>

index.js

import angular from 'angular';
import loginConfig from 'login.config';
import LoginCtrl from 'login.controller';

let loginModule = angular.module('app.login', []);
loginModule.config(loginConfig);
loginModule.controller('LoginCtrl', LoginCtrl);

export default loginModule;

我使用webpack + ng-annotate-loader进行构建。正如我已经提到的，尽管可以看到所有模板都已加载并添加到视图中，但index.html页面上的主ui-view在呈现时仍为空，整个页面为空。什么可能导致这个问题？

Answer 1

问题解决了将$locationProvider.html5Mode(false);添加到app.config.js

Angular UI路由器状态虽然加载它们但不会渲染模板

1 个答案: