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

Question

我正在尝试使用ui-router创建一个简单的应用程序。当我第一次加载页面或重新加载当前页面时，一切都正常。但是当我点击不同的页面时，整个应用程序会在我的ui-view中重新加载，并在日志中收到警告：“警告：尝试多次加载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时，页面为何会重新加载整个页面，我感到很困惑。

- andreasnauta

---

你的模板长什么样子？frontPage.html 和 institution.html 文件是怎样的？ - Callebe

你的评论让我想到了url和templateUrl属性。它们有些问题，当我将它们更改为url: '/', templateUrl: 'app/frontPage/frontPage.html'和url: '/institution', templateUrl: 'app/institution/institution.html'时，一切都正常了！谢谢 - andreasnauta

Answer 1

我使用模板创建了一个循环。当我将它们更改为以下内容时，它就起作用了：

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

- andreasnauta

---

我也遇到了同样的问题，但我的模板名称不正确，因此它一直在重新加载默认模板。只是想在这里补充一下。 - Hass

一样的，听起来很蠢，但在我的打包项目中，templateUrl不存在。 - Nick Grealy

Answer 2

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

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

为了修复这个问题，我将html5mode更改为：

$locationProvider.html5Mode(true);

然后在我的HTML中设置一个基础，就像这样：

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

- ac360