Simple requireJS with angularJS - angular is not defined

Question

I am new to requireJS, and I wanted to get a simple starter 'hello worldish' project up and running. I'm missing something though, because I get angular is not defined as a JS error when the GreetCtrl tries to load.

index.html:

<!DOCTYPE html>
<html ng-app="ReqApp" ng-controller="GreetCtrl">
  <body>
    <h1>{{greeting}}!</h1>
    <script src="assets/require/require.js" data-main="assets/require/main"></script>
  </body>
</html>

main.js:

require.config({
    // alias libraries paths
  paths: {
    'domReady':      'domReady',
    'angular':       '../../vendor/angular/angular.min',
    'GreetCtrl':     '../../src/app/modules/GreetCtrl',
    'app':           '../../src/app/app'
  },
  // angular does not support AMD out of the box, put it in a shim
  shim: {
    'angular': {
      exports: 'angular'
    }
  },
  // kick start application
  deps: ['./bootstrap']
});

bootstrap.js:

define([
    'require',
    'angular',
    'app'
], function (require, ng) {
    'use strict';

    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['ReqApp']);
    });
});

app.js:

define([
  'angular',
  'GreetCtrl'
], function (ng) {
  'use strict';

  return ng.module('ReqApp', [
    'ReqApp.GreetCtrl'
  ]);
});

and finally, GreetCtrl.js:

angular.module( 'ReqApp.GreetCtrl', [])
.controller( 'GreetCtrl', function GreetCtrl ($scope) {
  $scope.greeting = "greetings puny human";
});

According to firebug, line 1 of GreetCtrl.js throws an error of angular is not defined. What am I missing here?

Thanks in advance!!

Mark Meyer · Accepted Answer · 2013-10-24 20:36:27Z

2

You have not told the GreetCtrl that it depends upon angular thus it is undefined. Try changing the GreetCtrl to be like this

define(['angular'], function(angular){
    angular.module( 'ReqApp.GreetCtrl', [])
    .controller( 'GreetCtrl', function GreetCtrl ($scope) {
         $scope.greeting = "greetings puny human";
    });
});

edited Oct 24, 2013 at 20:36

answered Oct 24, 2013 at 20:09

Mark Meyer

3,7443 gold badges26 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Simple requireJS with angularJS - angular is not defined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related