AngularJS controller reference becomes undefined

Question

I've just started learning AngularJS and built a small yet simple application, which consists of multiple controllers as shown here:

I have a SiteMaster.html page, inside this page I use ng-view as shown here:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/app.js"></script>  <!-- Consists of Routing  -->
    <script src="Templates/Params/paramsController.js"></script>

    <title>Angular Routing Tutorial</title>
</head>
<body ng-app="mainApp">
    <h1>sitemaster Template</h1>
    <div ng-view></div>
</body>

</html>

As you can see the last script tag is the controller for the params page, Ideally I don't want this script tag reference on the SiteMaster instead I would like to place it inside the params.HTML page that way it's only loaded when it's required, now I've moved this script tag from the SiteMaster.Html to the params.Html page as shown here:

<script src="paramsController.js"></script>

<div ng-controller="paramsCtrl">
  <h1>
      Passed a parameter via url
  </h1>
</div>

Yet when I run the project I get the following error:

Error: [ng:areq] http://errors.angularjs.org/1.5.2/ng/areq?p0=paramsCtrl&p1=not%20a%20function%2C%20got%20undefined

So my question is, how do I get this paramsController.js reference to work within the params.html page? instead of having it on the SiteMaster.html page?

Please note, when the paramsController.js is placed inside the SiteMaster.Html page it works as expected.

Any help would be appreciated.

Update After adding ocLazyLoad I have done the following:

Added the script reference to sitemaster.html

Inside my app.js I have done the following:

var app = angular.module('mainApp', ['ngRoute', "oc.lazyLoad"]);

Inside my paramsController.js I have the following:

angular.module("mainApp").controller('paramsCtrl', function ($scope, $routeParams, $ocLazyLoad) {

console.log($routeParams);

var param1 = $routeParams.page_number;

alert(param1);

});

And now I've hit a road block I'm unsure where or how I go about loading this controller via ocLazyLoad ? I following this documentation : https://oclazyload.readme.io/docs

i think path of paramsController is incorrect in params.Html file. — Hadi J, Mar 27 '16 at 07:37

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

First of all, your path is wrong. Change

<script src="paramsController.js"></script>

to

<script src="Templates/Params/paramsController.js"></script>

Also, include the following in your <head> section:

<base href="/">

And the second thing, I'm not sure, even that will not work as Angular has already been initialized. So you need to use a library like ocLazyLoaded to dynamically load resources.

Also, consider reading this post https://stackoverflow.com/a/17675432/2405040

Update:

In your params.html

<!-- Remove this line
<script src="paramsController.js"></script>
-->

<div ng-controller="paramsCtrl">
    <h1>
        Passed a parameter via url
    </h1>
</div>

And now modify your $routeProvider configuration:

(From the docs https://oclazyload.readme.io/docs/with-your-router)

$routeProvider.
    when('/foo', {
        templateUrl: 'Templates/Params/params.html',
        resolve: {
            loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                 // you can lazy load files for an existing module
                return $ocLazyLoad.load('Templates/Params/paramsController.js');
            }]
        }
    })

I've tried this, however I still get the same error, When you say add the following to the head section is that on the sitemaster or params.html page? — Code Ratchet, Mar 27 '16 at 07:44
Not yet no, was just trying the following options you had provided — Code Ratchet, Mar 27 '16 at 07:45
Just added an update after installing / configuring the ocLazyLoad, any help would be appreciated. — Code Ratchet, Mar 27 '16 at 07:56

AngularJS controller reference becomes undefined

1 Answers1