We Keep Coding

require is not loading modules properly

fter including require tag the application is behaving abnormal way .is there any way i can bootstrap my application apart from below code .
main.js
require(['/module.js'], function() {
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
});
When I written as single file js file the code is working properly.
module.js
var name = 'myApp';
angular.module(name, [])
.controller('Controller', require(['controller.js']))
.factory('Service', require(['service.js']))
.filter('Number', require(['filter.js']));
I have included my main.js in index.html . index html has 3 views i am displaying them based on ng-show from index.html.
The problem is module.js loading properly and js files too. Script is not executing properly so that my entire index.html page including 3 views displayed automatically with error messages.
Control is not going to controller.js/service.js
Error :
Error: Unknown provider: depsProvider <- deps .
Did i miss any define code? Thanks in advance

Angular does not support AMD by default, You need to config angular to export angular object. Please check out the this post for more details.
require.config({
paths: {
'angular': '../lib/angular/angular'
},
shim: {
'angular': {
exports: 'angular'
}
}
});
Your module.js should be defined with define method of requirejs and it should return module.
You can omit file extesion (.js) while using requireJs

How to get the r.js build script working

I've read through the documentation and the example app.build.js file but just can't get my js files to concatenate and minify into one single file. I think I'm just not understanding exactly what settings I need in the build script and was hoping for some help.
My app is set up like this:
src >
js >
build.js
r.js
config.js
app >
main.js
lib >
module1.js
module2.js
module3.js
vendor >
require.js
jquery.js
jquery.validation.js
build >
// Where concat and minified file would go
config.js looks like this:
requirejs.config({
"baseUrl" : "src/js/lib", // Used because when setting dependencies in modules, this is used
"paths" : {
"app" : "../app",
"jquery" : [
"https://code.jquery.com/jquery-1.11.1.min",
"../vendor/jquery"
],
"validate" : "../vendor/jquery.validate.min"
},
"shim" : {
// Allow plugins with dependencies to load asynchronously
validate : ["jquery"]
}
});
// Load the main app module to start the app
requirejs(["app/main"]);
main.js looks like this:
require(["module1", "module2", "module3"], function(Module1, Module2, Module3) {
return [
Module1.init(),
Module2.init(),
Module3.init(),
Module4.init()
];
});
And then the build.js is where I'm lost. I thought I should load a mainConfigFile because I'm using the shim, but I'm not sure. If I do load that config file, it uses the baseUrl from that config file. I'm not sure what name: is supposed to refer to exactly and whether I'm missing some necessary configuration options.
({
//baseUrl: ".",
paths: {
jquery: "empty:",
//main: "../app/main",
//app: "app"
},
name: "app/main",
out: "../build/main.js",
//mainConfigFile: "config"
})
If I run that build file as it is (with those lines commented out) I get:
Error: ENOENT, no such file or directory
'/Users/davidpaul/Sites/require/src/js/module1.js' In module tree:
app/main
I'm not really sure what's being referred to when it says 'module tree'. I keep making changes to paths in the build file but not making progress so hoping for someone to explain this a bit to me.

The builder parses all paths relative to the build file location (unless changed via the baseUrl property). If you look relative to src/js/build.js, your main.js is in ./app/ and module1/2/3.js are in ./lib/. All paths inside modules have to be specified relatively to the common root, so to make your example work it's enough to change the signature of main.js to:
require(["lib/module1", "lib/module2", "lib/module3"], function(M1, M2, M3) {
// (...)
})
Note that config.js doesn't take part in the build process, you may need to change it as well to make your application work both "raw" and optimized.

unstable behaviour of requireJS

I am experiencing some issue with requireJS, to which I am not familiar
I have this tree
app/
public/
master.html
js/
main.js
app.js
lib/
jquery.js
require.js
vendor
upload/
vendor/
dependency_upload.js //a bunch of dependencies file
ulpload.js
slider/
dependency_slider.js //a bunch of dependencies file
slider.js
in master.html file :
<script data-main="js/main" src="js/lib/require.js"></script>
In my main.js file
require(['js/lib/jquery.js']);
require({
paths: {
'dependency_upload': 'vendor/upload/vendor/dependencies'
}
}, ['js/vendor/upload/upload.js'], function(App) {
App.upload();
});
require(['js/app.js']);
require({
paths: {
'dependency_slider' : 'vendor/slider/dependencies'
}
}, ['js/vendor/slider/slider.js'], function(App) {
App.slider();
});
and each of upload.js or slider.js have the following structure. Here $myfunction stands here respectively for upload and slider
define(['dependency_$myfunction'],function() {
function $myfunction(){
...
}
return{
$myfunction: $myfunction
}
}
);
I have two problems,
1) The behaviour of the js loading is unstable : once two, jquery is not recognized. Btw, upload.js and slider.js share dependencies and some function of slider.js that are set inside these shared dependencies are said to be undefined (perhaps some files are loaded twice ?). So, am I correct with my requireJS usage ?

The module loading is asynchronous, so if you really need jQuery loaded before the other module you have to do one of two things:
1 - Use the callback function from your require of jquery so that you don't try to load the other until jquery is loaded:
require(['js/lib/jquery.js'], function($) {
require({
paths: {
'dependency_upload': 'vendor/upload/vendor/dependencies'
}
}, ['js/vendor/upload/upload.js'], function(App) {
App.upload();
});
});
2 - (and this is the preferred way) use a shim configuration to tell RequireJS that any time you request upload.js it needs to load jquery first.

RequireJS loading of modules to be fixed based on ROOT URL + baseUrl + module path

Hi i'm using requirejs to just organize my javascript codes into AMD modules, i'm building a non-single page website right now using codeigniter, what i do is i have a default layout html file which i always call to render the dynamic content of the body so my script which call the requirejs and has the data-main attribute is encoded on my layout html page.
<script data-main="<?=base_url('assets/js/main.js');?>" src="<?=base_url('assets/js/require.js');?>"></script>
and my main.js looks like this.
requirejs.config({
baseUrl: "assets/js",
paths: {
jquery: 'vendor/jquery',
bootstrap: 'vendor/bootstrap',
datatables: 'vendor/jquery.dataTables'
},
shim: {
jquery: { exports: '$' },
datatables: { deps: ['jquery'] }
}
});
requirejs(['bootstrap','datatables'], function(){
})
so when i type on my url "localhost/ci-project/" it will load the layout page together with the dynamic body. On this scenario it works fine. sicne requirejs will render the path correctly "localhost/ci-project/assets/js/vendor/[js file/module]"
but when i change the URL to say, 'localhost/ci-project/welcome/admin'. what requirejs do to load the modules is concatenate the baseUrl + module path, to the current URL which in this case is 'localhost/ci-project/welcome/admin' and ending result is like this:
'localhost/ci-project/welcome/admin/assets/js/vendor/[module]' which is wrong.
so how can i configure requirejs to always load the from the root url and then concatenate the baseUrl value together with the paths of each modules?

The way to solve this is to output the baseUrl from a server side variable.
In your PHP page:
<script>
var require = {
baseUrl: '<?= base_url(); ?>' // Or whatever outputs the full path to your site root
};
</script>
<script data-main="<?=base_url('assets/js/main.js');?>" src="<?=base_url('assets/js/require.js');?>"></script>
Creating a require object before RequireJS is loaded allows you to define config options that will be picked up automatically.
Calling require.config() again from inside main.js is fine, it will just add the additional config options, but be sure to remove baseUrl from there.

Simon's answer above helped when I had issues with navigating to routes with parameters - relative paths to base url go wrong. I am using asp .net mvc, but the solution is exactly the same:
(_Layout.cshtml)
<script>
var require = {
// by default, load any module IDs from
baseUrl: '#Url.Content("~/Scripts/lib")'
}
</script>
<script data-main="#Url.Content("~/Scripts/application/app.js")" src="#Url.Content("~/Scripts/lib/require.js")"></script>

RequireJS not honoring relative paths when not loaded at "mysite.com/"

I'm having some trouble with requirejs and relative paths.
This is in my HTML file:
<script data-main="/app/main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
My config is set up as follows:
requirejs.config({
baseUrl: '/vendor',
paths: {
// APP FILES
'app-base' : '../app',
'app-config' : '../config',
models : '../models', // where the models and collections are
templates : '../templates',
views : '../views',
lib : '../lib',
tasks : '../tasks',
router : '../app/router',
// VENDOR FILES
marionette : 'backbone.marionette',
},
deps: ['router'],
shim: {...}
});
When my app loads from the url "localhost:3000/" or "localhost:3000/applications" all of these paths resolve correctly. But when it's loaded from something like "localhost:3000/applications/app1", the paths resolve incorrectly.
The paths looks like this, respectively.
Correct:
"/models/test-model.js"
Incorrect:
"/applications/models/test-model.js"
I'm loading my modules using CJS as follows:
define( function( require ) {
var TestModel = require('models/test-model.js');
});
When I change the above to this --> var TestModel = require('/models/test-model.js');, it works. But this defeats the purpose of using relative paths.
Would love it if someone could help me out. I'm super confused.

When requiring a module, be sure to leave off the .js extension unless you are specifying a complete path.