Ich habe viele Tutorials über das Erstellen einfacher Mods mit eckigen Bootstrap gelesen. Alle Beispiele scheinen jedoch auf Single-Page-Apps zu basieren, die keinen Routenanbieter oder andere komplexere Architekturmuster verwenden. Welche spezifischen Änderungen müssen an the code in this plnkr vorgenommen werden, damit ein modaler Dienst über einen Controller in einer App aufgerufen werden kann, die den Routenanbieter verwendet?Wie rufen Sie einen modalen Dienst in einer App mit einem Routenanbieter auf?
Das Beispiel in der Verbindung oben plnkr ist eine Anwendung, die aufweist:
1.) ein Leitweg-Anbieter mit zwei Routen, / und /public1.
2.) Ein navigation Controller verarbeitet das Inhaltsverzeichnis und befindet sich somit über beliebigen/beiden Routen.
3.) Ein modalService wird in den navigation Controller eingespeist.
4.) Und index.html enthält ein div mit dem Inhaltsverzeichnis, das von der navigation-Steuereinheit verwaltet wird. Eine Schaltfläche innerhalb des Navigationsbereichs in ruft die deleteCustomer()-Methode des Controllers auf, die dann ein Modal anzeigen sollte. Welche Änderungen müssen vorgenommen werden, damit das Modal beim Klicken auf die Schaltfläche angezeigt wird?
Auf meinem devbox wird die FireFox Debugger Erzeugen der folgenden Kompilierungsfehler, wenn ich versuche, die App zu starten:
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
[email protected]://localhost:9000/bower_components/angular/angular.js:1939:38
[email protected]://localhost:9000/bower_components/angular/angular.js:2013:1
loadModules/<@http://localhost:9000/bower_components/angular/angular.js:4503:22
[email protected]://localhost:9000/bower_components/angular/angular.js:321:11
[email protected]://localhost:9000/bower_components/angular/angular.js:4
Als ich die plnkr als Zip-Download dann und Debug in meinem devbox entpacken Browser, der FireFox-Debugger sagt, dass es nicht in der Lage ist, das Modul hello zu instanziieren, die die Wurzel der PLNRK-App ist. Die PLNKR-App sollte also in der Lage sein, das Problem neu zu erstellen, sobald wir das einfache Problem lösen, das Hauptmodul für das Laden der App zu bekommen. (Ein Kommentar, der erklärt, wie dankbar wäre.).
DER CODE:
Obwohl der vollständige Code in der plnkr auf den Link oben ist, werde ich auch Abschnitte des Codes kopieren wie folgt:
index.html ist:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<link data-require="[email protected]" 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="[email protected]" 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="[email protected]"></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 ist:
'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 ist:
'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?
});
}
});
Und modalService.js ist:
'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;
};
}]);
Wenn Sie sagen "meine lokale Devbox lässt Javascript/Angular nicht kompilieren", sprechen Sie über Verkettung/Uglify - Aufgabe? –
Es ist ein Websocket-Problem, Sie können einen neuen Thread öffnen :) –
Sie haben die gleiche Fehlermeldung? –