moved app to webpack

Author: anton-lunev

.gitignore

@@ -2,3 +2,4 @@
 node_modules
 bower_components
 dist
+dist1

bower.json

@@ -5,10 +5,11 @@
   "publishName": "myApp",
   "electronVersion": "0.36.9",
   "scripts": {
-    "start": "export NODE_ENV='dev'; electron ./dist/main.js",
+    "start": "export NODE_ENV='dev' && electron ./dist/main.js",
     "buildMac": "electron-packager ./dist/ easy-learn --platform=darwin --arch=x64 --out ~/Desktop/easy-learn --asar --version 0.36.9 --overwrite --icon=./src/images/app-icon.icns",
     "buildwin": "electron-packager ./dist/ easy-learn --platform=win32 --arch=x64 --out ~/Desktop/easy-learn --version 0.36.9 --overwrite --icon=./src/images/app-icon.ico",
-    "build": "webpack --progress --colors"
+    "build": "webpack --progress --colors",
+    "buildProd": "webpack --bail --progress --profile --colors"
   },
   "devDependencies": {
     "babel-core": "^6.7.2",
@@ -56,6 +57,10 @@
     "webpack-svgstore-plugin": "^2.1.3"
   },
   "dependencies": {
-    "angular": "^1.5.0"
+    "angular": "^1.5.0",
+    "angular-animate": "^1.5.0",
+    "angular-local-storage": "^0.2.6",
+    "angular-ui-router": "^0.2.18",
+    "lokijs": "^1.3.16"
   }
 }

package.json

@@ -1,6 +1,8 @@
-angular.module('easy-learn')
-    .config((localStorageServiceProvider, $urlRouterProvider) => {
-        localStorageServiceProvider.setPrefix('el');
+'use strict';
 
-        $urlRouterProvider.otherwise('/');
-    });
+export default (localStorageServiceProvider, $urlRouterProvider) => {
+    'ngInject';
+    
+    localStorageServiceProvider.setPrefix('el');
+    $urlRouterProvider.otherwise('/');
+}

src/package.json src/.package.json

@@ -1,17 +1,31 @@
 import './app.less';
-import '../svg/close.svg';
+import 'images/app-icon.svg';
 
 import angular from 'angular';
+// import ngAnimate from 'angular-animate';
+import LocalStorageModule from 'angular-local-storage';
+import uiRouter from 'angular-ui-router';
+
+import db from './common/db/db.service';
+import route from './app.route';
+import config from './app.config';
+import sidebar from './sidebar/sidebar';
+import list from './list/list';
+
+const deps = [
+    // ngAnimate,
+    LocalStorageModule,
+    uiRouter,
+    sidebar.name,
+    list.name,
+    db.name
+];
+
+angular.module('easy-learn', deps)
+    .config(route)
+    .config(config);
+
 
-angular.module('easy-learn', [
-    'ngAnimate', 
-    'LocalStorageModule',
-    'ui.router',
-    'lokijs',
-    'sidebar',
-    'list',
-    'db'
-]);
 
 //TODO make inputs wider
 //TODO make auto translate (by google and yandex)

src/app/app.config.js

@@ -1,32 +1,35 @@
-angular.module('easy-learn')
-    .config($stateProvider => {
-        $stateProvider
-            .state('route', {
-                url: '',
-                abstract: true,
-                views: {
-                    'sidebar': {
-                        templateUrl: 'app/sidebar/sidebar.tpl.html',
-                        controller: 'SidebarController',
-                        controllerAs: 'sidebar'
-                    },
-                    'content': {
-                        templateUrl: 'app/app.tpl.html'
-                    }
+'use strict';
+
+export default $stateProvider => {
+    'ngInject';
+    
+    $stateProvider
+        .state('route', {
+            url: '',
+            abstract: true,
+            views: {
+                'sidebar': {
+                    template: require('./sidebar/sidebar.tpl.html'),
+                    controller: 'SidebarController',
+                    controllerAs: 'sidebar'
                 },
-                resolve: {
-                    collections(dbService) {
-                        return dbService.getCollections();
-                    }
+                'content': {
+                    template: require('./app.tpl.html')
+                }
+            },
+            resolve: {
+                collections(dbService) {
+                    return dbService.getCollections();
                 }
-            })
+            }
+        })
 
-            .state('route.list', {
-                url: '/',
-                views: {
-                    'details': {
-                        templateUrl: 'app/welcome/welcome.tpl.html'
-                    }
+        .state('route.list', {
+            url: '/',
+            views: {
+                'details': {
+                    template: require('./welcome/welcome.tpl.html')
                 }
-            })
-    });
+            }
+        })
+};

src/app/index.js src/app/app.js

@@ -1,5 +1,15 @@
-angular.module('db', [])
+import angular from 'angular';
+import LokiIndexedAdapter from 'lokijs/src/loki-indexed-adapter';
+import lokijs from 'lokijs/src/loki-angular';
+
+const deps = [
+    lokijs.name
+];
+
+export default angular.module('db', deps)
     .factory('dbService', function CollectionService($q, Loki) {
+        'ngInject';
+        
         let _db;
         let _collections;
         initDB();

src/app/app.route.js

@@ -1,11 +1,16 @@
-angular.module('googleTranslate', [])
+'use strict';
+import angular from 'angular';
+
+export default angular.module('googleTranslate', [])
     .constant('googleTranslateConfig', {
         domain: 'https://translate.googleapis.com',
         source: 'en',
         target: 'ru'
     })
 
     .factory('googleTranslateService', function ($http, $timeout, googleTranslateConfig) {
+        'ngInject';
+        
         return {
             playAudio,
             getTranslation

src/app/common/db/db.service.js

@@ -1,4 +1,7 @@
-angular.module('notification', [])
+'use strict';
+import angular from 'angular';
+
+export default angular.module('notification', [])
     .factory('notificationService', function () {
         return {
             push

src/app/common/google-translate/google-translate.service.js

@@ -1,5 +1,10 @@
-angular.module('timer', [])
+'use strict';
+import angular from 'angular';
+
+export default angular.module('timer', [])
     .factory('timerService', function (googleTranslateService, localStorageService, notificationService) {
+        'ngInject';
+        
         let timer = {
             time: localStorageService.get('time') || 1,
             timerId: undefined
@@ -12,7 +17,7 @@ angular.module('timer', [])
         };
 
         /**
-         * Returned random value 
+         * Returned random value
          * @param {int} min
          * @param {int} max
          * @returns {*}

src/app/common/notification/notification.service.js

@@ -0,0 +1,13 @@
+'use strict';
+
+import ListFormController from './list-form.ctrl';
+
+let listForm = {
+    template: require('./list-form.tpl.html'),
+    bindings: {
+        addToCollection: '<'
+    },
+    controller: ListFormController
+};
+
+export default listForm;

src/app/common/timer/timer.service.js

@@ -0,0 +1,35 @@
+'use strict';
+
+class ListFormController {
+    constructor(googleTranslateService, notificationService) {
+        'ngInject';
+        
+        this.googleTranslateService = googleTranslateService;
+        this.notificationService = notificationService;
+
+        this.word = {
+            eng: null,
+            translate: null
+        };
+    }
+
+    getTranslation(word) {
+        if (!word) {
+            return;
+        }
+
+        this.googleTranslateService.getTranslation(word).then(translation => {
+            this.word.translate = translation;
+        });
+    }
+
+    addWord(word) {
+        this.addToCollection(word);
+
+        this.notificationService.push('New word', `${word.eng} - ${word.translate}`);
+        this.googleTranslateService.playAudio(word.eng, 1000);
+        this.word = {};
+    }
+}
+
+export default ListFormController;

src/app/list/list-form/list-form.component.js

@@ -1,38 +1,15 @@
-class ListFormController {
-    constructor(googleTranslateService, notificationService) {
-        this.googleTranslateService = googleTranslateService;
-        this.notificationService = notificationService;
+'use strict';
 
-        this.word = {
-            eng: null,
-            translate: null
-        };
-    }
+import './list-form.less';
+import angular from 'angular';
+import listForm from './list-form.component';
+import googleTranslate from 'common/google-translate/google-translate.service';
+import notification from 'common/notification/notification.service';
 
-    getTranslation(word) {
-        if (!word) {
-            return;
-        }
+const deps = [
+    googleTranslate.name,
+    notification.name
+];
 
-        this.googleTranslateService.getTranslation(word).then(translation => {
-            this.word.translate = translation;
-        });
-    }
-
-    addWord(word) {
-        this.addToCollection(word);
-
-        this.notificationService.push('New word', `${word.eng} - ${word.translate}`);
-        this.googleTranslateService.playAudio(word.eng, 1000);
-        this.word = {};
-    }
-}
-
-angular.module('list')
-    .component('listForm', {
-        templateUrl: 'app/list/list-form/list-form.tpl.html',
-        bindings: {
-            addToCollection: '<'
-        },
-        controller: ListFormController
-    });
+export default angular.module('list.list-form', deps)
+    .component('listForm', listForm);

src/app/list/list-form/list-form.ctrl.js

@@ -1,5 +1,9 @@
+'use strict';
+
 class ListController {
     constructor($scope, collection, dbService) {
+        'ngInject';
+        
         this.collection = collection;
 
         $scope.$watch('list.collection.list', (val, oldVal) => {
@@ -19,4 +23,4 @@ class ListController {
     }
 }
 
-angular.module('list').controller('ListController', ListController);
+export default ListController;

src/app/list/list-form/list-form.js

@@ -1 +1,20 @@
-angular.module('list', ['googleTranslate', 'timer', 'notification']);
+'use strict';
+
+import './list.less';
+import angular from 'angular';
+import ListController from './list.ctrl';
+import listService from './list.service';
+import route from './list.route';
+
+import listForm from './list-form/list-form';
+import timerInput from './timer-input/timer-input';
+
+const deps = [
+    listForm.name,
+    timerInput.name
+];
+
+export default angular.module('list', deps)
+    .controller('ListController', ListController)
+    .factory('listService', listService)
+    .config(route);