Today, I decided to integrate angular-ui-router into my webapp. However, I've encountered some unexpected behavior. Previously, it would display the current page within the ui-view, essentially creating a page within a page.
Now, while it's functioning correctly overall, I'm facing an issue where the subpages are not being displayed and I'm struggling to identify the root cause.
Main Page
<!doctype html>
<html lang="en" ng-app="ExampleApp">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>
<div>
<div ui-view></div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- Main app file -->
<script src="/js/main.js"></script>
</body>
</html>
main.js
var ExampleApp = angular.module('ExampleApp', ['ui.router']);
ExampleApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: "MainController"
})
.state('settings', {
url: "/settings",
templateUrl: "views/settings.html",
controller: "SettingsController"
})
.state('settings.account', {
url: "/account",
templateUrl: "views/settings.account.html",
controller: "AccountSettingsController"
});
});
ExampleApp.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);