+- PHP Rocks (https://www.php-rocks.de)
+-- Forum: HTML, CSS, Usability und Barrierefreiheit (https://www.php-rocks.de/https://www.php-rocks.de/forum/11-html-css-usability-und-barrierefreiheit.html)
+--- Forum: JavaScript / JavaScript Frameworks / Ajax (https://www.php-rocks.de/https://www.php-rocks.de/forum/13-javascript-javascript-frameworks-ajax.html)
+--- Thema: angularJS AngularJS asynchronous/defered bootstrapping (/https://www.php-rocks.de/thema/86-angularjs-asynchronous-defered-bootstrapping.html)
AngularJS asynchronous/defered bootstrapping - Till - 24.01.2016
Hallo,
bin relativ neu bei AngularJS, möchte mehr lernen und das framwork gerne verwenden.
Vorneweg: Laut docs soll pro HTML Document nur EINMAL ng-app verwendet werden.
Um diese Einschränkung zu umgehen verwende ich die directive http://stackoverflow.com/questions/22548610/can-i-use-one-ng-app-inside-another-one-in-angularjs und den ng-modules Ansatz (bei mir ng-flow): https://github.com/luisperezphd/ngModule/blob/master/angular.ng-modules.js
Sieht nun bei mir so aus: https://github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/core/plugin.flow.js
Die Funktion frdl.UI.widget ist hier der entscheidende Part?
Zum Problem: Wenn ich die Seite das erste mal lade, alles OK.
Wenn ich die Seite nochmal lade (per Linkklick z.B.), werden die angular templates nicht korrekt kompilliert.
Wenn ich dann den Browsercache lösche und neu lade, oder nach einer Weile neu lade geht es wieder.
Kann jemand das Problem nachvollziehen:
http://shell.frdl.de/?test=component&component=webfan/marketplace
oder ein anderes Beispiel:
http://shell.frdl.de/?test=component&component=webfan/nachrichten
Meine These ist, das Template wird zu früh (und damit erfolglos) kompilliert, wenn das js-angular-modul noch nicht geladen ist?
Problematisch scheint auch zu sein, wenn ich, wie zunächst beabsichtigt, nicht einzelne angular.module erstelle sondern nur controller und directives dem bereits geladenen "Haupt-" Modul hinzufüge!?
Irgendwie scheine ich dem Problem auf der Spur, mir fehlt aber wohl noch die entscheidende Einsicht.
Viele Grüße
Till
Edit: Dabei macht es einen Unterschied, ob ich in die Browserleiste klicke und Enter drücke, oder den Browser-refresh-btn klicke um die Seite neu zu laden?
Edit: Mh, klappt nur bedingt, bzw. wenn die Seite geladen wurde muß ich wieder "ganz manuell" bootstrappen?
RE: AngularJS asynchronous/defered bootstrapping - Till - 27.01.2016
Ich glaube ich habe die Lösung, zumindest kann ich so asynchron module bootstrappen und laden:
- Ich mache die initNgFlows Funktion global verfügbar:
Code:
frdl.UI.Compile = function(){
frdl.ready(function(){
angular.element(document).ready(function() {
initNgFlows(document);
});
});
};Wenn ich ein neues Modul geladen habe rufe ich frdl.UI.Compile(); auf.
Zuvor hatte mich der Fehler daran gehindert: "App Already Bootstrapped with this Element"
Durch Abnderung der Funktion initNgFlows kann ich den Fehler abfangen:
Code:
for(var i = 0; i < moduleElements.length; i++) {
//...
if( frdl.hasScope(moduleElement) )continue;
angular.bootstrap(moduleElement, module);Wenn das Element die Klasse ng-scope besitzt ist das Element bereits bootstrapped.
Das wars, so einfach. (Wenn ich nichts übersehen habe...)
Code:
frdl.hasScope = function(element){
return ($(element).hasClass('ng-scope')) ? true : false;
};RE: AngularJS asynchronous/defered bootstrapping - Till - 04.11.2016
Meine "Widget.Engine" erfüllt nun diese Aufgabe "perfekt".
Falls jemand das gleiche Problem hat, besonders hilfreich ist auch:
Code:
$(element).data('$injector', '');https://github.com/frdl/-Flow/blob/master/cdn/frdl/flow/ui/frdlui.js#L1618
https://github.com/frdl/-Flow/blob/master/cdn/frdl/flow/ui/frdlui.js#L1567