Home/ Questions/Q 8395635
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T20:21:00+00:00

I just started this HTML5 project where we decided to make it a single

  • 0

I just started this HTML5 project where we decided to make it a single page architecture by leveraging jQuery $.load() method. Unfortunately, as soon as the JS started to grow, we quickly started running into issues where the modules loaded into the master dashboard have no knowledge of their parent.

The architecture looks like this:

dashboard.html (master file)
moduleA.html
moduleA.js
moduleB.html
moduleB.js
moduleC.html
moduleC.js

Since we decided to also keep the JS as separate files, we are having to load all JS files through dashboard.html in order to invoke them individually when modulex is loaded.

So when loading moduleA.html into the dashboard we have to call its corresponding JS. To do this we simply wrote the JS using a Module Pattern so we can easily invoke it by doing a function call, like:

<script>

moduleA

</script>

or this if we want to access a specific property of this member.

<script>

moduleA.someMethod();

</script>

Now, I know there are is gotta be a nicer way of doing this, right? I hate having to have script tags in the HTML modules in order to load its corresponding JS file.

Another limitation of this is the fact that we no longer can work on modules individually, since the scripts and CSS invocation happens on the parent (dashboard.html) so certainly when moduleA.html is loaded directly, it is pure HTML with no script or CSS.

I looked through the other questions but I didn’t see anyone with the same problem.

I looked at AngularJS, EmberJS, KO.JS and BoilerPlateJS but none of them addresses what we are trying to accomplish. The only one that has a similar single page concept is jQuery Mobile but I don’t know if you can switch from jQuery to jQuery Mobile and everything remains working.

Has anyone face this issue yet? Is there a solution or would I have to go with a custom solution.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I could argue about AngularJS with you. It is exactly what you need

    dashboard.html is layout with some directives attached, but power lies in AngularJs if you use ng-view directive

    here is example:

    dashboard.js

    var app = angular.module("modularApp",[]);
app.config(['$routeProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
    $routeProvider.when('/dashboard', {
        controller:'HomeCtrl',
        templateUrl:'templates/home.html'
    });    
    $routeProvider.when('/moduleA', {
        controller:'ModuleACtrl',
        templateUrl:'templates/moduleA.html'
    });
    $routeProvider.when('/moduleB', {
        controller:'ModuleBCtrl',
        templateUrl:'templates/moduleB.html'
    });
    $routeProvider.otherwise({redirectTo: "/dashboard"});
}]);

    templates/dashboard.html

    <html ng-app="modularApp">
<head>
  <!--.... include angular minified js file and what else you need...-->
  <script type="text/javascript" src="dashboard.js"></script>
  <script type="text/javascript" src="moduleACtrl.js"></script>
  <script type="text/javascript" src="moduleBCtrl.js"></script>
</head>
<body>
  <a ng-href="#/moduleA">Open Module A View</a>
  <a ng-href="#/moduleB">Open Module B View</a>
  <!-- Add widgets header menus .... -->
  <ng-view></ng-view>
</body>
</html>

    moduleACtrl.js

    var app=angular.module("modularApp");
app.controller("ModuleACtrl",function($scope){
  $scope.scopeValue="Hellow from view";
});

    moduleBCtrl.js

    var app=angular.module("modularApp");
app.controller("ModuleBCtrl",function($scope){
  $scope.scopeValue="Hellow from another view";
});

    templates/moduleA.html

    <div>{{scopeValue}} in module A</div>

    templates/moduleB.html

    <div>{{scopeValue}} in module B</div>

    You can do more complex things with angular then just this. All depends on your needs. Do you have any special requirements 🙂

    Also, you could create your own directive, like ng-view and use your own $route service and $routeProvider so you can add css and javascript you want to dynamically load when some rute match url.

    so instead of above routing table, you could have

    app.config(['$myRouteProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
        $routeProvider.when('/dashboard', {
            javascript:'javascript/dashboard.js',
            templateUrl:'templates/dashboard.html',
            cssfile: 'css/dashboard.css'
        });    
        $routeProvider.when('/moduleA', {
            javascript:'javascript/moduleA.js',
            templateUrl:'templates/moduleA.html',
            cssfile: 'css/moduleA.css'
        });
        $routeProvider.when('/moduleB', {
            javascript:'javascript/moduleB.js',
            templateUrl:'templates/moduleB.html',
            cssfile: 'css/moduleB.css'

        });
        $routeProvider.otherwise({redirectTo: "/dashboard"});
    }]);

    But that is, pardon on my French, stup. There are couple libs I tried in ruby on rails to acheive similar, but backend is rendering content, or just part of content. But I’m not sure which backend you are using and are you interested to switch to rails anyway.

    • 0