Angular JS: Как загрузить js файлы в частичных

Очень новый для AngularJS, я предполагаю, что термин, который я пытаюсь сделать, - ленивая нагрузка. Я просмотрел несколько разных блогов, и я не нашел полного рабочего решения, которое использует только AngularJS.

Я понимаю, что если я помещаю <script src="js/process1.js"></script> в index.html, все работает нормально, я пытаюсь сократить количество js, которое вытаскивается при начальной загрузке.

С тегом script, сидящим в частичном, он никогда не загружается, поэтому P1Ctrl никогда не создается. Так что в настоящее время, если пользователь входит в приложение и никогда не переходит к процессу55, у пользователя все еще есть код для процесса55, хотя он никогда не использовался.

Есть ли способ загрузить файл и вставить объекты, созданные в process1.js, в приложение, определенное в основном, во время выполнения маршрута 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: '/'});
});

обертоны/home.html:

   <div>
    Home Page
   </div>

обертоны/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!";
        }
]);

Ответы

Ответ 1

Чтобы реализовать ленивую загрузку контроллеров простым способом, вы должны сделать следующее:

Сохранить $controllerProvider.register (который является единственным способом добавить контроллер в уже загруженное приложение AngularJS) в переменную в вашем приложении (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>

И теперь, в process1.js, вы используете наш registerCtrl:

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

index.html, вероятно, останется прежним. Проверьте, загружен ли ваш process1.js (просто используя console.log() прямо в теле process1.js, а не в контроллере P1Ctrl). Если это не так, включите jQuery перед Angular:

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

ВАЖНО: Этот метод не работает с angular 1.2.0-rc.2 и 1.2.0-rc.3, потому что этот небольшой трюк с jQuery не работает.

Для более сложного (и более красивого) решения с .js файлами в качестве зависимостей в определениях маршрутов проверьте эту статью: http://ify.io/lazy-loading-in-angularjs/ - она ​​также работает с rc.2 и rc.3. Ниже приведен пример использования описанного метода: http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD