Тонкости создания большого приложения на AngularJS

• 01, 23, 2014
•  bullgare
•  Angular.js
• No Comments.

Разработчики из DoubleClick рассказывают об особенностях создания большого приложения на AngularJS

http://youtu.be/62RvRQuMVyg
Интересное:

• Авторизация — профиль пользователя лучше передавать с сервера и сделать внедряемую константу (хотя лично я храню всё в localStorage)
• Скрытие/отображение фич можно сделать по списку доступных фич текущего профиля. Наиболее эффективно распарсивать и вырезать куски шаблона на этапе загрузки через responseInterceptor — https://gist.github.com/idosela/8421332:

  angular.module('myMdl', []).config(['$httpProvider', function($httpProvider) {
    $httpProvider.responseInterceptors.push([
        '$q', '$templateCache', 'activeProfile',
        function($q, $templateCache, activeProfile) {
          
      // Keep track which HTML templates have already been modified.
      var modifiedTemplates = {};        
          
      // Tests if there are any keep/omit attributes.
      var HAS_FLAGS_EXP = /data-(keep|omit)/;
      
      // Tests if the requested url is a html page.
      var IS_HTML_PAGE = /\.html$|\.html\?/i;    
      
      return function(promise) {
        return promise.then(function(response) {
          var url = response.config.url, 
              responseData = response.data;
              
          if (!modifiedTemplates[url] && IS_HTML_PAGE.test(url) &&
              HAS_FLAGS_EXP.test(responseData)) {
                
            // Create a DOM fragment from the response HTML.
            var template = $('
  ').append(responseData);
            
            // Find and parse the keep/omit attributes in the view.
            template.find('[data-keep],[data-omit]').each(function() {
              var element = $(this),
                  data = element.data(),
                  keep = data.keep,
                  features = keep || data.omit || '';
                  
              // Check if the user has all of the specified features.
              var hasFeature = _.all(features.split(','), function(feature) {
                return activeProfile.features[feature];
              });
              
              if (flags.features.length &&
                  ((keep && !hasFeature) || (!keep && hasFeature))) {
                element.remove();
              } 
            });
            
            // Set the modified template.
            response.data = template.html();
            
            // Replace the template in the template cache, and mark the
            // template as modified.
            $templateCache.put(url, response.data);
            modifiedTemplates[url] = true;
          }
          
          return response;
        },
        
        // Reject the response in case of an error.
        function(response) {
          return $q.reject(response);
        });
      };        
    }]);
  }]);
  

• Паттерны организации кода для упрощения архитектуры приложения

• Наследование через прототипы — http://jsfiddle.net/3dPpK/9/
• Миксины — http://jsfiddle.net/dFNSW/11/
• Использование объектов напрямую — http://jsfiddle.net/RQy8K/4/
• Выделение простого кода в отдельный AngularJS-сервис — http://jsfiddle.net/E2nyQ/8/ (подходит только для синглтонов)
• Выделение кода во вспомогательный контроллер — http://jsfiddle.net/8M27W/8/ (поддерживает несколько инстансов, в отличие от предыдущего варианта)

Доклад читается ну очень нудно и, честно говоря, не смог себя заставить досмотреть до конца.