How to Load Angular Controller Dynamically

Question

I have an application with 10 views and several shared components

--app
-------components
-------------home
-----------------homeController.js
-----------------homeDirective.js
-----------------home.html
 .
 .
 .
-------shared
----------modals
------------someModal
--------------- someModalController.js
--------------- someModal.html

the components load by 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 used in different components , all things are worked when the main page contains all script files. 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>


 <script src="appMain/components/home/homeController.js"></script>
   <script src="appMain/components/home/aboutController.js"></script>
   <script src="appMain/shared/modal/insert/insertController.js"></script>

I looking for a way to remove the last three script tags and load controller or other dependencies on the fly. I have searched a lot about lazy loading but no one works in my context especially when I add shared components.

angularAMD is one of the option

vinayakj
– vinayakj

2015-10-26 19:24:20 +00:00
Commented Oct 26, 2015 at 19:24 — vinayakj
– vinayakj, Commented Oct 26, 2015 at 19:24
You could think of using github.com/ocombe/ocLazyLoad

Pankaj Parkar
– Pankaj Parkar

2015-10-26 19:42:38 +00:00
Commented Oct 26, 2015 at 19:42 — Pankaj Parkar
– Pankaj Parkar, Commented Oct 26, 2015 at 19:42
@PankajParkar I think that's my solution

Mahdi
– Mahdi

2015-10-27 20:27:52 +00:00
Commented Oct 27, 2015 at 20:27 — Mahdi
– Mahdi, Commented Oct 27, 2015 at 20:27

wesww · Accepted Answer · 2015-10-26 19:22:54Z

1

You could use the patterns from the async section on the official angular-seed repo: https://github.com/angular/angular-seed/#loading-angular-asynchronously

https://github.com/angular/angular-seed/blob/master/app/index-async.html

this relies on the ded/script "Async JavaScript loader & dependency manager" https://github.com/ded/script.js

answered Oct 26, 2015 at 19:22

wesww

2,87321 silver badges16 bronze badges

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

1 Comment

Mahdi Over a year ago

by this way I should reference all dependency in the main page explicitly.

Collectives™ on Stack Overflow

How to Load Angular Controller Dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related