CODEWITHSUNDEEP
javascriptasp.netangularjs
Jamie
Jamie

Reputation: 4960

Managing an AngularJS web app within ASP.NET (alternative to RequireJS)

I'm currently using a combination of RequireJS and AngularJS in my application and on the server side is ASP.NET.

I chose to use RequireJS for a few of reasons:

As the project has matured most areas I previously used RequireJS for now seem redundant which means most files end up with another level of indentation (and nothing more) thanks to the define wrapper:

define(['angular'], function(angular) {});

There's probably also a small perf. benefit when removing it too :)

So my question is, what's the best (and preferably quickest) way to manage AngularJS applications within the context of an ASP.NET environment? ASP.NET script bundles? Grunt tasks?

Upvotes: 4

Views: 1319

Answers (2)

Radim Köhler
Radim Köhler

Reputation: 123891

I was searching for the best design/structure of the Visual Studio Web-Project hosting the Angular SPA. I've found many inspiration and after checking few templates, I realized that what I would like to achieve is:

  • profit from VS resp. ASP.NET (MVC) as much as possible
  • split the functionality into more/smaller files (controller, state, config, directive)
  • keep the logic of each Aspect (usually Entity) inside one folder (e.g. Employee/)
  • keep the files as close together as possible i.e. view, controller, test (ng-boilerplate)
  • the structure of files like this

Example of folder/file structure

 // external libs
 Scripts
 Scripts / angular.js
 Scripts / ui-bootstrap-x.y.js
 Scripts / ...

 // project libs
 MyApp
 MyApp / Module
 MyApp / Module / Employee
 MyApp / Module / Employee / Employee.state.js        // state machine settings
 MyApp / Module / Employee / EmployeeList.ctrl.js     // controllers
 MyApp / Module / Employee / EmployeeDetail.ctrl.js
 MyApp / Module / Employee / DisplayEmployee.dirc.js  // directive
 MyApp / Module / Employee / Employee.spec.js         // tests

 // similar for other stuff
 ...

As we can see, the trick is in suffix of each single/simple js file:

  • ".dirc.js" - directive
  • ".ctrl.js" - controller
  • ".spec.js" - tests
  • ...

Having this in place we can configure the Bundle:

bundles.Add(new ScriptBundle("~/js/app")
    .Include("~/MyApp/app.js")
    .Include("~/MyApp/app.config.js")
    .IncludeDirectory("~/MyApp/", "*.module.js", true)
    .IncludeDirectory("~/MyApp/", "*.dirc.js", true)
    .IncludeDirectory("~/MyApp/", "*.ctrl.js", true)
    .IncludeDirectory("~/MyApp/", "*.state.js", true)
    ...
    );

See that tests are placed inside of this structure, but not part of the bundle...

An extract of the index.cshtml

<html data-ng-app="MyApp">
    <head>
      ...
      @Styles.Render("~/Content/css")
    </head>
    <body>        
        <div class="body" data-ui-view="body"></div>
        @Scripts.Render("~/js/angular")
        @Scripts.Render("~/js/app")
  </body>

During development, small setting in web.config <compilation debug="true" loads all the files separately, easy to debug.

Just change the debug="false" and there are only two JS loads from the server in production

Upvotes: 3

Maurice
Maurice

Reputation: 27632

Normally I use ASP.NET MVC and WebAPI on the server and then using ASP.NET Bundling makes a lot of sense. It is there out of the box and is easy to use. With AngularJS I am less worried about forgetting a script file and not noticing as you declare all dependencies at the module level. If one is missing the whole app doesn't run making these, otherwise hard to spot, errors really obvious.

Grunt is also a powerful option but one I would only go for if I was doing Node on the server. In that case I will be doing a lot more through grunt anyway.

Upvotes: 0

Related Questions