AngularJS "controller as" syntax error

Question

Recently, I started to learn AngularJS and decided to create my first AngularJS project. However, I faced the problem when initializing controller in html code.

I receive the following error:

angular.min.js:60 Error: Argument 'MainCTRL as ctrl' is not a function, got undefined
at qa (angular.min.js:16)
at ra (angular.min.js:16)
at angular.min.js:50
at angular.min.js:42
at m (angular.min.js:6)
at j (angular.min.js:42)
at e (angular.min.js:38)
at e (angular.min.js:38)
at e (angular.min.js:38)
at angular.min.js:37(anonymous function) @ angular.min.js:60(anonymous function) @ angular.min.js:51e.$apply @ angular.min.js:86(anonymous function) @ angular.min.js:15d @ angular.min.js:26qb @ angular.min.js:15kc @ angular.min.js:15(anonymous function) @ angular.min.js:158a @ angular.min.js:114(anonymous function) @ angular.min.js:23m @ angular.min.js:6c @ angular.min.js:22

I don't want to use $scope at this time, and want to proceed with this task with controller alias. With $scope it is working alright, however, I am very interested in solution of the problem in case of using "controller as" form

It's a part of the code, where the error exists:

<html lang="en" ng-app="blog">
<head>
 <script src="template/assets/js/angular/angular.js"></script>
 <script src="template/assets/js/controllers/app.js"></script>
 <link rel="stylesheet" href="template/assets/template.css">
</head>
<main ng-controller="MainCTRL as ctrl">
   <div class="stage">
      <div class="prog-lang-container left">
         <div class="prog-lang-container-inner">
            <img class="prog-lang-img" src="#" alt="#">
            <span class="prog-lang-name">
              {{ctrl.name}}
            </span>
         </div>
      </div>
         ...
   </div>
</main>
...
</html>

It's my app.js file, it's very simple just now:

(function(){
    var app = angular.module('blog',[]);
    app.controller("MainCTRL", function(){
        this.name = "TEST";
    })
})()

May be I'm missing something in the code

That looks right on the surface. Do you, perhaps, have a second ng-app in your HTML somewhere? — Lex
– Lex, Commented Mar 17, 2016 at 18:30
@Lex, no, I declared only one ng-app, that is "blog". It works fine by using $scope, however, it is very interesting for me, why I got error, trying to use controller with an alias — ShiiRochi
– ShiiRochi, Commented Mar 17, 2016 at 18:31
Try referencing the non-minified version of Angular to see if you get a better error message. — Lex
– Lex, Commented Mar 17, 2016 at 18:35

ShiiRochi · Accepted Answer · 2016-03-17 19:02:47Z

1

I do not fully understand why this problem happens when using minified version, one of solutions was said in comments above by Lex, and it is to use non-minified AngularJS file. Thank you, all, who helped.

Answer:

Try referencing the non-minified version of Angular to see if you get a better error message. – Lex

edited Mar 17, 2016 at 19:02

answered Mar 17, 2016 at 18:51

ShiiRochi

5910 bronze badges

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

3 Comments

Lex Over a year ago

I appreciate that, but it's not really an answer. In production you will want to use the minified version so it's troubling that this was resolved by using the non-minified version.

ShiiRochi Over a year ago

@Lex, of course, you're right, however, in minified version, we can use $scope. It works fine, but I think, it will not be very funny, when coming from non-min to min, I will have to re-write all code from "controller as" to $scope method

Lex Over a year ago

Controller as syntax is pretty ubiquitous. Perhaps your minified version is messed up - where did you get it from? Are you using a CDN?

Mogsdad · Accepted Answer · 2016-05-11 18:13:15Z

0

I've copied all of your code and tried it with both cdn and downloaded versions of the minified 1.5.0 AngularJS files and it all worked. So, the issue is probably in the rest of the code that is not included (...) or the minified file. Try using a cdn to see if it makes the difference.

edited May 11, 2016 at 18:13

Mogsdad

46k21 gold badges165 silver badges287 bronze badges

answered Mar 17, 2016 at 21:11

philoniare

1,6431 gold badge14 silver badges21 bronze badges

1 Comment

ShiiRochi Over a year ago

Ok, thanks, before creating this question I created a copy of the project and deleted all code from it, starting from very beginning, and got no errors, but when trying to do it in the original - error achieved. At this time, I started to use $scope and what can I say is that I like both "controller as" and $scope, but with $scope I have to write a less piece of code Under posted piece of html-code I have only footer with static html, so...this was the only place where I used Angular at that time not like right now))

Collectives™ on Stack Overflow

AngularJS "controller as" syntax error

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related