在 Angular 引导的 MVC 应用程序中有条件地渲染 MVC 包答案

【问题标题】：Conditionally Render MVC bundles in a Angular bootstrapped MVC app在 Angular 引导的 MVC 应用程序中有条件地渲染 MVC 包
【发布时间】：2018-11-20 23:48:29
【问题描述】：

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

索引.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。感谢任何回应。

【问题讨论】：

How to load external scripts dynamically in Angular?的可能重复
另见Is there an easy way to render absolute URLs with Microsoft Web Optimization framework / script bundling?。
@CodeCaster 该响应适用于 Angular 2。我在我的应用程序中使用 AngularJS。
您可以应用此处解释的相同原则。
看老兄，最终归结为将<script>标签附加到指向JS文件的DOM。当然，你如何做到这一点可能从 AngularJS 到 Angular2 有所不同，但原则仍然存在。与其寻找差异，不如看共性。

标签： angularjs asp.net-mvc

【解决方案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);

【讨论】：

if 条件的业务逻辑是我卡住的地方。在加载脚本之前，我需要检查 Angular 呈现的视图是否为 ViewA。但问题是 Angular 是一个客户端渲染引擎，并且在 Angular 加载新视图时不会重新加载 Index.cshtml。
好吧，这更棘手。在这种情况下，您可以加载两个 budles，将每个 bundle 包装在不同的全局函数中而不执行它们，然后从 Angular 脚本调用该全局函数。
您能否详细说明如何实现？（附样本）
我添加了选项 2 和选项 3，这两个都应该可以工作

【解决方案2】：

您正在使用 Angular UI 路由器，那样会很容易。为 bundle 1，app1 和为 bundle 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'
            ]);
          }]
        }
      })
  }])

【讨论】：

我正在使用 MVC 捆绑，所以我认为我无法加载`~/bundles/bundle2.js`
另外，index.cshtml 如何使用这个实现进行更新？它需要 2 个 ng-app 属性吗？
不仅需要一个 ng-app，而且在应用程序配置中您需要提及这两种状态。
如果您对我提供的信息感到满意，请查看更新并标记为答案。