1

I am planning to create several modules in my company's application and I'm having trouble designing the architecture for the modules. I have done research and it seems like either you are supposed to use one module per page, or create a 'master' module that depends on all of your other modules. I don't like this approach because it means I have to load all of the javascript for every aspect of my application for every single page. That seems inherently wrong, but I also can't seem to figure out how to handle it the other way if I need to use one module in multiple places on a page. For example, I have a membership module that I have and I'm attaching to the header section of my web page. This would be intended for logging in, registration, and performing a 'forgot password' type workflow.

On another page dedicated to changing a password (from a reset link) the header is also present, but I want to include the password reset functionality in the membership module. I've read that one methodology of designing your application is by functionality/feature. I figured membership was an appropriate application of that, but now I'm not sure since I am having trouble applying the membership module more than once on any particular page.

Am I on the right track, or is there a preferred method for this? Should I have a separate module for the header and one for the rest of the page? Should I just bite the bullet and load everything? (I hope not...)

I should also note that this is an ASP.Net MVC application where we are still heavily relying on MVC for serving views and partial views. As such I wanted to use a render javascript section to dynamically load only the javascript necessary for that page to function. Is this a farce?

<header ng-app="membership">
    //stuff for header membership functions
</header>

<div ng-app="membership">
    //somewhere else that needs membership, outside of header
</div>
Improve this question

2 Answers 2

Reset to default
1

I personally like Mini SPAs (Silos) instead of full SPA. You can watch Miguel A Castro's video, and download the source at his website.

What it does is when a request comes in, it goes to ASP.Net MVC Route first. Then, Angular Route takes over the rest. It is a very slick design.

FYI: Angular 2 is right around the corner, so I went ahead and updated those to Angular 1.5 Compotent so that I can convert to Angular 2 easily later.

If you want, you can stop there. I went one step future, and use Strongly Typed Views using Matt Honeycutt's Building Strongly-typed AngularJS Apps with ASP.NET MVC 5 approach.

Then I implemented Angular Helpers like Axel Zarate's ANGULAR.NET – HELPERS FOR ASP .NET MVC 4.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for that video by Miguel Castro. I think that's exactly what I'm looking for. I don't necessarily think I'm going to build a SPA silo, but seeing how he's dynamically loading in the modules he really wants on the fly shows me that what I want is definitely possible.
1

On an Angular application, as it is a Single Page Application, yes, all your javascript must be loaded. It's the code of your application and it's necessary. That's done only once on first page load. You're always on the same page, but on a different state.

One good approach is to define a master module who include all other modules. Those modules can also include other "sub modules" they need.

angular.module('App', [
  'App.Membership'
  // ...
  // All others modules you need, including 3rd party modules
])

Then, on each module, you can define the different states associated and their controller

angular.module('App.Membership', [
  // Module dependencies
])
.config(['$stateProvider', function($stateProvider) {

  //State definition
  $stateProvider.state('membership', {
    parent: 'app',
    url: '/member',
    controller: 'MembershipCtrl',
    template: '<ui-view/>'
  });
}]);

You can also add a global controller to handle elements who are always present, like a header.

Hope this helps

Improve this answer

3 Comments

So I guess it's prudent to mention that we are not using angular to build a Single Page Application. We are using it as a means of two way databinding and interaction with our API. We decided on Angular because we are using a CMS platform that uses angular for creating custom controls and thought it made sense to learn the technology.
Ok, that's an important point. So, you could maybe consider each page like a mini-application and load only the JS files for the modules you need and makes more use of ng-controller
That is the approach I am going for, I jut haev the issue of needing to use more than one module per page

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.