时间戳

首页 > 解决方案 > 在 Angular 引导的 MVC 应用程序中有条件地渲染 MVC 包

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

问题描述

我已经使用 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。感谢您的任何回应。

标签： angularjsasp.net-mvc

解决方案

您正在使用 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'
            ]);
          }]
        }
      })
  }])

推荐阅读