I am managing an application that consists of 10 views and various shared components.
--app
-------components
-------------home
-----------------homeController.js
-----------------homeDirective.js
-----------------home.html
.
.
.
-------shared
----------modals
------------someModal
--------------- someModalController.js
--------------- someModal.html
The components are loaded using Angular routing.
(function() {
'use strict';
angular
.module('app')
.config(appConfig);
function appConfig($routeProvider) {
$routeProvider.
when("/home", { templateUrl: "app/components/home/home.html", controller: 'homeController' })............
otherwise({ redirectTo: "/home" });
}
})();
The modals are utilized across different components, and everything functions correctly when all the script files are included on the main page. For example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body ng-app="fleetCam" ng-controller="appController">
<div id="wrapper">
<div id="page-wrapper">
<ng-view>
</ng-view>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/ngStorage.js"></script>
<script src="appMain/app.module.js"></script>
<script src="appMain/app.routes.js"></script>
<script src="appMain/app.services.js"></script>
<script src="appMain/app.directive.js"></script>
<!-- Load controllers and other dependencies on demand -->
<script src="appMain/components/home/homeController.js"></script>
<script src="appMain/components/home/aboutController.js"></script>
Currently, I am exploring ways to eliminate the need for the last three script tags and dynamically load controllers or other dependencies as needed. Despite researching lazy loading techniques, none seem to fit my requirements, particularly when incorporating shared components.