Question

我需要一种动态加载视图和相对控制器的方法。我的APP将包含许多视图和许多控制器。 我不想在应用程序设置上加载所有控制器定义，但我想加载视图和动态管理视图的控制器。

例如：

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

当我加载state1视图时，我想加载相对控制器。

Answer 1

您可以使用ocLazyLoad延迟加载控制器，css等。还有另外一些库，但由于尺寸，功能以及我不使用requirejs，我坚持使用ocLazyLoad。如果您只需要加载js，请查看$script.js。这太小了。

Angular JS ui-router - 加载动态视图和动态控制器

1 个答案: