<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="script.js"></script>
<script src="page1.js"></script>
<script src="page2.js"></script>
<script src="page3.js"></script>
<script src="dataservice.js"></script>
</head>
<body ng-app="app">
<ul class="nav nav-pills">
<li><a ui-sref="state1">One</a></li>
<li><a ui-sref="state2">Two</a></li>
<li><a ui-sref="state3">Three</a></li>
</ul>
<div ui-view></div>
</body>
</html>
// Code goes here
var routerApp = angular.module('app', ['ui.router', 'ui.bootstrap']);
routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('state1');
$stateProvider
// ONE VIEW ========================================
.state('state1', {
url: '/state1',
templateUrl: 'page1.html',
controller: 'page1Ctrl',
controllerAs: 'vm'
})
// TWO VIEW ========================================
.state('state2', {
url: '/state2',
templateUrl: 'page2.html',
controller: 'page2Ctrl',
controllerAs: 'vm'
})
// THREE VIEW ========================================
.state('state3', {
url: '/state3',
templateUrl: 'page3.html',
controller: 'page3Ctrl',
controllerAs: 'vm'
});
});
// run blocks
routerApp.run(function($rootScope, $uibModal, $state) {
$rootScope.modal = false;
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
if ($rootScope.modal) {
event.preventDefault();
$rootScope.modal = false;
var modalInstance = $uibModal.open({
templateUrl: 'modal.html'
});
modalInstance.result.then(function(selectedItem) {
console.log('changing state to:'+ toState.name);
$state.go(toState, {}, {reload:true});
}, function() {
console.log('going back to state:'+ fromState.name);
$state.go(fromState, {}, {reload:true});
});
} else {
$rootScope.modal = true;
}
});
});
<div class="page1" style="color: red;">
<ng-include src="'common.html'"></ng-include>
</div>
<div class="page2" style="color: blue;">
<ng-include src="'common.html'"></ng-include>
</div>
<div class="page3" style="color: black;">
<ng-include src="'common.html'"></ng-include>
</div>
// I have to inject the same stuff over and over again
routerApp.controller('page1Ctrl', function(pageFactory) {
var vm = this;
// page dependent
vm.name = 'theOne';
vm.service = 'oneService';
vm.seriesLabels = ['One1', 'Two1', 'Three1'];
// these variables are declared in all pages
// directive variables,
vm.date = {
date: moment().startOf('month').valueOf(),
dateOptions: {
formatYear: 'yy',
startingDay: 1
},
format: 'dd-MMMM-yyyy',
opened: false
};
vm.open = function($event) {
vm.date.opened = true;
};
// dataservice
vm.data = []; // the structure can be different but still similar enough
vm.update = function() {
vm.data = pageFactory.get(vm.service);
}
//default call
vm.update();
})
// I have to inject the same stuff over and over again
routerApp.controller('page2Ctrl', function(pageFactory) {
var vm = this;
// page dependent
vm.name = 'theTwo';
vm.service = 'twoService';
vm.seriesLabels = ['One2', 'Two2'];
// these variables are declared in all pages
// directive variables,
vm.date = {
date: moment().startOf('month').valueOf(),
dateOptions: {
formatYear: 'yy',
startingDay: 1
},
format: 'dd-MMMM-yyyy',
opened: false
};
vm.open = function($event) {
vm.date.opened = true;
};
// dataservice
vm.data = []; // the structure can be different but still similar enough
vm.update = function() {
vm.data = pageFactory.get(vm.service);
}
//default call
vm.update();
})
// I have to inject the same stuff over and over again
routerApp.controller('page3Ctrl', function(pageFactory) {
var vm = this;
// page dependent
vm.name = 'theThree';
vm.service = 'threeService';
vm.seriesLabels = ['One3', 'Two3', 'Three3', 'Four3'];
// these variables are declared in all pages
// directive variables,
vm.date = {
date: moment().startOf('month').valueOf(),
dateOptions: {
formatYear: 'yy',
startingDay: 1
},
format: 'dd-MMMM-yyyy',
opened: false
};
vm.open = function($event) {
vm.date.opened = true;
};
// dataservice
vm.data = []; // the structure can be different but still similar enough
vm.update = function() {
vm.data = pageFactory.get(vm.service);
}
//default call
vm.update();
})
<div class="well">
<p>This data is different in every controller.</p>
<p>DIFFERENT VALUE 1: {{vm.name}} </p>
<p>DIFFERENT VALUE 2: {{vm.service}} </p>
<p>DIFFERENT VALUE 3: {{vm.seriesLabels}} </p>
</div>
<div class="well">
<p>Here goes some stuff that is operated by directives.</p>
<p>All the pages use objects declared in the same way. But not the same object.</p>
<div class="row">
<div class="col-md-3">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{vm.date.format}}" ng-model="vm.date.date" is-open="vm.date.opened" datepicker-options="vm.date.dateOptions"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
<div class="well">
<p>Structure is the same but the data is different</p>
<table class="table table-striped table-hover reportTable">
<thead>
<tr>
<th>Timestamp</th>
<th ng-repeat="series in vm.seriesLabels">{{series}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.data">
<td ng-repeat="it in item track by $index">
<span ng-if="$index === 0">{{it | date : vm.timeFormat}}</span>
<span ng-if="$index !== 0">{{it}}</span>
</td>
</tr>
<tr ng-if="vm.data[0] === undefined">
<td colspan="10" class="bg-warning text-warning">No data available</td>
</tr>
</tbody>
</table>
</div>
routerApp.factory('pageFactory', function() {
return {
get: get
}
function get(path) {
var data = [];
// normally this data comes from server
// this is just as an example
switch (path) {
case 'oneService':
data = [
// date, series1, series2, series
[1446418800000, 2, 2, 1],
[1446505200000, 0, 0, 0],
[1446591600000, 14, 12, 2],
[1446678000000, 65, 38, 27],
[1447369200000, 12, 2, 10],
[1447455600000, 0, 0, 0],
[1447542000000, 0, 0, 0],
[1447628400000, 0, 0, 0],
[1447714800000, 1, 0, 1]
];
break;
case 'twoService':
data = [
[1447369200000, 12, 20],
[1447455600000, 0, 10],
[1447542000000, 0, 0],
[1447628400000, 0, 0],
[1447714800000, 1, 11]
];
break;
case 'threeService':
data = [
[1446591600000, 14, 12, 2, 5],
[1446678000000, 65, 38, 27, 1],
[1446764400000, 11, 6, 5, 0],
[1446850800000, 0, 0, 0, 3]
];
break;
}
return data;
}
})
<div class="modal-header">
<button type="button" class="close" aria-label="Close">
<span ng-click="$dismiss()" aria-hidden="true">×</span>
</button>
<h4><span class="glyphicon glyphicon-ok"></span> Success</h4>
</div>
<div class="modal-body">
<p>Change state?</p>
</div>
<div class="modal-footer">
<div class="text-right">
<div class="text-right">
<button type="button" class="btn btn-sm btn-primary" ng-click="$close()">Ok
</button>
<button type="button" class="btn btn-sm btn-primary" ng-click="$dismiss()">No
</button>
</div>
</div>
</div>