Лучший способ включить код темы в приложение MEAN.js

ДЛЯ MEANJS 0.4: (не пробовал, но должно работать для meanjs 0.3)

Я сделал индивидуальную услугу в соответствии с моими потребностями. Один скин по умолчанию, и пользователь может выбрать персональный скин. Скины берутся из Bootswatch и могут использоваться бесплатно.

'use strict';

angular.module( 'core' )
  .service( 'ThemeService', [ 'Authentication', '$rootScope', '$document', '$q', '$timeout',
      function (Authentication, $rootScope, $document, $q, $timeout ) {

      var defaultTheme = 'flatly';
      var defaultPath = 'themes/';
      var defaultExtension = '.min.css';
      var defaultIgnore = 'require';
      var themes = [
        'bootstrap',
        'cerulean',
        'custom',
        'cyborg',
        'darkly',
        'flatly',
        'journal',
        'lumen',
        'paper',
        'readable',
        'sandstone',
        'simplex',
        'slate',
        'spacelab',
        'superhero',
        'united',
        'yeti'
      ];


      this.themes = themes;

      var loadCSS = function (href) {
        var deferred = $q.defer();
        var style = $document[0].createElement('link');
        style.rel = 'stylesheet';
        style.type = 'text/css';
        style.href = href;
        style.onload = style.onreadystatechange = function (e) {
          $timeout(function () {
            deferred.resolve(e);
          });
        };
        style.onerror = function (e) {
          $timeout(function () {
            deferred.reject(e);
          });
        };
        $document[0].head.appendChild(style);
        return deferred.promise;
      };


      var theme = defaultTheme;
      if ( Authentication.user !== undefined )
        theme = Authentication.user.theme;



      var currentTheme = defaultTheme;

      var disableThemes = function (name) {
        var links = [];
        links = document.getElementsByTagName( 'link' );
        for ( var i = links.length - 1; i >= 0; i-- ) {
          if ( links[ i ].href.indexOf( defaultPath ) > -1 ){
            if( (links[ i ].href.indexOf( defaultPath + name ) === -1) && (links[ i ].href.indexOf( defaultPath + defaultIgnore ) === -1))
              links[ i ].disabled = true;
            else 
              links[ i ].disabled = false;
          }
        }
      };

      var enableTheme = function ( name ) {
        var links = [];
        links = document.getElementsByTagName( 'link' );
        for ( var i = links.length - 1; i >= 0; i-- ) {
          if ( links[ i ].href.indexOf( defaultPath + name ) > -1 )
            links[ i ].disabled = false;
          currentTheme = name;
        }
      };

      var loadTheme = function ( name ) {
        if ( themes.indexOf( name ) === -1 ) // Theme do not exist
          return false;
        if ( name === currentTheme ) // Theme is already the current theme
          return console.log('Current theme');

        loadCSS( defaultPath + name + defaultExtension ).then( function ( ) {
          disableThemes(name);
          currentTheme = name;
        } ).
        catch ( function () {
          loadTheme( defaultTheme );
        } );
      };

      this.loadTheme = loadTheme;

      loadTheme( theme );

      $rootScope.$on( 'themeChange', function (e, theme) {
        loadTheme( Authentication.user.theme );
      } );

    } ] );

Чтобы изменить скин, вы можете просто отправить событие: «themeChange» в корневую область, например:

$rootScope.$emit( 'themeChange', 'readable' );

Это должно вызываться при смене скина и при входе в систему.

Кроме того, вы должны добавить личную тему в пользовательскую модель.

Если вы просто хотите установить ОДНУ пользовательскую тему, отредактируйте ./config/assets/production.js и ./config/assets/default.js.

В противном случае вы можете просто добавить файлы CSS в папку CSS вашего клиентского модуля.

Есть много способов сделать это... Но я не могу сказать вам, какой из них подходит именно вам.

Создайте папку темы в общедоступном репозитории приложения и предположим, что вы используете scss. В этой папке темы у вас может быть папка для scss, шрифтов, изображений. В корне папки темы родительский файл scss, который будет вызывать партиалы всех файлов в папке scss. Каждая часть может быть названа в честь пакета. Вы поняли суть.

В качестве альтернативы со средним генератором пакетов, и для каждого пакета вы можете иметь в нем файл css. Mean.js автоматически скомпилирует все эти файлы вместе, это тяжелая задача (clientCSS: ['public/modules/**/*.css'] ...)

Оба подхода работают, выбор за вашей командой.

Я делал это сам, это может быть сложно в зависимости от того, что вы пытаетесь привнести в свой проект. На мой взгляд, лучший способ — сохранить модульность и придерживаться соглашений, которые устанавливает среднее. Вы можете создать отдельную папку для своих тем css и ссылаться на эти файлы внутри вашего default.js, просто чтобы оставаться организованным.

Затем взгляните на используемые плагины, есть хороший шанс, что вы можете использовать Bower для включения этих пакетов/плагинов в свой проект. Убедитесь, что вы включили их в свои зависимости для использования во всем приложении.

Взгляните на свою текущую тему, посмотрите, что вы можете поместить в директивы (например, навигацию, боковое меню, ползунки и т. д.), таким образом, вы организовали повторно используемый код. Создавайте свои представления, используя эти директивы повсюду.

Делайте одно дело за раз, и вы сможете постепенно перенести тему. Удачи!