Angular JS ui-router - 加載動態視圖和動態控制器

我需要一種動態加載視圖和相關控制器的方法。我的APP將包含許多視圖和許多控制器。 我不想加載應用程序設置上的所有控制器定義，但我想加載一個視圖和動態管理視圖的控制器。Angular JS ui-router - 加載動態視圖和動態控制器

例如：

/*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" 
    }); 
});

/*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*/ 
    }); 
});

當我加載我要加載的相對控制器STATE1視圖。

來源

2014-12-03 Andrea Marzoli

你問你是否可以在路由定義中使用'controller：/ * load ... * /'來加載控制器？ – 2014-12-03 19:27:22

您可以使用ocLazyLoad延遲加載控制器，css等。還有另外一個庫，但是我堅持使用ocLazyLoad，因爲它的大小，功能以及我不使用requirejs。如果您只需要加載js，請查看$script.js。這是令人難以置信的小。

來源

2014-12-03 19:15:53

Angular JS ui-router - 加載動態視圖和動態控制器

回答

相關問題