CODEWITHSUNDEEP
javascriptangularjscontroller
ShiiRochi
ShiiRochi

Reputation: 59

AngularJS "controller as" syntax error

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

Upvotes: 1

Views: 133

Answers (2)

philoniare
philoniare

Reputation: 1653

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.

Upvotes: 0

ShiiRochi
ShiiRochi

Reputation: 59

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

Upvotes: 1

Related Questions