Geek Answers Handbook

Managing AngularJS Web Application in ASP.NET (Alternative to RequireJS)

I am currently using a combination of RequireJS and AngularJS in my application, and ASP.NET on the server side.

I decided to use RequireJS for several reasons:

  • I started the project with it before opening Angular.
  • Easy loading of external APIs (e.g. Facebook, Google).
  • Easy minification through. R.js
  • It is easy to add files to a project as it grows; there is no need for additional script tags.

Once the project has matured, most of the areas that I previously used RequireJS now seem redundant, which means that most files end up with a different level of indentation (and nothing more) thanks to the definition wrapper:

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

There is probably also a small perfectionist. when deleting too :)

, : ( ) AngularJS ASP.NET? ASP.NET script ? grunt?

+4
2

/ - Visual Studio, Angular SPA. , , :

  • VS . ASP.NET(MVC)
  • / (, , , )
  • ( Entity) (, Employee/)
  • , .. view, controller, test (ng-boilerplate)

/

 // 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
 ...

, / js:

  • ". dirc.js" -
  • ". ctrl.js" -
  • ". spec.js" -
  • ...

, 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)
    ...
    );

, , ...

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>

web.config <compilation debug="true" , .

debug="false" JS

+3

ASP.NET MVC WebAPI , ASP.NET Bundling . . AngularJS , script , . , , , .

Grunt , , Node . , .

0

More articles:


All Articles