Link to home
Start Free TrialLog in
Avatar of chuang4630
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(BundleCollection bundles)
      {
            //......  jquery, css, etc.
            bundles.Add(new ScriptBundle("~/bundles/app").IncludeDirectory("~/Scripts/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/ajax/jQuery/jquery-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').init();      
});

_Layout,cshtml:
        <script data-main="@Url.Content("~/Scripts/main")" src="@Url.Content("~/Scripts/libs/require.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.SiteDiagnostics.WebAppVersion)"
            });
        </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
Avatar of hielo
hielo
Flag of Wallis and Futuna image

First of all, I am not a .Net developer, but I can offer you a suggestion.  Based on what I see here:
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
...IncludeDirectory("~/Scripts/app", "*.js", true)

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:

 bundles.Add(new ScriptBundle("~/bundles/app").IncludeDirectory("~/Scripts/app", "app.js", true));
 bundles.Add(new ScriptBundle("~/bundles/angular").IncludeDirectory("~/Scripts", "angular.js", true));

Open in new window

Avatar of chuang4630
chuang4630

ASKER

I mean, those angular js files, not the angular.js.
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!
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
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial