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
– Hadi, Commented Mar 27, 2016 at 7:37

Community · Accepted Answer · 2017-05-23 12:23:50Z

0

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

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Mar 27, 2016 at 7:38

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Code Ratchet Over a year ago

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 Over a year ago

Not yet no, was just trying the following options you had provided

Code Ratchet Over a year ago

Just added an update after installing / configuring the ocLazyLoad, any help would be appreciated.

Collectives™ on Stack Overflow

AngularJS controller reference becomes undefined

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related