Question

当我尝试使用ui-view时，我在AngularJS中遇到了问题。如果我在整页内声明脚本，控制器只能保持可见。如果我需要对我创建的每个控制器执行此操作，我将在索引页面内部有很多控制器，而不是页面内的单个控制器。在Asp.net MVC中，我可以使用RenderSection函数。有我的代码：

的index.html

<html lang="en">
<head>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-ui-router.min.js"></script>
    <script src="Scripts/venus.js"></script>
    <script src="Scripts/controllers/conteudoController.js"></script>
</head>
<body ng-app="VenusApp">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <p class="lead">Shop Name</p>
                <div class="list-group">
                    <a href="#" class="list-group-item">Category 1</a>
                    <a href="#" class="list-group-item">Category 2</a>
                    <a href="#" class="list-group-item">Category 3</a>
                </div>
            </div>
            <div class="col-md-9" ui-view="">
            </div>
        </div>
    </div>
</body>
</html>

我的第二页只是一个html表。

很抱歉任何问题，但这是我在stackoverflow中的第一篇文章。

Answer 1

看起来您的问题是即使您不需要其他控制器，您仍然需要在该控制器使用之前注入主index.html吗？

在Angularjs中，您可以使用$ocLazyLoad模块，只有在需要时才能加载控制器。

在angularjs config中定义路由配置时，您将配置需要哪个控制器。

这是如何做到的。

  $stateProvider
           .state('login', {
               url: '/login',
               controller: 'LoginCtrl',
               templateUrl: 'views/login.html',
               resolve: {
                   loadMyFiles: function ($ocLazyLoad) {
                       return $ocLazyLoad.load({
                           name: 'Myapp',
                           files: [
                           'scripts/controller/login.js'
                           ]
                       })
                   }
               }
           }).state('reset', {
               url: '/reset/token/:token',
               controller: 'ResetCtrl',
               templateUrl: 'views/reset.html',
               resolve: {
                   loadMyFiles: function ($ocLazyLoad) {
                       return $ocLazyLoad.load({
                           name: 'Myapp',
                           files: [
                           'scripts/controller/reset.js'
                           ]
                       })
                   }
               }
           }).state('verify', {
               url: '/verify',
               controller: 'VerifyCtrl',
               templateUrl: 'views/verify.html',
               resolve: {
                   loadMyFiles: function ($ocLazyLoad) {
                       return $ocLazyLoad.load({
                           name: 'Myapp',
                           files: [
                           'scripts/controller/verify.js'
                           ]
                       })
                   }
               }
           })

不仅是你的控制器JS，你甚至可以懒得加载css。这将有助于减少在index.html中加载大量的JS和css。

注意：我没有使用ng-route，而是使用ui-router。以上代码是ui-router + $ ocLazyLoad

有一种类似的方法＆＃34;在AngularJS中，如Asp.Net MVC中的RenderSection？

1 个答案: