Условно отображать пакеты MVC в загрузочном приложении Angular - PullRequest
Новая
       2

Условно отображать пакеты MVC в загрузочном приложении Angular

0 голосов
/ 11 июня 2018

Я загрузил Angular с помощью приложения ASP.NET MVC.Как я могу условно загрузить пакеты 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>

Мне нужно загрузить bundle1 только для углового вида 1.Другие представления должны включать в себя как bundle1, так и bundle2.Я использую AngularJS, а не Angular 2. Любой ответ приветствуется.

Ответы [ 2 ]

0 голосов
/ 20 июня 2018

Вы используете Angular UI Router, так будет легко.Создайте два отдельных состояния, например, для пакета 1, приложения 1 и для пакета 2, приложения 2, как показано ниже: 

$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'
            ]);
          }]
        }
      })
  }])
0 голосов
/ 19 июня 2018

Вы можете поместить это внизу вашего вида 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 view: 

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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...