After exploring numerous tutorials on creating basic modals using angular bootstrap, I've noticed that most examples are geared towards single-page applications without the use of route provider or more intricate architectural patterns. What specific modifications are required in this Plnkr code to allow a modal service to be invoked through a controller in an application utilizing route provider?
The mentioned example in the provided plnkr demonstrates an application with:
1.) a route provider featuring two routes, / and /public1.
2.) A navigation controller managing the table of contents positioned above one or both routes.
3.) Injection of a modalService into the navigation controller.
4.) The presence of a div in index.html containing the table of contents controlled by the navigation controller. A button within this navigation div invokes the deleteCustomer() method of the controller which should trigger the appearance of a modal. What alterations need to be implemented for the modal to display upon clicking the button?
Upon attempting to launch the app, my FireFox debugger on the devbox logs the following error:
Error: [$injector:modulerr] Failed to instantiate module hello due to:
[$injector:modulerr] Failed to instantiate module navigation due to:
[$injector:modulerr] Failed to instantiate module modalService due to:
[$injector:nomod] Module 'modalService' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.0/$injector/nomod?p0=modalService
minErr/<@http://localhost:9000/bower_components/angular/angular.js:68:12
module/<@http://localhost:9000/bower_components/angular/angular.js:2015:1
ensure@http://localhost:9000/bower_components/angular/angular.js:1939:38
module@http://localhost:9000/bower_components/angular/angular.js:2013:1
loadModules/<@http://localhost:9000/bower_components/angular/angular.js:4503:22
forEach@http://localhost:9000/bower_components/angular/angular.js:321:11
loadModules@http://localhost:9000/bower_components/angular/angular.js:4
When downloading the Plnkr source as a zip file, then extracting and debugging in the local browser, the FireFox debugger indicates failure to instantiate the hello module—core to the Plnkr app. Once we resolve the simple issue of loading the main module of the app, recreating the problem within the Plnkr app should be straightforward. (Guidance on resolving this would be greatly appreciated).
THE CODE:
Although the complete code is available in the linked Plnkr, excerpts are presented below:
index.html snippet:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7c2de9ad5d8d8c3c4c3c5d6c7f7879986849986">[email protected]</a>" data-semver="0.13.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9bca0e4aba6a6bdbabdbba8b989f9e7f8fae7f8">[email protected]</a>" data-semver="0.13.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" data-semver="1.5.0" data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1c131a08111c0f170e3d4c5348534d">[email protected]</a>"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
<!-- start of content section -->
<h1>Hello Plunker!</h1>
<div ng-controller="navigation" class="container">
<ul class="nav nav-pills" role="tablist" >
<li><a class="label label-success" href="/">Home</a></li>
<li><a class="label label-success" href="/public1">public1</a></li>
</ul>
<!-- modal test follows -->
<p><a href class="btn btn-default btn-lg " ng-click="deleteCustomer()">Click to Delete Customer</a></p>
<!-- end of modal test -->
</div>
<div class="container">
<div ng-view=""></div>
</div>
<!-- end of content section -->
<!-- begin local build files -->
<!-- <script src="script.js"></script> -->
<script src="modalService.js"></script>
<script src="home.js"></script>
<script src="public1.js"></script>
<script src="navigation.js"></script>
<!-- end local build files -->
</body>
</html>
script.js code snippet:
'use strict';
/** * Main module of the application. */
angular
.module('hello', [
'ngAnimate',
'ngRoute',
'ngTouch', 'home', 'public1', 'navigation'
])
.config(function ($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'home',
controllerAs: 'home'
})
.when('/public1', {
templateUrl : 'public1.html',
controller : 'public1',
controllerAs: 'public1'
})
.otherwise('/');
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
})
.run([ function() {
}]);
navigation.js excerpt:
'use strict';
angular
.module('navigation', ['modalService', 'ngRoute'])
.controller('navigation', function($scope, modalService, $route) {
$scope.tab = function(route) {
return $route.current && route === $route.current.controller;
};
$scope.deleteCustomer = function () {
var custName = 'Some Random Person';
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Delete Customer',
headerText: 'Delete ' + custName + '?',
bodyText: 'Are you sure you want to delete this customer?'
};
modalService.showModal({}, modalOptions).then(function (result) {
//some code will go here. But for now can we just
//get the modal to appear and for the cancel button to work?
});
}
});
And modalService.js segment:
'use strict';
angular.module('modalService').service('modalService', ['$modal',
function ($modal) {
var modalDefaults = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: 'modalContent.html'
};
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
if (!customModalDefaults) customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
}
}
return $modal.open(tempModalDefaults).result;
};
}]);