M
M
Maxim Ivanov2016-10-29 23:44:31
Angular
Maxim Ivanov, 2016-10-29 23:44:31

Am I initializing my AngularJS app correctly?

Already asked the question , and tried to fix
it Rewrote according to the guideline
https://github.com/toddmotto/angular-styleguide
But the application entry point turned out to be pretty dumb, what's wrong?

/**
 * 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: I am compiling the application with webpack (om), so everything is in ES5, all the application logic is ultimately in the app.js file.
The structure of the source project:
.
├── 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

Maybe I misunderstood something in the guideline?
And I'm still wondering if sublime (or with the help of plugins) can somehow so that I can click on a function or object (and how in the intelliJ IDE) immediately, so that I go to the implementation?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nicholas, 2016-10-30
@splincodewd

I can peck in the eyes, but in general, not according to the guide

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question