I need a way to load dynamically a view and the relative controller. My APP will contain many views and many controllers. I don't want to load all controllers definition on application setup, but i want to load a view and the controller that manages the view dynamically.
For Example:
/*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 I load the state1 view i want to load the relative controller.
controller: /*load ...*/in the route definition to load controller?! – Yahya KACEM Dec 3 '14 at 19:27