Angular ui-router reload whole app in ui-view
I am trying to create a simple application using ui-router. When I load the page for the first time or reload the current page, everything is fine. However, when I click on another page, the whole application reloads in my ui-view and I get a warning in the log: "WARNING: Tried to load angular more than once". I am using Express, Jade and Angular.
I have the following structure:
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
The above structure worked with ng-route, so I completely lost why it keeps reloading the whole page when switching to u-router.
source to share
I created a loop with templates. When I changed them to this, it worked:
$locationProvider.html5Mode(true);
$stateProvider.state('frontPage', {
url: '/',
templateUrl: 'app/frontPage/frontPage.html'
})
.state('institution', {
url: '/institution',
templateUrl: 'app/institution/institution.html',
controller: 'institutionCtrl'
});
source to share
I had this problem for about an hour. The problem for me was that I had set the parameter html5mode requireBase
to false
.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
To fix this, I changed the html5mode to this:
$locationProvider.html5Mode(true);
Then set the base in my HTML like:
<base href="/"></base>
source to share