no module error in angular with requirejs - angularjs

Question

I am new to angularjs
I am trying to integrate angularjs with requirejs . How ever I am getting the error
Uncaught Error: No module: app
This is my setup
main.coffee
require.config
baseUrl : "/Scripts/"
paths :
jquery : 'libs/jquery/jquery-2.0.3'
angular : 'libs/angular/angular'
'angular-resource' : 'libs/angular/angular-resource'
bootstrap : 'libs/bootstrap/bootstrap'
shim :
angular :
exports :'angular'
'angular-resource':
deps :['angular']
jquery :
exports: ['jquery']
bootstrap :
deps :['jquery']
app:
deps :['app-boot']
require ['app-angular/modules/app','app-angular/modules/app-boot'], ($,angular)->
app-boot.coffee
require ['jquery','angular','bootstrap'], ($,angular)->
$(document).ready ->
angular.bootstrap document,['app']
app.coffee
define "app",['angular','angular-resource'], (angular)->
angular.module 'app',['ngResource']
StudentController.coffee
require ["app"] , (app) ->
app.controller "StudentController" , ($scope) ->
$scope.msg = "Hello Joy !! How are you !! You are in Angularjs"
And my Index.cshtml
<div class="page-content">
<div ng-controller="StudentController">
<p ng-bind="{{msg}}">
</p>
</div>
However it gives the error Uncaught Error: No module: app
I also removed the ng-app from html also have bootstrapped the angular manually on domready . So where am I going wrong ?

Answer 1

I think that you need to invert the dependency on this bit of code:
app:
deps :['app-boot']
It's the way around:
'app-boot': {
deps: ['app']
}
Your app-boot.coffee file depends on the module app that is defined on the app.coffee file

Answer 2

Looks like you're following this guide, which is double plus good.
I was able to get it to work but kept getting the same error message because in my Angular controller, 'app' was not defined. It appears the 'app.controller' doesn't get set there, as the guide states, and just loading it via the 'require' statement is sufficient.':
require(['jquery', 'underscore', 'backbone', 'users', 'angular', 'directives', 'app']
This is only a little different than yours.
/* shim */
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
"angular":{
exports:"angular"
},
"directives":{/* this is my custom Angular directive */
deps:["angular"]
}
}
});
/* RequireJS module */
define("app", ["angular", "directives"], function(angular)
{
var app = angular.module("app", ["zipppyModule"]);
angular.element(document).ready(function()
{ angular.bootstrap(document,['zippyModule']); });
});
/* 'app' loads the module */
require(['jquery', 'underscore', 'backbone', 'users', 'angular', 'directives', 'app']