2013-12-02 5 views
0

Проблема заключается в том, что я не знаю, можно ли в Angular.JS поместить каждый отдельный объект кода (контроллер, модель, сервис и т. Д.) В отдельный .js-файл. В настоящий момент я пытаюсь реализовать свое решение таким образом, но это просто не так.Лучшая практика структурирования углового кода

Пример:

step.js содержание (опытный образец):

(function() { 
    var moduleStep = angular.module('step', []); 
    moduleStep.config(function() { 
     var defaults = { 
      title: "", 
      enabled: true, 
      active: false, 
      visited: false, 
      viewUrl: "/clientTemplates/notification/step1.html", 
      model: {} 
     }; 

     /** 
     * @param {string} title 
     * @param {string} viewUrl 
     * @param {object} model [optional] 
     * @constructor 
     */ 
     moduleStep.Step = function(title, viewUrl, model) { 
      _.extend(this, defaults); 
      this.title = title; 
      this.viewUrl = viewUrl; 
      _.isUndefined(model) && (this.model = model); 
     }; 
     var prot = moduleStep.Step.prototype; 

     /** 
     * @returns {boolean} 
     */ 
     prot.isValid = function() { 
      return true; 
     } 
    }); 
}()); 

masterController.js содержание (контроллер):

(function() { 
    var moduleController = angular.module('masterController', [ 
     'ui.bootstrap', 
     'step', 
     'config' 
    ]); 

    moduleController.config(function() { 
      var Step = angular.module('step').Step; 

      /** 
      * @type {Array} 
      */ 
      $scope.steps = [ 
       new Step("step 1", "/clientTemplates/notification/step1.html"), 
       new Step("step 2", "/clientTemplates/notification/step2.html", {test2: 2}), 
       new Step("step 3", "/clientTemplates/notification/step3.html", {test: 1}) 
      ]; 
     }; 
     controller.$inject = ['$scope']; 

     moduleController.masterController = controller; 
     console.log(moduleController.masterController); 
    }); 
}()); 

setupMaster.js (прикладной модуль)

(function() { 
    var app = angular.module('setupMaster', [ 
// 'ngRoute', 
     //controllers 
     'masterController', 
     'config' 
    ]); 


    /** 
    * Конфигурационная функция для провайдеров служб приложения 
    */ 
    app.config(['$controllerProvider', '$httpProvider', function($controllerProvider, $httpProvider) { 
     $controllerProvider.register('MasterController', angular.module('masterController').masterController); 
    }]); 
}()); 

http://docs.angularjs.org/guide/module

В «рекомендуется» блок настройки написано, что 4 больших модули должны быть использованы для услуг, директив, фильтров и прикладного уровня. Как насчет контроллеров или моделей заводов/прототипов?

Может быть, я просто глуп или не совместим с парадигмой углового, но модули и системы форсунок в Angular кажутся немного чрезмерно спроектированными и противоинтуитивными. Хотя мне очень нравится привязка данных с использованием двухсторонней привязки Angular и грязная проверка вместо обратных вызовов.

+0

Google "Угловая семя" и поищите примеры. – Stewie

+0

@Stewie, спасибо, но угловатое семя не решает реальных проблем, возможных в больших приложениях. Там 4 JS-файла используются, как это рекомендуется в руководстве «Модуль», с которым я связан в моем вопросе. Все в порядке, если есть только 4 исходных файла для LOT сущностей? Разве это не грязно? –

+0

Ну, я не имел в виду [угловое семя] (https: // github.com/угловое/угловое семя), но и другим другим семенам, которые можно найти также. Там много. – Stewie

ответ

0

Я пытался найти лучшие практики и обоснования по причинам. В дополнение к чтению угловых документов, в другой статье. Я нашел JohnPapa's описание и подробное объяснение дает немного больше понимания того, почему и почему-нет, делайте и не делайте. Read it here

Как и другие предлагаемые, выполните проверку угловых семян и других ng-генераторов и т. Д. В конце концов, это то, где вам удобны правильные практики, которые меняются с течением времени.

Нет никаких прав и штрафов, так как все они имеют действительные баллы. то есть. проверяемость, инъекции зависимостей, минификация, оптимизация .. и т.д.

Просто поделиться ..

0

Im работая с w11k Fabs Wich установки является базовой хрюкать с вещами, как LiveReload/jshint/дерзость, меньше/тестирование/ngannotate ...

Установка является видом/ориентирована на маршрут. Средство просмотра/маршрута находится в иерархической структуре качания. Для каждого вида/маршрута новый модуль и ctrl-файл. fabs обрабатывает их, чтобы связать их в вашем индексном файле. поскольку служба используется в нескольких представлениях, они хранятся в отдельной папке.

Если вы «встряхните dist», ваш проект все превращается в 1 файл.

попробовать: https://www.npmjs.com/package/fabs

Смежные вопросы