splincodewd
@splincodewd
Developer

Правильно ли я инициализирую приложение на AngularJS?

Уже задавал вопрос, и попытался исправиться

Переписал по гайдлайну
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) сразу, чтобы я перешел на реализацию?
  • Вопрос задан
  • 568 просмотров
Решения вопроса 2
Я может в глаза долблюсь, но вообще же не по гайду
Ответ написан
AMar4enko
@AMar4enko
Фичи группируйте в модули. Импортируйте и подключайте модули.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 апр. 2024, в 20:09
9000 руб./за проект
28 апр. 2024, в 19:54
2000 руб./за проект
28 апр. 2024, в 19:54
5000 руб./за проект