0

I am new to AngularJS and I keep getting the above error from the Firebug console. My code:

index.html:

<html ng-app manifest="/manifest.appcache">

<head>
  <meta charset="utf-8">
  <script src="/public/js/angular.js"></script>
  <script src="/public/js/client/spa_common.js"></script>
  <!-- snip -->
</head>

<body>
  <div id="main">
    <h1 ng-controller="titleCtrl">{{title}}</h1>
  </div>  
</body>

</html>

spa_common.js:

"use strict"

angular
  .module('title_stuff', [])
  .service('titleSvc', ['$rootScope',
    function($rootScope) {
      this.getTitle = function() {
        return ('Dashboard');
      }
    }
  ])
  .controller('titleCtrl', ['titleSvc', '$scope',
    function(titleSvc, $scope) {
      $scope.title = titleSvc.getTitle();
    }
  ]);

I am running this from node.js rendering index.html with Jade.

I can confirm that both my local copy of angular.js and spa_common.js are being loaded.

From what I've read:

  • The ng-app value does not need to be set
  • The module name can be set to anything, and can be reused by omitting the []
  • You inject the module name into the controller's argument array
  • The controller's name must match the ng-controller directive in the HTML tag

I've been banging my head against a wall for days. Hopefully someone has a solution?

Hellfire
  • 21
  • 1
  • 1
  • 3
  • Posible duplicated : [Link](http://stackoverflow.com/questions/19408011/angularjs-error-argument-firstctrl-is-not-a-function-got-undefined). – Andy Ecca Nov 27 '14 at 22:23
  • Thanks for the comment. I had a look at that question beforehand, but my app only has one (unnamed - I've tried naming it to no avail though.) ng-app directive and I've double checked my closing tags. – Hellfire Nov 27 '14 at 22:46
  • You can either auto bootstrap the app by putting in your ng-app directive the module of your app (Ex : ng-app = 'title_stuff') or manually bootstrap it by putting at the end of your spa_common.js (Ex: fiddle : http://jsfiddle.net/themyth92/4j9zok15/). Reference : https://docs.angularjs.org/guide/bootstrap – themyth92 Nov 28 '14 at 02:49
  • So @themyth92 the `ng-app` directive needs to have a name, and this name needs to be referenced in at least one `module` call with `[]` to create it. After that you leave off the `[]` because you're reusing the module and adding controllers to it. Is that right? – Hellfire Nov 30 '14 at 21:42
  • 1. The [] is the place where you put all the other modules that your current module is dependant to. If you dont have any dependant module then just put [] in your module initialization. 2. If you want to let angularjs to auto bootstrap your app then yes, you have to put your module name in ng-app, if not I think angular will understand "undefined" is your module name and try to find it but apparently can not find (this one I am not sure). – themyth92 Dec 01 '14 at 02:46

1 Answers1

0

"use strict"

angular
  .module('title_stuff', [])
  .service('titleSvc', ['$rootScope',
    function($rootScope) {
      this.getTitle = function() {
        return ('Dashboard');
      }
    }
  ])
  .controller('titleCtrl', ['titleSvc', '$scope',
    function(titleSvc, $scope) {
      $scope.title = titleSvc.getTitle();
    }
  ]);

<html ng-app manifest="/manifest.appcache">

<head>
  <meta charset="utf-8">
  <script src="/public/js/angular.js"></script>
  <script src="/public/js/client/spa_common.js"></script>
  <!-- snip -->
</head>

<body>
  <div id="main">
    <h1 ng-controller="titleCtrl">{{title}}</h1>
  </div>  
</body>

</html>

<!-- begin snippet: js hide: false -->
<html manifest="/manifest.appcache">

<head>
  <meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
  <script src="/public/js/client/spa_common.js"></script>
  <!-- snip -->
</head>

<body ng-app="title_stuff">
  <div id="main">
    <h1 ng-controller="titleCtrl">{{title}}</h1>
  </div>
</body>

</html>
Kiran
  • 44
  • 3