no module error in angular with requirejs

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 ?

Denison Luz · Accepted Answer · 2013-09-25 07:10:13Z

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

answered Sep 25, 2013 at 7:10

Denison Luz

3,56525 silver badges24 bronze badges

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

2 Comments

Joy Over a year ago

So you mean to say first the module has to be initiated and then the application needs to be bootstrapped ???

Denison Luz Over a year ago

Yes, I believe so. On your code, first this needs to happen var app = angular.module("app", [], function($routeProvider, $locationProvider) { // your code here }); and then you can do this angular.bootstrap(document,["app"]); - I know I wrote it in pure JavaScript rather than CoffeScript, but I am sure you will understand :)

swille · Accepted Answer · 2013-10-03 22:40:47Z

0

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']

answered Oct 3, 2013 at 22:40

swille

8611 gold badge16 silver badges29 bronze badges

1 Comment

Joy Over a year ago

Yes true , you can just load your context of required scripts just through require statement and passing through the module names . However i did a different approach . I made deps:['app/app'] in the main.js which actually contains all the required modules . There can multiple ways to achieve this . Since requirejs modules are so flexible you can use it in a various ways

Collectives™ on Stack Overflow

no module error in angular with requirejs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related