Loading html and Controller from server and creating dynamic states UI - router

Question

I am looking for a Solution to load my App Content dynamically from the Server.

My Scenario:

Lets say we have 2 Users (A and B), my App consists of different Mod

Answer 1

I have developed an application with keeping those things in mind. Here is my architecture.

Folder Structure:

WebApp
|---CommonModule
    |---common-module.js //Angular Module Defination
    |---Controllers     //Generally Nothing, but if you have a plan to
                        //extend from one CommonController logic to several 
                        //module then it is usefull

    |---Services        //Common Service Call Like BaseService for all $http 
                        //call, So no Module Specific Service will not use 
                        //$http directly. Then you can do several common 
                        //things in this BaseService. 
                        //Like Error Handling, 
                        //CSRF token Implementation, 
                        //Encryption/Decryption of AJAX req/res etc.

    |---Directives      //Common Directives which you are going to use 
                        //in different Modules
    |---Filters         //Common Filters

    |---Templates       //Templates for those common directives

    |---index.jsp       //Nothing, Basically Redirect to 
                        //Login or Default Module

    |---scripts.jsp     //JQuery, AngularJS and Other Framworks scripts tag.
                        //Along with those, common controlers, services, 
                        //directives and filtes. 

    |---templates.jsp   //Include all common templates.

    |---ng-include.jsp  //will be used in templates.jsp to create angular 
                        //template script tag.
|---ModuleA
    |---moduleA-module.js //Angular Module Definition, 
                          //Use Common Module as Sub Module
    |---Controllers
    |---Services
    |---Directives
    |---Filters
    |---Templates
    |---index.jsp 
    |---scripts.jsp 
    |---templates.jsp
|---ModuleB
    |--- Same as above ...

Note: Capital Case denotes folder. Beside ModuleA there will a LoginModule for your case I think or You could Use CommonModule for it.

Mehu will be as follows.

Module A 
Module B

Each of those JSP page are actually a independent angular application. Using those following code.

ModuleA/index.jsp

     
        
        <%@ include file="scripts.jsp" %> 
        <%@ include file="templates.jsp" %>  
    
    
        <%@ include file="../common.jsp" %>
        

        <%@ include file="../footer.jsp" %>
    

ModuleA/scripts.jsp

<%@ include file="../CommonModule/scripts.jsp" %> 

.....

ModuleA/templates.jsp

<%@ include file="../CommonModule/templates.jsp" %> 


.....

CommonModule/ng-include.jsp

But main problem of this approach is When user will change Module, Page will get refreshed.

EDIT: There is a ModuleA.module.js file which actually contain module deceleration as follows.

angular.module('ModuleA.controllers', []);
angular.module('ModuleA.services', []);
angular.module('ModuleA.directives', []);
angular.module('ModuleA.filters', []);
angular.module('ModuleA', 
       ['Common', 
        'ModuleA.controllers' , 
        'ModuleA.services' , 
        'ModuleA.directives' , 
        'ModuleA.filters'])
    .config(['$routeProvider', function($routeProvider) {
        //$routeProvider state setup
    }])
    .run (function () {

    });