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

Table of Contents

Разработчики из 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 = $('<div>').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);
      });
    };        
  }]);
}]);

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 = $('<div>').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/ (поддерживает несколько инстансов, в отличие от предыдущего варианта)

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

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

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

Similar Posts

LEAVE A COMMENT Отменить ответ