Bundle Scripts in Angular with MVC

Question

In my shell page "index.html", I need to include all the necessary files (js, css, etc).

Sample :

<!-- 3rd party libraries -->
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/angular-resource.min.js"></script>
<script type="text/javascript" src="scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="scripts/angular-ui/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

In existing MVC with razor project, I can bundle this files like this :

bundles.Add(new StyleBundle("~/app/controller").Include(
                      "~/app/controllers/placesExplorerController.js",
                      "~/app/controllers/usersController.js"));

In addition, what are techniques can I use to load only the needed files. Not to load all (In SPA). Lazy load artifacts

Answer 1

To bundle, you would typically use a tool like Grunt or Gulp to concatenate the files into bundle-like structures.

To load only the needed files, a popular tool is RequireJS which lazy loads modules based on routing.

Answer 2

Update: Just saw you edit the question that you want specifically lazy loading. Then go for ocLazyLoad.

ocLazyLoad is awesome in a sense that you can inject the $ocLazyLoad at almost anywhere you want.

myApp.controller("MyCtrl", function($ocLazyLoad) {
 $ocLazyLoad.load('mySciprt.js');
 //if you want to load more than 1 file, pass in an array:
 //$ocLazyLoad.load(['myScript.js', 'myStyle.css'])
});

You can also use a directive:

 <div oc-lazy-load="{['js/testModule.js', partials/lazyLoadTemplate.html']}">
  <!-- Use a directive from TestModule -->
  <test-directive></test-directive>
</div>  

And you can couple it with your ui.router too, if you are using it:

$stateProvider.state('index', {
  url: "/", // root route
  views: {
     "lazyLoadView": {
      controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
      templateUrl: 'partials/main.html'
    }
  },
  resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
      // you can lazy load files for an existing module
         return $ocLazyLoad.load('js/AppCtrl.js');
    }]
  }
});

oclazyLoad Docs

---

I am assuming you want a more performant AngularJs app, and that you are using a .NET environment (MVC projects, IIS servers, etc). Allow me to provide you some options:

Option 1 - Stick to Razor's Bundle

Razor's Script bundle actually allows you to minify your Javascripts and your CSS files. Just add in BundleTable.EnableOptimizations = true; and you will have your JS and CS files minified on built. Depending on your project, this might serve as a good solution. Usually an .NET's MVC4/5 project is most suitable to use this method, as they by default use cshtml and Razor syntax's too. I won't recommend this for an rich Angular app though.

Option 2 - Use Gulp or Grunt In conjunction with MVC project

If you do not know it, Visual Studio can now run a NodeJs application . There are even Task Runners that allows you to use grunt/gulp in VS. This is just perfect as now you can use your favourite IDE to build front end apps.

For me, I will create an empty MVC web project, organize my own folder structures, let the IIS hit my index.html and let angular handle the rest. The MVC project itself does nothing but just provide me a web.config so that I can host it in IIS. I run my gulp and grunt, do the minification and build tasks, and dump them into release folder, configure my web.config to let my IIS listen to my sub directory, and voila - I just seperated out development codes and production code.

This option is a good choice because I get the best of both worlds. I can run gulp and grunt - which gives me the freedom to write my own build tasks. You can use bower-install or npm-install too, but just remember to include the files in your project. On the other hand, I can still use VS as my IDE, and by default this is still an .NET project. A .NET project will comes in handy when you want to deploy to Azure (biased opinion though).

Option 3 - use ocLazyLoad

If you are really talking about serve the files only when they are needed, then it's lazy loading. For this, if you do not want to use require.js, look into ocLazyLoad module. One of the best project ever. This allows you to load your html, js and css files lazily, and you got the freedom to choose when to load them.

Hopes this helps.