Я только учусь, и создал приложение на angular
У меня есть файл app.js, который подключается к index.html, я его создал таким:
'use strict';
import './vendor/materialize.js';
import HttpApi from './vendor/http/http.js';
import ngInject from './angular/inject.js';
/*
=======================================
ИНИЦИАЛИЗАЦИЯ данных
=======================================
*/
window.jQueryNamespacePlugin = require('./jquery/jQueryInitPlugin.js');
window.$plugin = jQueryNamespacePlugin;
const inject = ['$rootScope', '$http', '$compile'];
// реестр данных приложения
window.$Registry = {
// авторизация пользователя
'login': false,
// объект для работы с API бэкэнда
'server': null,
// счетчик изменений за один такт (в единицу времени)
'globalCounter': 0
};
/**
* Функция добавляющая общие данные в контроллере компонента
* @param {object} Registry - реестр данных приложения
* @param {object} $compile - объект для добавления нового DOM и связывания с обработчиками
* @param {object} $scope - локальная область видимости шаблонов относительно компонента контроллера
* @param {object} dataService - сервис, обменивающийся данными между контроллерами
*/
window.mixinsRegistry = (Registry, $compile, $scope, dataService) => {
return ($.extend(Registry, {
// область видимости контроллера
'$scope': $scope,
// функция привязки $scope
'$compile': $compile,
// данные синхронизированные между контроллерами
'dataService': dataService
}));
}
/**
* Функция, выполняющаяся в первую очередь при document.ready
* @borrows $Registry, $plugin
* @param {object} $rootScope - общая область видимости шаблонов для приложения
* @param {object} $http - ajax-объект для работы с http-запросами
* @param {object} $compile - объект для добавления нового DOM и связывания с обработчиками
*/
const runApp = ($rootScope, $http, $compile) => {
$rootScope.loginIsTrue = $Registry.login;
// cсылка на ajax взаимодействие
window.server = new HttpApi("api/", $http, $Registry);
// запрос на проверку статуса авторизации
server.send({'state_get': []}).then((data) => {
if (data.IsSuccessful && localStorage.getItem("SecurityToken")) {
$rootScope.loginIsTrue = $Registry.login = true;
$('[ng-view]').after($compile(
`<main-content></main-content>`
)($rootScope));
} else {
$('[ng-view]').after($compile(
`<login-content></login-content>`
)($rootScope));
}
});
};
const app = angular.module("myApp", []).run(((runApp, inject)=>{
ngInject(runApp, inject); return runApp;
})(runApp, inject));
/*
=======================================
ИНИЦИАЛИЗАЦИЯ КОМПОНЕНТОВ
=======================================
*/
import loginComponent from './angular/components/loginContent.js';
import navComponent from './angular/components/navContent.js';
import mainComponent from './angular/components/mainContent.js';
import pagComponent from './angular/components/pagContent.js';
import widgetsComponent from './angular/components/widgetsContent.js';
app.component('loginContent', loginComponent)
.component('mainContent', mainComponent)
.component('navigation', navComponent)
.component('pagination', pagComponent)
.component('widgets', widgetsComponent);
/*
=======================================
ИНИЦИАЛИЗАЦИЯ ДИРЕКТИВ
=======================================
*/
// вызываем jQuery плагины для определенных компонентов
import fadeInBody from './jquery/directives/fadeInBody.js';
import sideNavInitMaterialize from './jquery/directives/sideNavInitMaterialize.js';
import showAllTypesMenu from './jquery/directives/showAllTypesMenu.js';
import initMinHeightMainWrap from './jquery/directives/initMinHeightMainWrap.js';
import slidePaginationInitNew from './jquery/directives/slidePaginationInitNew.js';
import switchOff from './jquery/directives/switchOff.js';
import collapsibleInit from './jquery/directives/collapsibleInit.js';
app.directive('fadebody', fadeInBody)
.directive('sidenav', sideNavInitMaterialize)
.directive('showalltypesmenu', showAllTypesMenu)
.directive('initminheight', initMinHeightMainWrap)
.directive('initpagination', slidePaginationInitNew)
.directive('switchoff', switchOff)
.directive('collapsibleinit', collapsibleInit)
/*
=======================================
ИНИЦИАЛИЗАЦИЯ СЕРВИСА (связь между контроллерами)
=======================================
*/
import dataService from './angular/services/dataServiceClass.js';
app.service('dataService', ngInject(dataService, inject, '$timeout'));
/*
=======================================
ИНИЦИАЛИЗАЦИЯ КОНТРОЛЛЕРОВ
=======================================
*/
import LoginController from './angular/controllers/LoginController.js';
import NavController from './angular/controllers/NavController.js';
import MainController from './angular/controllers/MainController.js';
import PaginationController from './angular/controllers/PaginationController.js';
const setInject = (typeController) => ngInject(typeController, inject, ['$scope', 'dataService']);
app.controller('LoginController', setInject(LoginController))
.controller('NavController', setInject(NavController))
.controller('MainController', setInject(MainController))
.controller('PaginationController', setInject(PaginationController));
/*
=======================================
Функция для вывода пагинации
=======================================
*/
app.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});
/*
=======================================
ФУНКЦИОНАЛЬНЫЕ МОДУЛИ
=======================================
*/
const pathToModules = './angular/modules';
window.userprocesssteps = require(`${pathToModules}/userprocesssteps.js`); // получение шагов на исполнение
window.myprocessesget = require(`${pathToModules}/myprocessesget.js`); // получение моих процессов
window.processtypes = require(`${pathToModules}/processtypes.js`); // получение услуг
window.myprocessessstep = require(`${pathToModules}/myprocessessstep.js`); // получение выполненных шагов
window.myprocessesgetarchive = require(`${pathToModules}/myprocessesgetarchive.js`); // получение выполненных шагов
Нормально ли писать такой код?
