web-dev-qa-db-fra.com

Angular JS: Comment charger des fichiers js dans des partiels

Très nouveau chez AngularJS, je devine que le terme pour ce que je veux faire est "charge paresseuse". J'ai consulté plusieurs blogs et je n'ai pas trouvé de solution de travail complète utilisant uniquement AngularJS.

Je comprends que si je mets le <script src="js/process1.js"></script> in index.html, tout fonctionne bien, je suis en train de réduire la quantité de JS qui est tiré sur la charge initiale.

Lorsque la balise de script se trouve dans le partiel, elle n’est jamais chargée et la P1Ctrl n’est jamais créée. Donc actuellement, si un utilisateur va dans l'application et ne va jamais à process55, il a toujours le code pour process55 même s'il n'a jamais été utilisé.

Existe-t-il un moyen de charger le fichier et d’injecter les objets créés dans process1.js dans l’application définie dans main, au moment de l’exécution de la route process1?

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: '/'});
});

partiels/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!";
        }
]);
javascriptjqueryhtmlangularjs
47
John

Pour implémenter le chargement paresseux des contrôleurs de manière simple, vous devez procéder comme suit:

Enregistrez $controllerProvider.register (Qui est la seule méthode permettant d’ajouter un contrôleur dans une application AngularJS déjà amorcée) en variable dans votre application ( 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>

Et maintenant, dans process1.js , vous utilisez notre registerCtrl:

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

index.html reste probablement le même. Vérifiez si votre process1.js Est en cours de chargement (utilisez simplement console.log() dans le corps de process1.js Et non dans le contrôleur P1Ctrl). Si ce n'est pas le cas, incluez jQuery avant Angular:

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

IMPORTANT: Cette méthode ne fonctionne pas avec angular 1.2.0-rc.2 et 1.2.0-rc .3, car ce petit truc avec jQuery ne fonctionne pas.

Pour une solution plus complexe (et plus jolie), avec les fichiers .js Comme dépendances dans les définitions de route, vérifiez cet article: http://ify.io/lazy-loading-in-angularjs/ - cela fonctionne aussi avec rc.2 et rc.3. Voici la méthode décrite par implémentation de plunk: http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD

21
lort