Separate angularJS controller Result in error

Question

I know this have been asked in the past in the following questions: How to create separate AngularJS controller files? Separate AngularJS Controllers Into Separate Files

But however am not being able to correct the issue.

I have a file with the following content:

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
{!! HTML::script('libraries/admin/plugins/jQuery/jQuery-2.1.4.min.js') !!}
{!! HTML::script('libraries/JS/jquery-ui-1.11.1/jquery-ui.min.js') !!}

<!-- Bootstrap 3.3.5 -->
{!! HTML::script('libraries/admin/bootstrap/js/bootstrap.min.js') !!}
{!! HTML::script('libraries/JS/parsley/parsley.2.0.7.min.js') !!}
{!! HTML::script('libraries/JS/sweetalert2-master/dist/sweetalert2.min.js') !!}
{!! HTML::script('libraries/JS/angularjs/angular-1.4.8.min.js') !!}
{!! HTML::script('libraries/JS/angularjs/angular-1.4.8-route.min.js') !!}
{!! HTML::script('libraries/MyAngular/app.js') !!
  </head>
  <body>
<div class="content-wrapper"  ng-controller="mainController" ng-view>    
</div><!-- ./wrapper -->
</body>
</html>

The app.js contain the following code:

var app = angular.module('app',['ngRoute'])
    .config(function($interpolateProvider){
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });

app.config(function($routeProvider){
    $routeProvider

        .when('/',{
            templateUrl: '/admin/pages/Dashboard',
            controler :'mainController'
        })
        .when("/index",{
            templateUrl: '/admin/pages/Dashboard',
            controler :'mainController'
        })
        .when("/activateLink",{
            templateUrl:'/admin/pages/verifyAccount',
            controller:'mainController'
        });

});

app.controller('mainController',['$scope','$templateCache','$route','$location',function($scope, $templateCache,$route,$location) {
        // create a message to display in our view
        //$scope.message = 'OK';
        //$templateCache.removeAll();
        $scope.clear = function(){
            //console.log("clicked");
            //console.log($route.current.originalPath);
            $( "#ActiveWarning" ).show();
            $templateCache.removeAll();
            $route.reload();
            $location.path( $route.current);
        }

}]);

The page /admin/pages/verifyAccount contain the following script:

<div ng-controller="verifyAccountController"><% message %></div>
<script>
angular.module('app').controller('verifyAccountController', function($scope) {
    $scope.message="Test!!!!";
});
</script>

The issue is that am getting the following error:

Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=verifyacc&p1=not%20a%20function%2C%20got%20undefined
G/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:6:416
qb@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:22:131
Qa@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:22:218
Xe/this.$get</<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:80:210
w@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:60:177
D@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:61:30
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:105
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:1
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:1
K/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:54:249
ngViewFillContentFactory/<.link@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:985:7
ea@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:73:293
D@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:62:190
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:55:105
K/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:54:249
R/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:56:79
k@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:60:377
update@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:935:25
lf/this.$get</r.prototype.$broadcast@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:136:157
commitRoute/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:619:15
f/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:119:129
lf/this.$get</r.prototype.$eval@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:133:309
lf/this.$get</r.prototype.$digest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:130:404
lf/this.$get</r.prototype.$apply@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:134:76
g@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:87:442
T@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:92:50
Uf/</w.onload@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8.min.js:93:78

<div class="content-wrapper ng-scope" ng-controller="mainController" ng-view="">

However if I add the controller 'verifyAccountController' in the app.js instead of the '/admin/pages/verifyAccount' page it works perfectly.

I've tried all the solutions described in the links but the error persists.

Eg of codes i tried:

/*
 angular.module('app').controller('verifyAccountController',['$scope',function($scope) {
      $scope.message = "TEST!!";
    }]);

*/
/*
angular.module('app',['ngRoute'])
.controller('verifyAccountController',verifyAccountController);

verifyAccountController.$inject = ['$scope'];

function verifyAccountController($scope){
  $scope.message="Test!!!!";
}
*/

/*
var app = angular.module('app', []);
app.controller('verifyAccountController', function($scope) {
    $scope.message="Test!!!!";
});

angular.module('app', []).controller('verifyAccountController', function($scope) {
    $scope.message="Test!!!!";
});
*/

How can i solve this issue? Thanks.

UPDATE

Debug with the uncompressed angularjs:

Error: [ng:areq] Argument 'verifyAccountController' is not a function, got undefined
http://errors.angularjs.org/1.4.9/ng/areq?p0=verifyAccountController&p1=not%20a%20function%2C%20got%20undefined
minErr/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:68:12
assertArg@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:1816:1
assertArgFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:1826:1
$ControllerProvider/this.$get</<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:9356:9
setupControllers@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8426:36
nodeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8468:32
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7929:13
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7932:13
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7932:13
publicLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7809:30
ngViewFillContentFactory/<.link@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:985:7
invokeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:9039:9
nodeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8533:1
compositeLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7929:13
publicLinkFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7809:30
createBoundTranscludeFn/boundTranscludeFn@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:7947:1
controllersBoundTransclude@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:8560:18
update@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:935:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16573:15
commitRoute/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.8-route.min.js:619:15
processQueue@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:14991:28
scheduleProcessQueue/<@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:15007:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16251:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16069:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:16359:13
done@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10791:36
completeRequest@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10989:7
requestLoaded@http://test.devlocal/libraries/JS/angularjs/angular-1.4.9.js:10930:1

<div class="content-wrapper ng-scope" ng-controller="mainController" ng-view="">

Troubleshooting in minified Angular js files is a nightmare. Unless I'm ready to deploy the code, I don't use angular.min.js. — cst1992, Jan 25 '16 at 11:51
BTW, the error you're getting is " is not a function; got undefined" — cst1992, Jan 25 '16 at 11:56
I don't see that you have included file "/admin/pages/verifyAccount" in your index.html or default.html page. Insert this file in your index.html or default.html page. it will work! — rishikesh tadaka, Jan 25 '16 at 11:57
The `/admin/pages/verifyAccount` is a laravel route. Laravel handles this route and renders the HTML and angularJs route put in the `
` — Kheshav Sewnundun, Jan 25 '16 at 11:59
You also have typos in your app.js code. Two that I can spot is a single 'l' in your `app.config` controllers. — cst1992, Jan 25 '16 at 12:04

score 1 · Answer 1 · answered Jan 25 '16 at 11:54

1

Since you have the original app.js already there, it works. But not when the controller's in its own file. You'll have to also include the new file in <script></script> tags.

Also, the file at the url /admin/pages/verifyAccount shouldn't contain a script; it's a template and only should contain HTML code. Use a *.js file for additional controllers and include them in the main HTML file.

answered Jan 25 '16 at 11:54

cst1992

3,823
1
29
40

Separating the Template and the controller solved the issue thanks :) – Kheshav Sewnundun Jan 25 '16 at 12:35
Glad that I could help. – cst1992 Jan 25 '16 at 12:37

score 1 · Accepted Answer · answered Jan 25 '16 at 12:01

To retrieve angular module in order to use it for controller registration, you should use angular.module('app') syntax used for retrieving previously registered module, not angular.module('app', [...]) which is used to create a module.
The controller association you made is not very clear. You have to choose either having a global controller using ng-controller="..." syntax in your main HTML file or by associating controller and view in $routeProvider configuration.
Avoid mixing view description (HTML) and controller definition (JS) on a single file. Create a separated file for controller, or add it into app.js using app.controller('someController',[...]) or angular.module('app').controller('someController', [...])

Separating the Template and the controller solve the issue thanks :) — Kheshav Sewnundun, Jan 25 '16 at 12:35

Separate angularJS controller Result in error

2 Answers2