Alright. I am stuck with this part for two days. I have tried everything i know. I have my ui-router loaded and stateprovider defined. I have the UI as shown in several examples in website. But when i run, it is not showing my ui-view.
Index.html
<body ng-app='ngBRep'>
<div>
<div data-ng-include="'app/layout/shell.html'"></div>
</div>
<!--Angular-->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui-router.js"></script>
</body>
Shell.html
<div data-ng-controller="shell as vm">
SHELL
<div ui-view></div>
</div>
Entry.html
<section id="entry-view" data-ng-controller="entry as vm">
ENTRY
</section>
app.js
var app = angular.module('ngBRep', [
'ui.router'
]);
routes.js
var app = angular.module('ngBRep');
app.config(['$stateProvider', '$urlRouterProvider', routeConfigurator]);
function routeConfigurator($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('/', {
url: '/',
templateUrl: 'app/views/entry.html'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/views/profile.html'
});
// Send to login if the URL was not found
}
My expectation is when i browse to index.html, i should see SHELL PROFILE
But i get only SHELL.
And the worst part, there is an existing website in our project that does exactly this and it works.
Any help will be appreciated. Thank you.
There is a working plunker. The issue in this case is related to the fact, that we are using two features (which are in fact not expected / not designed to be working together):
ng-include
- to populate the root view (usually part ofindex.html
)ui-router
- to target the root, which is not loaded yetui-router
default call to$urlRouterProvider.otherwise("/")
)So while this template is included into the root index.html
We have to do this in its controller:
This way we solve the difference in loading times (router is ready sooner then included template, so missing the targets)
Check that here