Question

我使用ASP.NET MVC应用程序引导了Angular。如何根据Angular视图的呈现条件有条件地加载MVC包。

Index.cshtml

<!DOCTYPE html>

<html ng-app="maypp">
<body>

    <div class="container">

        @*HEADER*@
        <div header></div>


        <div ui-view></div>

        @*FOOTER*@
        <div footer></div>

    </div>
    @Scripts.Render("~/bundles/bundle1")
    @Scripts.Render("~/bundles/bundle2")

</body>
</html>

我只需要为Angular视图1加载bundle1。其他视图需要包括bundle1和bundle2。我使用的是AngularJS，而不是Angular 2.感谢任何回复。

Answer 1

您可以将它放在cshtml视图的底部。但是，您可能需要使用业务逻辑替换随机数检查器：）

选项1：

@section Scripts {

    @if (new Random().Next(10) > 5)
    {
        @Scripts.Render("~/bundles/x")
    }
    else
    {
        @Scripts.Render("~/bundles/y")
    }

}

选项2：

捆绑1：

function startBundleOne(){
   //bundle logic
}

捆绑2：

function startBundleTwo(){
   //bundle logic
}

AngularJS观点：

if (something){
    startBundleOne();
} else {
    startBundleTwo();
}

选项3：

var scriptPath;
    if (something){
        scriptPath = "pathA";
    } else {
        scriptPath = "pathB";
    }
var script = document.createElement('script');
script.setAttribute('src',scriptPath);
document.head.appendChild(script);

Answer 2

您正在使用Angular UI Router，这将很容易。创建两个单独的状态，例如，对于捆绑1，app1和捆绑2，app2，如下所示：

$stateProvider
  .state('app1', {
    abstract: true,
    url: '/app1',
    template: '<div ui-view></div>'
});
$stateProvider
  .state('app2', {
    abstract: true,
    url: '/app2',
    template: '<div ui-view></div>'
})

在此之后，使用oclazyload库来加载不同状态的分发包，如下所示：

$stateProvider
  .state('app1', {
    abstract: true,
    url: '/app1',
    template: '<div ui-view></div>',
    resolve: {
      plugins: ['$ocLazyLoad', function($ocLazyLoad) {
        return $ocLazyLoad.load([
          '~/bundles/bundle1.js'
        ]);
      }]
    }

});
$stateProvider
  .state('app2', {
    abstract: true,
    url: '/app2',
    template: '<div ui-view></div>',
    resolve: {
      plugins: ['$ocLazyLoad', function($ocLazyLoad) {
        return $ocLazyLoad.load([
          '~/bundles/bundle2.js'
        ]);
      }]
    }
})

现在，您有两个不同的状态，并且运行着两个不同的包。我已经在我的一个项目中实现了这一点，并且它运行良好。

更新：

angular
  .module('myApp')
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('app1', {
        abstract: true,
        url: '/app1',
        template: '<div ui-view></div>',
        resolve: {
          plugins: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load([
              '~/bundles/bundle1.js'
            ]);
          }]
        }

      })
      .state('app2', {
        abstract: true,
        url: '/app2',
        template: '<div ui-view></div>',
        resolve: {
          plugins: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load([
              '~/bundles/bundle2.js'
            ]);
          }]
        }
      })
  }])

在Angular bootstrapped MVC应用程序中有条件地渲染MVC包

2 个答案: