As a newcomer to Angular, I have been experimenting with loading dynamic views using ngRoutes (which is very cool) along with their respective .js controllers for added functionality. However, I am encountering difficulties in binding them together after bootstrap has already occurred.
For instance, I have a view located at "../partials/inicio.php" and its controller at "/assets/js/partials/inicio/inicio.js", both of which are not loaded prior to bootstrap. To ensure they are loaded when the URL tag is "/", I have implemented the following method in main.js: (and it successfully loads them).
main.js
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/", {templateUrl: "../partials/inicio.php",
resolve:{
load: function($q, $route, $rootScope) {
var deferred = $q.defer();
var dependencies = [
'/assets/js/partials/inicio/inicio.js'
];
$script(dependencies, function () {
$rootScope.$apply(function() {
deferred.resolve();
console.log("The promise has resolved.");
});
});
console.log("The promise was made.");
return deferred.promise;
}
}
})
assets/js/partials/inicio/inicio.js
app.controller('inicio', function ($scope) {
console.log("Controller responds from the INSIDE in inicio.js");
});
console.log("Controller responds from the OUTSIDE in inicio.js");
../parcials/inicio.php
<script>console.log("View is loaded in inicio.php");</script>
<div class="container" id="inicio" ng-controller="inicio">
</div>
Upon observing the console logs, you will see that they render as shown in the following snapshot: Console output
While the view and controller are loaded in the "correct order" (controller first, then the view), an error occurs as the view attempts to find the ng-controller "inicio".
How can this binding be achieved? How do I "register" the controller post-bootstrap and link it to the view?
Important considerations:
I prefer not to preload the controller or its declaration.
If modules need to be added or dependencies referenced (e.g., ControllerProvider), it is crucial to understand where and when these actions should take place.
Your insights on this matter are greatly appreciated!