Question

我正在尝试使用ui-router创建一个简单的应用程序。当我第一次加载页面或重新加载当前页面时，一切都很好。但是当我点击不同的页面时，整个应用程序会重新加载到我的ui视图中，并在日志中收到警告：＆＃34;警告：尝试多次加载角度。＆＃34;。我正在使用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

我用模板创建了一个循环。当我把它们改成它时，它起作用了：

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

Answer 2

我有这个问题大约一个小时。对我来说，问题是我已将html5mode requireBase选项设置为false。

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

要解决此问题，我将html5mode更改为：

$locationProvider.html5Mode(true);

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

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

Angular ui-router在ui-view中重新加载整个App

2 个答案: