Defining multi layer dependencies using require.js

Question

I am creating a small web framework using AngularJS, Bootstrap and Jquery. I will be adding several reusable angular directives in this framework. This framework will be used by several other web applications. This is the structure

WebApp1
 |-js
 |  |_testFramework.js
 |  |_lib
 |  |  |_angular.min.js
 |  |  |_bootstrap.min.js
 |  |  |_jquery.min.js
 |  |_main.js
 |  |_require.js
 |  |_controllers.js
 |_index.html

my testFramework.js looks like this

require.config({
    paths: {
        jquery: 'lib/jquery.min',
        angular:'lib/angular.min',
        bootstrap:'lib/bootstrap.min',
    },
    shim: { 
      'angular' : {exports:'angular'},
    }
});

define(['angular'],function(angular){   
    console.log('framework loaded');
    var fw = angular.module("framework",[]);
    ff.directive("dir1",function(){

        }.directive("dir2",function(){

        }
}

My Main.js is as below

require.config({
    paths: {
        fw: 'framework',
        controllers: 'controllers'
    }
});

define(['fw','angular'],
    function(fw, angular){
    var app = angular.module("myWebApp1",['fw']);
            $routeProvider.when('/login',{templateUrl:'partials/login.html'});  
        $routeProvider.otherwise({redirectTo: '/login'});
    }])        

    console.log('app loaded');
    }
);

Index.html has

<script data-main="js/main.js" src="js/require.js"></script>

But I always get this below error when I try to load the app

"NetworkError: 404 Not Found - https://localhost:8000/WebApp1/js/angular.js"

Why is it trying to load angular from /js, instead of what is mentioned in the testFramework.js

Paul Grime · Accepted Answer · 2013-06-01 11:06:17Z

3

Try splitting the config out from the application JS:

steps

create requirejs config
import requirejs
use the modules

html

<script>
var require = {
  paths: {
    'jquery': '//code.jquery.com/jquery-1.9.1',
    'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min',
    'bootstrap': '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min',
    'my-library': '//gist.github.com/gitgrimbo/5689953/raw/9b44d7e5f504b2245331be3ed3fcbb7bf8635da6/gistfile1'
  },
  shim: {
    'bootstrap' : {deps:['jquery']},
    'angular' : {exports:'angular'}
  }
};
</script>
<script
    data-main="https://gist.github.com/gitgrimbo/5690017/raw/aea9f61c47e9250b89c3d8fdb7511582f81664a4/gistfile1.js"
    src="http://requirejs.org/docs/release/2.1.5/comments/require.js">
</script>

gistfile1.js (aka main.js)

define(["angular", "my-library", "bootstrap"], function (angular, myLibrary, bootstrap) {
    console.log(angular.version);
    console.log(myLibrary);
    console.log(undefined === bootstrap, "bootstrap augments jQuery and has no module return value");
    console.log("1.9.1" === $.fn.jquery, "boostrap should have caused jQuery to load");
    console.log("function" === typeof $.fn.alert.Constructor, "boostrap adds alert");
});

console output

Object { full="1.0.6", major=1, minor=0, more...}
my-library
true bootstrap augments jQuery and has no module return value
true boostrap should have caused jQuery to load
true boostrap adds alert

answered Jun 1, 2013 at 11:06

Paul Grime

15.1k4 gold badges39 silver badges59 bronze badges

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

2 Comments

Srijit Over a year ago

Got it.. Thanks.. But my problem now is that I want to give a diff baseURL for my frameowrk. than that of the calling baseURL

Srijit Over a year ago

Sorry.,.. My bad.. I re orged t he folder structure and everything is fine. Thanks very much for helping

Collectives™ on Stack Overflow

Defining multi layer dependencies using require.js

1 Answer 1

steps

html

gistfile1.js (aka main.js)

console output

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

steps

html

gistfile1.js (aka main.js)

console output

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related