Angular ui-router 在 ui-view 中重新加载整个应用程序

Question

我正在尝试使用 ui-router 创建一个简单的应用程序。当我第一次加载页面或重新加载当前页面时，一切都很好。但是，当我单击不同的页面时，整个应用程序会在我的 ui 视图中重新加载，并且我在日志中收到警告：“警告：尝试多次加载 angular。”。我正在使用 Express、Jade 和 Angular。

我有以下结构：

public
   app
      frontPage
         frontPage.jade
      institution
         institution.jade
   app.js
   index.jade
server
   server.js

server.js：

app.use(express.static(path.join(__dirname, '/public')));
app.get('/*', function (req, res) {
    res.sendfile('./public/app/index.html');
});

app.js：

$locationProvider.html5Mode(true);
$stateProvider
    .state('frontPage', {
        url: '/app/frontPage/',
        templateUrl: 'frontPage.html'})

    .state('institution', {
        url: '/app/institution/',
        templateUrl: 'institution.html',
        controller: 'institutionCtrl'
    });
}); 

index.jade

#page-wrapper
    .row
        .col-lg-12
            <ui-view></ui-view>

frontPage.jade

block content
   h1 Page
   p Welcome

上面的结构与ng-route一起工作，所以我很迷茫为什么当我切换到ui-router时它会不断重新加载整个页面。

Answer 1

我遇到这个问题大约一个小时。对我来说，问题在于我将html5mode requireBase 选项设置为false。

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

为了解决这个问题，我将 html5mode 更改为：

$locationProvider.html5Mode(true);

然后在我的 HTML 中设置一个基础，如下所示：

<base href="/"></base>

Answer 2

我用模板创建了一个循环。当我将它们更改为此时，它起作用了：

$locationProvider.html5Mode(true);
$stateProvider.state('frontPage', {
    url: '/',
    templateUrl:  'app/frontPage/frontPage.html'
})
    .state('institution', {
        url: '/institution',
        templateUrl:  'app/institution/institution.html',
        controller: 'institutionCtrl'
    });