ng-view - Load Controller in template page

Question

I've a module where I configure a route like this :

var app = angular.module("myModule", ['ui.grid','ui.bootstrap','ngRoute']);
app.config(function ($routeProvider) {
        $routeProvider.when('/subjects', {
            templateUrl: 'Subjects.aspx',
            controller: 'SubjectsController'
        })
    }

In the template page I configure the controller like this :

<script src="/Scripts/SPScripts/Services/SubjectService.js"></script>
<script src="/Scripts/SPScripts/Controllers/SubjectController.js"></script>

        <div id="dvcollection" data-ng-controller="SubjectController">
            <div style="padding-left: 15px; padding-bottom: 10px;">
                <button type="button" id="addRow" class="btn btn-success" data-ng-click="addRow()">Nuovo</button>
            </div>
            <div class="gridStyle" data-ui-grid="gridOptions"></div>
        </div>

In this way the controller is undefinied and seems that the scripts aren't loaded in the page correctly.

If I move the scripts in my Master Page (where I load the angular module) the controller is loaded correctly.

MasterPage :

<script src="/Scripts/SPScripts/Modules/Module.js"></script>
<div class="container body-content"  data-ng-app="myModule">
            <div data-ng-view></div>
        </div>

I would like to load the various controllers on the pages where are needed so as not to burden the application, since they are loaded all into the master page.

**** - EDIT - ****

Seems that I can load scripts by using the 'resolve' in route :

var resolveController = function (path) {
  var deferred = $q.defer();
  var script = document.createElement('script');
  script.src = path;
  script.onload = function () {
    $scope.$apply(deferred.resolve());
  };
  document.body.appendChild(script);
  return deferred.promise;
};

app.config(function ($routeProvider) {
        $routeProvider.when('/subjects', {
            templateUrl: 'Subjects.aspx',
            controller: 'SubjectsController',
            resolve: resolveController('/Scripts/SubjectController.js')
        })
    }

But I retrieve the error : $q is not defined.

Is it the correct way?

Possible duplicate of [Using AngularJS routing and loading controllers on demand using requirejs](http://stackoverflow.com/questions/15155457/using-angularjs-routing-and-loading-controllers-on-demand-using-requirejs) — Zakaria, Feb 29 '16 at 10:49
I think you need to highlight what you want, because the answers that i am seeing are completely out of context. All i can understand from your question is you want the script files needed for the particular template to be included only on the templates and not on the master page — Sunil Lama, Feb 29 '16 at 10:56
yes, i would load the script files in the various template pages but seems that my approach is wrong — lpernice, Feb 29 '16 at 11:18

score 0 · Answer 1 · answered Feb 29 '16 at 10:45

0

try this : remove data-ng-controller="SubjectController" from template

answered Feb 29 '16 at 10:45

Hadi J

16,989
4
36
62

SubjectController or SubjectsController? – Hadi J Feb 29 '16 at 11:42
please check SubjectController name in controller – Hadi J Feb 29 '16 at 11:43
sorry, the name are correct. it's only a writing mistake – lpernice Feb 29 '16 at 11:47

score 0 · Answer 2 · answered Feb 29 '16 at 10:51

In Your Angular Module File :

var app = angular.module("myModule", ['ui.grid','ui.bootstrap','ngRoute']);
app.config([ $routeProvider , function ($routeProvider) {
        $routeProvider.when('/subjects', {
            templateUrl: 'Subjects.aspx',
            controller: 'SubjectsController'
        });
    }])

Then in Your Template File

<div id="dvcollection" >
            <div style="padding-left: 15px; padding-bottom: 10px;">
                <button type="button" id="addRow" class="btn btn-success" data-ng-click="addRow()">Nuovo</button>
            </div>
            <div class="gridStyle" data-ui-grid="gridOptions"></div>
        </div>

In Your master Page

<script src="/Scripts/SPScripts/Modules/Module.js"></script>
<div class="container body-content"  data-ng-app="myModule">
        <div data-ng-view></div>
</div>

score 0 · Answer 3 · edited May 23 '17 at 12:32

after your edit it seems you didn't 'inject' $q in your resolver :

var resolveController = function ($q,$rootscope) {
  var deferred = $q.defer();
  var script = document.createElement('script');
  script.src = '/Scripts/SubjectController.js';
  script.onload = function () {
    $rootscope.$apply(deferred.resolve());
  };
  document.body.appendChild(script);
  return deferred.promise;
};

app.config(function ($routeProvider) {
    $routeProvider.when('/subjects', {
        templateUrl: 'Subjects.aspx',
        controller: 'SubjectsController',
        resolve: { resolveController: resolveController
    })
}

I've replaced $scope with $rootscope and injected it as $scope isn't defined.

Hope this help, found this question on the subject with a interesting discussion about it.

score 0 · Answer 4 · answered Aug 02 '16 at 10:27

0

You need to do this:

$injector = angular.injector(['ng']);
q = $injector.get('$q');
var deferred = q.defer();

answered Aug 02 '16 at 10:27

sTx

1,213
13
32

ng-view - Load Controller in template page

4 Answers4