Уже задавал
вопрос, и попытался исправиться
Переписал по гайдлайну
https://github.com/toddmotto/angular-styleguide
Но точка входа приложения оказалась довольно стремной, что не так?
/**
* CryptoPRO Plug-in
* cadesplugin_api - подключает криптоПРО плагин из браузера
* CryptoProWeb - универсальная обертка для всех браузеров
*/
import './plugins/crypto/cadesplugin_api.js';
import CryptoProWeb from './plugins/crypto/cryptopro.js';
/**
* Подключаем библиотеку Materialize
*/
import './plugins/materialize';
/**
* Подключаем компоненты приложения
* AppComponent - инициализация приложения (инициация структуры вывода)
* NavComponent, FooterComponent - компоненты верхней и нижней навигации
* PoolListComponent - компонент для вывода бизнес процессов
* ProcessListComponent - компонент вывода запущенных бизнес процессов
* ProcessListFinishedComponent - компонент архива процессов
* FinishedStepComponent - компонент состояния процесса (выполненные шаги)
* ActualListComponent - компонент шагов на исполнение
* MainwrapComponent - компонент для вывода основого контента (центральная структура)
* PaginationComponent - компонент пагинации
* EnityComponent - компонент инициации сущности
* CollectionComponent - коллекция (создание сущностей, элементов)
* TextareaFieldComponent - текстовая область
* TextFieldComponent - текстовое поле
* TextDateComponent - поле для работы с датой и временем
*/
import { AppComponent } from './components/app.component';
// навигация
import { NavComponent } from './components/navigation/navigation.component';
import { FooterComponent } from './components/footer/footer.component';
// виджеты (блоки на вывод списков)
import { PoolListComponent } from './components/widgets/poollist/poollist.component';
import { ProcessListComponent } from './components/widgets/processlist/processlist.component';
import { ProcessListFinishedComponent } from './components/widgets/processlistfinished/processlistfinished.component';
import { FinishedStepComponent } from './components/widgets/finishedstep/finishedstep.component';
import { ActualListComponent } from './components/widgets/actuallist/actuallist.component';
// центральный контент
import { MainwrapComponent } from './components/mainwrap/mainwrap.component';
// компонент пагинации
import { PaginationComponent } from './components/pagination/pagination.component';
// работа с сущностями и коллекциями сущностей ER-модели
import { EnityComponent } from './components/entity/entity.component';
import { CollectionComponent } from './components/entity/collection/collection.component';
// вывод field-свойств сущностей
import { TextareaFieldComponent } from './components/entity/textareafield/textareafield.component';
import { TextFieldComponent } from './components/entity/textfield/textfield.component';
import { TextDateComponent } from './components/entity/textdate/textdate.component';
const components = {
// <app-component />
appComponent: AppComponent,
// <navigation />
navigation: NavComponent,
// <pool-list />
poolList: PoolListComponent,
// < process-list />
processList: ProcessListComponent,
// <process-list-finished />
processListFinished: ProcessListFinishedComponent,
// < finished-step />
finishedStep: FinishedStepComponent,
// < actual-list />
actualList: ActualListComponent,
// <mainwrap />
mainwrap: MainwrapComponent,
// <pagination />
pagination: PaginationComponent,
// <app-footer />
appFooter: FooterComponent,
// <entity />
entity: EnityComponent,
// <collection />
collection: CollectionComponent,
// <textareafield />
textareafield: TextareaFieldComponent,
// <textfield />
textfield: TextFieldComponent,
// <textdate />
textdate: TextDateComponent,
};
/**
* Подключаем сервисы (связь между контроллерами)
* storageService - хранимая модель данных приложения
* httpService - сервис по работе с http
*/
import storageService from './services/storageService';
import httpService from './services/httpService';
/**
* Подключаем директивы (в нашем случае, инициация кастомных атрибутов)
* sideNav - Materialize меню
* setTooltips - инициация подсказок
* slidePagination - инициация пагинации
* switchOff - инициация переключателя
* collapsibleInit - инициация схлопывающихся блоков
* date - инициация даты
*/
import sideNav from './directives/sideNavInitMaterialize';
import setTooltips from './directives/setTooltips';
import slidePagination from './directives/slidePagination';
import switchOff from './directives/switchOff';
import collapsibleInit from './directives/collapsible';
import date from './directives/date';
/**
* Инициализация приложения
* $rootScope - глобальная область видимости приложения
*/
const app = angular.module('blackBox', []);
/**
* Инициация компонентов в DOM
*/
!((App, Components) => {
for (let key in Components) App.component(`${key}`, Components[key]);
})(app, components);
/**
* Инициализация сервисов
* [storageService] - основное хранилище данных приложения
* [httpService] - модифицированный класс для работы http-запросами
*/
app.service('storageService', storageService);
app.service('httpService', ['$http', httpService]);
/**
* Инициализация директив
* [sidenav] - вызываем плагин materialize для работы верхней навигации
* [slidepagination] - пагинация
* [tooltip] - подсказки в блоках
* [switchoff] - switch архива процессов
*/
app.directive('sidenav', sideNav);
app.directive('mytooltip', setTooltips);
app.directive('slidepagination', ['storageService', slidePagination]);
app.directive('collapsibleinit', collapsibleInit);
app.directive('switchoff', ['storageService', switchOff]);
app.directive('date', date);
/**
* Фильтр для пагинации
*/
app.filter('range', require('./plugins/filter.js').filter);
PS: Собираю приложение webpack(ом) поэтому все в ES5, вся логика приложения, в конечном счете, в файле app.js
Структура source-проекта:
.
├── angular
│ ├── app.module.js
│ ├── components
│ │ ├── app.component.js
│ │ ├── app.html
│ │ ├── app.scss
│ │ ├── entity
│ │ │ ├── collection
│ │ │ │ ├── collection.component.js
│ │ │ │ └── collection.html
│ │ │ ├── entity.component.js
│ │ │ ├── entity.html
│ │ │ ├── entity.scss
│ │ │ ├── textareafield
│ │ │ │ └── textareafield.component.js
│ │ │ ├── textdate
│ │ │ │ └── textdate.component.js
│ │ │ └── textfield
│ │ │ └── textfield.component.js
│ │ ├── footer
│ │ │ ├── footer.component.js
│ │ │ └── footer.html
│ │ ├── mainwrap
│ │ │ ├── mainwrap.component.js
│ │ │ ├── mainwrap.html
│ │ │ └── mainwrap.scss
│ │ ├── navigation
│ │ │ ├── nav.html
│ │ │ ├── navigation.component.js
│ │ │ └── nav.scss
│ │ ├── pagination
│ │ │ ├── pagination.component.js
│ │ │ ├── pagination.html
│ │ │ └── pagination.scss
│ │ └── widgets
│ │ ├── actuallist
│ │ │ ├── actuallist.component.js
│ │ │ └── actuallist.html
│ │ ├── finishedstep
│ │ │ ├── finishedstep.component.js
│ │ │ └── finishedstep.html
│ │ ├── poollist
│ │ │ ├── poollist.component.js
│ │ │ └── poollist.html
│ │ ├── processlist
│ │ │ ├── processlist.component.js
│ │ │ └── processlist.html
│ │ ├── processlistfinished
│ │ │ ├── processlistfinished.component.js
│ │ │ ├── processlistfinished.html
│ │ │ └── processlistfinished.scss
│ │ └── widgets.scss
│ ├── directives
│ │ ├── collapsible.js
│ │ ├── date.js
│ │ ├── setTooltips.js
│ │ ├── sideNavInitMaterialize.js
│ │ ├── slidePagination.js
│ │ └── switchOff.js
│ ├── plugins
│ │ ├── crypto
│ │ │ ├── cadesplugin_api.js
│ │ │ ├── cryptopro.js
│ │ │ ├── ie.js
│ │ │ └── webkitcrypto.js
│ │ ├── datetimepicker.js
│ │ ├── filter.js
│ │ ├── materialize.js
│ │ └── tools.js
│ ├── services
│ │ ├── httpService.js
│ │ └── storageService.js
│ └── vendor.js
└── webpack.config.js
Может что не так понял в гайдлане?
И мне еще интересно, а может ли как-то sublime (или при помощи плагинов), чтобы я мог нажать на функцию или объект (и как в IDE intelliJ) сразу, чтобы я перешел на реализацию?
Средний
Средний
