Angular JS: So laden Sie JS-Dateien in Partials

Sehr neu zu AngularJS, ich rate den Begriff für das, was ich versuche zu tun ist Lazy Load. Ich habe mir verschiedene Blogs angeschaut und keine vollständige Arbeitslösung gefunden, die ausschließlich AngularJS verwendet.Angular JS: So laden Sie JS-Dateien in Partials

Ich verstehe, dass, wenn ich die <script src="js/process1.js"></script> in index.html setzen, alles funktioniert gut, ich versuche, auf die Menge von js zu reduzieren, die auf die anfängliche Last heruntergezogen wird.

Mit dem Skript-Tag in der partiellen sitzt, ist es nie geladen, so dass die P1Ctrl nie erstellt wird. Wenn also ein Benutzer in die Anwendung einsteigt und nie zu process55 geht, hat der Benutzer noch immer den Code für process55, obwohl er nie verwendet wurde.

Gibt es eine Möglichkeit, die Datei zu laden und die in process1.js erstellten Objekte in die App einzufügen, die in main definiert ist, zu der Zeit, zu der process1 route ausgeführt wird?

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Large Angular App</title> 
    <link rel="stylesheet" href="lib/foundation/css/foundation.min.css" /> 
</head> 
<body ng-app="largeApp" ng-controller="LargeAppController"> 

    <div> 
     <a href="#/home">Home</a> | <a href="#/process1">Process1</a> 
    </div> 
    <br/> 
    <br/> 
    <br/> 

    <ng-view>Test</ng-view> 


    <script type="text/javascript" src="lib/jquery/jquery.min.js"></script> 
    <script type="text/javascript" src="lib/angular/angular.js"></script> 
    <script type="text/javascript" src="lib/angular/angular-route.js"></script> 
    <script type="text/javascript" src="js/main.js"></script> 
</body> 
</html>

js/main.js:

var app = angular.module("largeApp", ['ngRoute']); 

var appCtrl = app.controller("LargeAppController", function(){}); 


app.config(function ($routeProvider, $controllerProvider) { 
    // save references to the providers 

    app.registerCtrl = $controllerProvider.register, 

    $routeProvider.when('/', {templateUrl: 'partials/home.html'}); 
     //Thinking I need to set up a resolve to fire off a script loader to load js. 
    $routeProvider.when('/process1', {templateUrl: 'partials/process1/process1.html'}); 
    $routeProvider.otherwise({redirectTo: '/'}); 
});

partials/home.html:

<div> 
    Home Page 
    </div>

partials/process1.html:

<script type="text/javascript" src="js/process1/Process1Controller.js"></script> 
Process 1 {{process1data}}

js/process1.js:

console.log("I made it here"); 

app.registerCtrl('Process1Controller',function($scope){ 
      $scope.process1data = "Hello!"; 
     } 
]);

Quelle

2013-10-17 John

verzögertes Laden von Steuerungen auf einfache Art und Weise zu implementieren, müssen Sie folgendes tun:

Speicher $controllerProvider.register (das ist die einzige Methode ist, einen Controller in bereits hinzufügen Bootstrap AngularJS app) variabel in Ihrer Anwendung (main.js):

var app = angular.module('app',["ngRoute"]); 
app.config(['$routeProvider', '$controllerProvider', 
    function($routeProvider, $controllerProvider) { 
     // remember mentioned function for later use 
     app.registerCtrl = $controllerProvider.register; 
     //your routes 
     $routeProvider.when('/', {templateUrl: 'partials/home.html'}); 
     $routeProvider.when('/process1', {templateUrl: 'partials/process1.html'}); 
     $routeProvider.otherwise({redirectTo: '/'}); 
    } 
]);

process1.html:

<script src="js/process1.js"></script> 
<div ng-controller="P1Ctrl"> 
    {{content}} 
</div>

Und jetzt, in process1.js Sie verwenden unsere registerCtrl:

app.registerCtrl('P1Ctrl', function($scope) 
{ 
    $scope.content = '...'; 
});

index.html wahrscheinlich gleich bleibt. Überprüfen Sie, ob Ihre process1.js geladen wird (einfach console.log() direkt im Gehäuse von process1.js, nicht in P1Ctrl Controller). Wenn dies nicht der Fall, sind jQuery vor Eckig:

<script src="lib/jquery/jquery.js"></script> 
<script src="lib/angular/angular.js"></script>

WICHTIG: Diese Methode ist nicht mit Winkel 1.2.0-rc.2 und 1.2.0-rc.3, weil dieser kleine Trick funktioniert mit jQuery funktioniert nicht.

Für komplexere (und schönere) Lösung, mit .js Dateien als Abhängigkeiten in Route Definitionen, überprüfen Sie diesen Artikel: http://ify.io/lazy-loading-in-angularjs/ - es funktioniert auch mit rc.2 und rc.3.Hier ist die Implementierung der beschriebenen Methode plunk: http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD

Quelle

2013-10-17 19:46:09 lort

Setzen Sie all dies zusammen und es bricht nicht, aber es funktioniert auch nicht. Versucht mit und ohne die JQuery-Referenz. Die Seite wird ohne Fehler angezeigt, aber die js wird nie aufgerufen und Daten werden vom Controller in die Ansicht geschrieben. Ein Blick auf diese IFY-Site, die Sie erwähnt haben, scheint darauf hinzuweisen, dass ich einen Script-Loader brauche und Versprechungen verwende. Ich weiß, dass ich in der Nähe bin ... aber noch nicht ganz da. – John

Ich habe gerade festgestellt, dass dieser Trick mit jQuery nicht mit Angular 1.2 funktioniert. – lort

Das hat den Trick auf 1.1.5 geschaltet. – John

Angular JS: So laden Sie JS-Dateien in Partials

Antwort

Verwandte Themen