AngularJS - bei Routenwechsel anderes Script sowie anderen CSS Stylesheet laden

[SpeedyX]

Hi Leute,

ich habe eine Webseite, auf der ich das Angular Framework zum Routing verwende. Funktioniert soweit einwandfrei.
Nun würde ich gerne für jede Seite, die durch Routing nachgeladen wird auch einzelne JS und CSS Dateien mitladen. Wie gehe ich dabei am besten vor?

Zurzeit sieht mein Aufbau so aus:

var hcpApp = angular.module('hcpApp', ['ngRoute']);

hcpApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
     .when('/', {
       title: 'Startseite',
       templateUrl: 'pages/home.php',
       script: 'scripts/home.js',
       css: 'css/home.css',
       id: 1,
       sub_id: 0,
     })
     .when('/change_username', {
       title: 'Benutzername ändern',
       templateUrl: 'pages/change_username.html',
       script: 'scripts/change_username.js',
       css: 'css/change_username.css',
       id: 2,
       sub_id: 1
     })
     .when('/change_email', {
       title: 'E-Mail Adresse ändern',
       templateUrl: 'pages/change_email.html',
       script: 'scripts/change_email.js',
       css: 'css/change_email.css',
       id: 2,
       sub_id: 2
     })
     .when('/change_pw', {
       title: 'Passwort ändern',
       templateUrl: 'pages/change_pw.html',
       script: 'scripts/change_pw.js',
       css: 'css/change_pw.css',
       id: 2,
       sub_id: 3
     })
     .when('/additional_infos', {
       title: 'Sonstige Informationen',
       templateUrl: 'pages/additional_infos.html',
       script: 'scripts/additional_infos.js',
       css: 'css/additional_infos.css',
       id: 2,
       sub_id: 4
     })
     .when('/admin_cp/usermanagement', {
       title: 'Benutzerverwaltung',
       templateUrl: 'pages/usermanagement.php',
       script: 'scripts/usermanagement.js',
       css: 'css/usermanagement.css',
       id: 3,
       sub_id: 1
     })
     .when('/admin_cp/settings', {
       title: 'Allgemeine Einstellungen',
       templateUrl: 'pages/general_settings.php',
       script: 'scripts/general_settings.js',
       css: 'css/general_settings.css',
       id: 3,
       sub_id: 2
     })
     .otherwise({
       redirectTo: '/'
     });
   if(window.history && window.history.pushState){
     $locationProvider.html5Mode(true);
   }
}]);

hcpApp.run(['$location', '$rootScope', function($location, $rootScope) {
  $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
  $rootScope.title = current.$$route.title;
     $rootScope.script = current.$$route.script;
     $rootScope.css = current.$$route.css;
  });
}]);

Wie ihr seht, habe ich bereits die Pfade zu den jeweiligen CSS und JS Dateien angegeben. Mit dem unteren Teil des Codes kann ich dann die jeweiligen Werte in Variablen schreiben, welche ich dann mit ng-bind im Quelltext dynamisch übernehmen kann.

Nur funktioniert das bei mir auf diese Methode nicht:

<script type="text/javascript" ng-bind="'src=' + script"></script>

So fügt er logischerweise "src=scripts/<file>.js" zwischen <script> und </script> ein.

Ich bekomme es aber auch nicht hin, dass das script zwischen src=" und " ausgegeben wird bzw. ist das überhaupt möglich? Und was ich auch noch bezweifle ist, dass das Script dann überhaupt geladen würde.

Hat jemand eine Idee wie ich mit AngularJS am besten seitenspezifische Scripts nachlade?

Danke schonmal im voraus.

LG

SpeedyX

 

[thecain]

einen Controller verwenden für die einzelne Seite. Ich würde auch mit nur einem CSS File arbeiten, nicht mit mehrern und wenn mehrere dann alle auf der Hauptseite includen. Nichts dynamisch

 

[Tronjer]

Habe jetzt keine Zeit, näher darauf einzugehen, aber grundsätzlich solltest du be den selbst erstellen Scripts und Stylesheets für jede Unterseite eigene Dateien anlegen, die zu jeweils einer .js und .css Datei kompiliert werden. Bei wenig Logik kannst du auch erst mal einen einzigen, gemeinsamen Controller verwenden, und hinsichtlich CSS schau dir mal Sass und Compass an. Da wird dir das Konzept verständlich.

 

[SpeedyX]

Habe es jetzt so gelöst, dass ich das Script einfach auch in die entsprechende PHP / HTML Datei reinschreibe. Ist zwar nicht die schönste Lösung, funktioniert aber.

Würde ich alle Skripte standardmäßig mit einbinden würden jQuery Funktionen wie $().on('click' nicht funktionieren, da das Element halt erst später verfügbar ist. Dann müsste ich alle Buttons/Links mit onClick="" versehen, was auch nicht gerade schön ist.

 

[Tronjer]

Würde ich alle Skripte standardmäßig mit einbinden würden jQuery Funktionen wie $().on('click' nicht funktionieren, da das Element halt erst später verfügbar ist. Dann müsste ich alle Buttons/Links mit onClick="" versehen, was auch nicht gerade schön ist.

Der Weg von jQuery ist unobstrusives JavaScript. Man schreibt erst eine HTMLSeite und anschließend das Script mit Eventlistenern wie $('foo').on('click', 'bar', function() {}). Nachteilig ist dabei, das by default alles im globalen Namespace liegen, und sich beim Betrachten des HTML nicht ersehen lässt, welche JS-Funktionen eventuell auf den Tags liegen. Wenn die Site wächst, wird das sehr schnell unübersichtlich. Für wartbaren und testfähigen Code eignet sich jQuery nicht wirklich.

Angular wählt hier einen anderen Ansatz. Die Direktive ng-app macht aus deiner HTML-Seite ein Template, das in Verbindung mit dem Controller einen View ausliefert. Für Eventhandler verwendest du weder das alte onclick() noch jQuery $().on('click') sondern ng-click(). Damit wird die Funktion an den $scope des jeweiligen Controllers gebunden.

Dessen ungeachtet funktioniert jQuery innerhalb von Controllern trotzdem. Angular schaut, ob zusätzlich noch jQuery eingebunden wurde. Falls ja, verwendest es das, ansonsten sein eigenes Subset (jQuery Lite). Du solltest die Funktionen allerdings nicht auf jQuery sondern auf Angular Objekte aufrufen. Aus $() wird angular.element() und aus $(this) angular.element(event.target)

 

[Tronjer]

Noch mal zur Struktur deiner Seite. Idealer Weise stellst du dir per Grunt oder Yeoman deine eigene Toolchain zusammen. Sollte das jetzt noch zu komliziert für dich sein, kannst du es für den Anfang auch vereinfachen. Binde in die index.html am Fuß der Seite Angular, jQuery und eine main.js ein. In die main.js kommen sämtliche Routen und Controller. Lege für jede Unterseite einen eigenen Controller an. Damit sind alle Funktionen immer verfügbar, aber trotzdem an ihren jeweiligen $scope gebunden.

 

[SpeedyX]

Hmm, ok! Werde es mal versuchen. Danke!