Is there a way to dynamically load both a view and its corresponding controller in my application? I anticipate having multiple views and controllers in my app, and I would prefer not to load all controller definitions during application setup. Instead, I would like to dynamically load the view and its associated controller as needed.
For instance:
/*index.html*/
<body>
<div ui-view></div>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body>
/*<!-- partials/state1.html -->*/
<script>/* controller definition */</script>
<div ng-controller="Cont">
/* content of view */
</div>
/*app.js*/
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
});
});
OR
/*index.html*/
<body>
<div ui-view></div>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body>
/*<!-- partials/state1.html -->*/
<div ng-controller="Cont">
/* content of view */
</div>
/*app.js*/
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html",
controller: /*Load the controller of state1 view*/
});
});
When the state1 view is loaded, I want the corresponding controller to be loaded as well.