chuang4630
asked on
How to load angular js (in a folder) with RequireJS correctly?
i am trying to load the angular js files in the folder Scripts\app with RequireJS, but receive the error. Need help.
Thanks
Here is the file structure:
Scripts
| --app
| --helper
|--demo.js
|--app.js
|--angular.js
Here is my code:
BundleConfig.cs:
public class BundleConfig
{
public static void RegisterBundles(BundleColl ection bundles)
{
//...... jquery, css, etc.
bundles.Add(new ScriptBundle("~/bundles/ap p").Includ eDirectory ("~/Script s/app", "*.js", true));
}
}
main.js
require.config({
shim: {
jquery: {
export: '$'
},
....................
angular: {
exports: 'angular',
deps: ["jquery"]
},
angularApp: {
exports: 'angularApp',
deps: ['angular']
},
global: { deps: ["jquery"] }
},
paths: {
jquery: ['//ajax.aspnetcdn.com/aja x/jQuery/j query-2.1. 0',
// fallback to local jQuery
//'libs/jquery'
'jquery-2.1.0.min'
],
angular: 'angular',
// Add a random query string to the URL to ensure we always get the latest.
// I have tried to use '/bundles/app' also, it does not work
'angularApp': '/bundles/app?',
}
});
// Require Global dependencies
require(['jquery', 'jquery.validate', 'jqueryui', 'global',
'datatables', 'jquery.tableTools',
'bootstrap',
'angularApp'
], function ($, jqvalidate, jqueryui, global) {
angular.module('orbit').in it();
});
_Layout,cshtml:
<script data-main="@Url.Content("~ /Scripts/m ain")" src="@Url.Content("~/Scrip ts/libs/re quire.js") "></script >
<script type="text/javascript">
/* This script block is for cache-busting. It forces JavaScript files loaded by Require JS to
be for the current version of the site -- thus forcing a server refresh every time a
deployment is done (i.e., when the version number is updated). */
require.config({
urlArgs: "v=@(MyApp.Web.Framework.S iteDiagnos tics.WebAp pVersion)"
});
</script>
I received the error:
Failed to load resource: the server responded with a status of 404 (Not Found):
https://localhost:44300/bundles/app?&v=1.0.2.25578
Uncaught Error: Script error for: angularApp:
require.js:141
Thanks
Here is the file structure:
Scripts
| --app
| --helper
|--demo.js
|--app.js
|--angular.js
Here is my code:
BundleConfig.cs:
public class BundleConfig
{
public static void RegisterBundles(BundleColl
{
//...... jquery, css, etc.
bundles.Add(new ScriptBundle("~/bundles/ap
}
}
main.js
require.config({
shim: {
jquery: {
export: '$'
},
....................
angular: {
exports: 'angular',
deps: ["jquery"]
},
angularApp: {
exports: 'angularApp',
deps: ['angular']
},
global: { deps: ["jquery"] }
},
paths: {
jquery: ['//ajax.aspnetcdn.com/aja
// fallback to local jQuery
//'libs/jquery'
'jquery-2.1.0.min'
],
angular: 'angular',
// Add a random query string to the URL to ensure we always get the latest.
// I have tried to use '/bundles/app' also, it does not work
'angularApp': '/bundles/app?',
}
});
// Require Global dependencies
require(['jquery', 'jquery.validate', 'jqueryui', 'global',
'datatables', 'jquery.tableTools',
'bootstrap',
'angularApp'
], function ($, jqvalidate, jqueryui, global) {
angular.module('orbit').in
});
_Layout,cshtml:
<script data-main="@Url.Content("~
<script type="text/javascript">
/* This script block is for cache-busting. It forces JavaScript files loaded by Require JS to
be for the current version of the site -- thus forcing a server refresh every time a
deployment is done (i.e., when the version number is updated). */
require.config({
urlArgs: "v=@(MyApp.Web.Framework.S
});
</script>
I received the error:
Failed to load resource: the server responded with a status of 404 (Not Found):
https://localhost:44300/bundles/app?&v=1.0.2.25578
Uncaught Error: Script error for: angularApp:
require.js:141
ASKER
I mean, those angular js files, not the angular.js.
Such as myDirective_1.js, myService_1.js, etc...
Such as myDirective_1.js, myService_1.js, etc...
Mate, you have multiple problems here,
1st: You're using RequireJS with AngularJS
This by itself adds a degree of complexity that is only justified if you have a really big single-page app, with a lot of views, for which you don't want to charge the code in one shot.
Although it is perfectly possible, AngularJS was not designed to have this lazy loading logic.
I'll stop here and continue in the next problem :)
2nd: You're using RequireJS with AngularJS but bundling all the files together
Not this doesn't make sense.
If you bundle all the files together in one single js file, RequireJS is useless for an AngularJS app.
You could still think to make use of the RequireJS modules, but AngularJS already gives you that with DI (dependency injection), so you'll neither get the AMD (async module dependency), neither the lazy loading out of RequireJS.
For me you should just drop it and use plain AngularJS code bundled all together.
3rd: You need to be careful how you build your bundles
AngularJS requires a certain order when it comes to loading your scripts:
1- angularjs scripts (the angularjs file and all other angular modules)
2- app.js (the app file that contains the app initialization)
3- everything else (all other app controllers, directives, factories, etc...)
So if you just say to bundle a certain directory, there's no warranty that this order is respected.
My advise
1. Drop RequireJS. You don't need it in this case.
2. Separate scripts into 2 bundles:
vendor.js that includes all the vendor scripts like angular, jquery and others that you need
application.js that includes all the application scripts
This will make sure you'll take the most out of the client browser cache because chance are high that whenever you have a new version, only the app scripts changed.
Also make sure that the vendor.js is loaded before the application.js
3. Personally I prefer using the VS WebEssentials to build my bundles.
I have much more control over how the bundle is created
http://vswebessentials.com/features/bundling
I even built a server-side control that lets me choose in the web.config if I want the bundle or all the single files to be rendered (for debugging).
Ok, and I think that's it :)
Cheers!
1st: You're using RequireJS with AngularJS
This by itself adds a degree of complexity that is only justified if you have a really big single-page app, with a lot of views, for which you don't want to charge the code in one shot.
Although it is perfectly possible, AngularJS was not designed to have this lazy loading logic.
I'll stop here and continue in the next problem :)
2nd: You're using RequireJS with AngularJS but bundling all the files together
Not this doesn't make sense.
If you bundle all the files together in one single js file, RequireJS is useless for an AngularJS app.
You could still think to make use of the RequireJS modules, but AngularJS already gives you that with DI (dependency injection), so you'll neither get the AMD (async module dependency), neither the lazy loading out of RequireJS.
For me you should just drop it and use plain AngularJS code bundled all together.
3rd: You need to be careful how you build your bundles
AngularJS requires a certain order when it comes to loading your scripts:
1- angularjs scripts (the angularjs file and all other angular modules)
2- app.js (the app file that contains the app initialization)
3- everything else (all other app controllers, directives, factories, etc...)
So if you just say to bundle a certain directory, there's no warranty that this order is respected.
My advise
1. Drop RequireJS. You don't need it in this case.
2. Separate scripts into 2 bundles:
vendor.js that includes all the vendor scripts like angular, jquery and others that you need
application.js that includes all the application scripts
This will make sure you'll take the most out of the client browser cache because chance are high that whenever you have a new version, only the app scripts changed.
Also make sure that the vendor.js is loaded before the application.js
3. Personally I prefer using the VS WebEssentials to build my bundles.
I have much more control over how the bundle is created
http://vswebessentials.com/features/bundling
I even built a server-side control that lets me choose in the web.config if I want the bundle or all the single files to be rendered (for debugging).
Ok, and I think that's it :)
Cheers!
ASKER
Good advice. I will rethink that. But I have to use RequireJS, since this is enhancement of the existing app, where many jquery plug-in are used. However, you are right, not to bundle AngularJS files
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://blogs.msdn.com/b/rickandy/archive/2012/08/15/adding-web-optimization-to-a-web-pages-site.aspx
Try adding another ScriptBundle. On what you posted, you seem to be looking only in Scripts/app
Open in new window
But based on the file structure you posted, angular.js is not in the Scripts/app folder.
So try adding the Scripts folder:
Open in new window