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
LVL 1
chuang4630Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
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

0
chuang4630Author Commented:
I mean, those angular js files, not the angular.js.
Such as myDirective_1.js, myService_1.js, etc...
0
Alexandre SimõesManager / Technology SpecialistCommented:
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!
0
chuang4630Author Commented:
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
0
Alexandre SimõesManager / Technology SpecialistCommented:
I have to use Requires... (because) many jquery plug-in are used
I would fully agree with you if you weren't using AngularJS.
Remember that controllers shouldn't have jquery selectors. This means that you should wrap your jquery plugins in AngularJS directives.
Like this, you already have your modules, you don't need RequireJS.

However, you are right, not to bundle AngularJS files
That's not what I said. I mainly said that Bundling AngularJS files that are wrapped in RequireJS modules is a combination that doesn't make sense.
In my opinion you're not taking any advantage of RequireJS, you're only getting the problems. I believe that in this case you should drop RequireJS and keep the bundles.

Bundle all those plugins in the vendor bundle and you're set.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.