I attempted to follow the instructions provided here but I am unable to make it work. https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
I made sure that my bootstrap grid divs were functioning correctly by placing them all in index.html and loading the page. However, once I integrated AngularJS, the page stopped rendering.
Despite checking, there are no visible errors in the javascript console.
Initially, the webpage was supposed to appear as shown in this screenshot prior to splitting out the views from index.html:
This is what my code looks like after integrating Angular and creating multiple views:
index.html
<html ng-app="stackoverflowApp">
<head>
<meta charset="utf-8"/>
<title>stackoverflow Question</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" type="text/css"/>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="scripts/stackoverflowApp.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div ui-view="stackoverflowTopPane"/>
</div>
<!-- main panel-->
<div class="row">
<!-- Left pane-->
<div ui-view="stackoverflowLeftPane"></div>
<!-- content pane-->
<div ui-view="stackoverflowMainPane"></div>
</div>
</div>
</body>
</html>
js
'use strict';
angular.module('stackoverflowApp', [
'ui.router'
])
.run(
['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
/////////////////////////////
// Redirects and Otherwise //
/////////////////////////////
$urlRouterProvider
.otherwise('/');
//////////////////////////
// State Configurations //
//////////////////////////
// Use $stateProvider to configure your states.
$stateProvider
//////////
// Home //
//////////
.state("home", {
views: {
'stackoverflowTopPane': {
templateUrl: 'so-views/stackoverflow-top-pane.html'
},
'stackoverflowLeftPane': {
templateUrl: 'so-views/stackoverflow-left-pane.html'
},
'stackoverflowMainPane': {
templateUrl: 'so-views/stackoverflow-main-pane.html'
}
}
})
}
]
);