restructuring application

Author: 500Tech

package.json

@@ -27,7 +27,7 @@
   "scripts": {
     "postinstall": "typings install",
     "prestart": "npm install",
-    "start": "webpack-dev-server --hot",
+    "start": "webpack-dev-server --hot --port 8081",
     "typings": "typings",
     "bundle": "rimraf dist & copyfiles -f src/index.html dist/ & copyfiles -f src/assets/* dist/assets & webpack -p ./dist/bundle.js"
   }

src/app.config.ts

@@ -0,0 +1,22 @@
+/**
+ * Created by 500tech on 7/14/16.
+ */
+export const appName = 'app';
+
+export function appConfig($urlRouterProvider, $stateProvider, tagsInputConfigProvider) {
+    $urlRouterProvider.otherwise('/');
+    $stateProvider
+        .state('root', {
+            url: '/',
+            template: `<${appName}></${appName}>`
+        });
+    tagsInputConfigProvider
+        .setDefaults('tagsInput', {
+            placeholder: 'Search tags',
+            addFromAutocompleteOnly: true
+        })
+        .setDefaults('autoComplete', {
+            minLength: 1
+        })
+}
+appConfig.$inject = ['$urlRouterProvider', '$stateProvider', 'tagsInputConfigProvider'];

src/components/app.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '../decorators';
+import {appName} from "../app.config";
+import {CommentsComponent} from "./comment-list/comments.component";
+
+@Component({
+    selector: appName,
+    directives:  [CommentsComponent],
+    template: `<comments></comments>`
+})
+export class AppComponent {
+}

src/components/comment-list/comments.component.ts

@@ -4,9 +4,15 @@
 import {Component} from '../../decorators';
 import './comment-list.scss';
 import {IComment} from "../../interfaces";
+import {CommentComponent} from "../comment/comment.component";
+import {CommentsService} from "../../services/comments.service";
+import {FilterByTagsPipe} from "../../pipes/filterByTags";
 
 @Component({
     selector: 'comments',
+    directives:  [CommentComponent],
+    providers:   [CommentsService],
+    pipes: [FilterByTagsPipe],
     template: `
         <div class="container-fluid">
             <div class="discussion-timeline">
@@ -18,17 +24,17 @@ import {IComment} from "../../interfaces";
             </div>
         </div>`
 })
-export class CommentsController {
+export class CommentsComponent {
     comments: IComment[];
     emptyComment: IComment;
     tags: string[];
     tagFilter: any[];
 
-    static $inject = ['Comments'];
-    constructor(private Comments) {
+    static $inject = ['CommentsService'];
+    constructor(private CommentsService) {
         this.emptyComment = {};
         this.tagFilter = [];
-        Comments.getComments().then((comments) => {
+        CommentsService.getComments().then((comments) => {
             this.comments = comments;
             this.tags = this.comments
                 .map((el) => el.tags)

src/components/comment/comment.component.ts

@@ -55,7 +55,7 @@ import {IComment} from "../../interfaces";
             </div>
         </div>`
 })
-export class CommentController {
+export class CommentComponent {
     editMode: boolean;
     comment: IComment;
     commentCopy: IComment;

src/components/components.module.ts

@@ -2,5 +2,5 @@
  * Created by vlad on 5/29/16.
  */
 export default angular.module('app.components', []);
-export {CommentController} from './comment/comment.component';
-export {CommentsController} from './comment-list/comments.component';
+// export {CommentController} from './comment/comment.component';
+// export {CommentsController} from './comment-list/comments.component';

src/decorators.ts

@@ -1,6 +1,4 @@
-/**
- * Created by voland on 4/2/16.
- */
+import {appName} from "./app.config";
 
 const module = function(moduleOrName) {
     return typeof moduleOrName === "string"
@@ -13,36 +11,58 @@ export function Component(options: {
     controllerAs?: string,
     template?: string,
     templateUrl?: string,
-    bindings? : any
-}, moduleOrName: string | ng.IModule = 'app.components') {
-    return (controller: Function) => {
-        let selector = options.selector;
+    bindings?: any,
+    directives?: any[]
+    pipes?: any[]
+    providers?: any[]
+}, moduleOrName: string | ng.IModule = `${appName}.components`) {
+    return (controller: any) => {
+        const selector = options.selector;
         delete options.selector;
+        delete options.directives;
+        delete options.pipes;
+        delete options.providers;
         module(moduleOrName).component(selector, angular.extend(options, { controller: controller }));
     }
 }
 
-export function Service(moduleOrName: string | ng.IModule = 'app.services') {
+export function Service(moduleOrName: string | ng.IModule = `${appName}.services`) {
     return (service: any) => {
-        let name = service.name;
+        const name = service.name;
+        const isProvider = service.hasOwnProperty('$get');
         if (!name) {
             console.error('Service decorator can be used with named class only');
         }
-        module(moduleOrName).service(name, service);
+        module(moduleOrName)[isProvider ? 'provider' : 'service'](name, service);
     }
 }
 
+interface PipeTransformStatic {
+    new(...args: any[]): PipeTransform;
+}
+
 export interface PipeTransform {
     transform(value: any, ...args: any[]): any;
 }
 
-interface PipeTransformStatic {
-    new(...args: any[]): PipeTransform;
+export function Pipe(options: {name: string}, moduleOrName: string | ng.IModule = `${appName}.pipes`) {
+    return (Pipe: PipeTransformStatic) => {
+        const filter = () => {
+            const $injector = angular.injector(['ng']);
+            const instance:any = $injector.instantiate(Pipe);
+            return instance.transform.bind(instance);
+        };
+        module(moduleOrName).filter(options.name, filter);
+    }
 }
 
-export function Pipe(options: {name: string}, moduleOrName: string | ng.IModule = 'app.pipes') {
-    return (Pipe: PipeTransformStatic) => {
-        let instance = new Pipe();
-        module(moduleOrName).filter(options.name, () => instance.transform);
+export function Bootstrap(appName: string, appClass: any) {
+    return (anything: any) => {
+        if (!appClass) {
+            console.error(`Please provide main component class as a second argument to @Bootstrap decorator`);
+        }
+        angular.element(document).ready(() => {
+            angular.bootstrap(document, [appName]);
+        });
     }
 }

src/main.ts

@@ -5,33 +5,16 @@ import 'angular';
 import 'angular-ui-router';
 import 'angular-sanitize';
 import 'ng-tags-input';
-
-
 import services from './services/services.module';
 import components from './components/components.module';
 import pipes from './pipes/pipes.module';
+import {appConfig, appName} from "./app.config";
+import {AppComponent} from "./components/app.component";
+import {Bootstrap} from "./decorators";
 
-function appConfig ($urlRouterProvider, $stateProvider, tagsInputConfigProvider) {
-    $urlRouterProvider.otherwise('/');
-    $stateProvider
-        .state('index', {
-            url: '/',
-            template: '<comments></comments>'
-        });
-    tagsInputConfigProvider
-        .setDefaults('tagsInput', {
-            placeholder: 'Search tags',
-            addFromAutocompleteOnly: true
-        })
-        .setDefaults('autoComplete', {
-            minLength: 1
-        })
-}
-appConfig.$inject = ['$urlRouterProvider', '$stateProvider', 'tagsInputConfigProvider'];
-
-// configure the main module
+// configure
 angular
-    .module('app', [
+    .module(appName, [
         'ui.router',
         'ngTagsInput',
         'ngSanitize',
@@ -41,7 +24,6 @@ angular
     ])
     .config(appConfig);
 
-// bootstrap angular
-angular.element(document).ready(() => {
-    angular.bootstrap(document, ['app']);
-});
+// bootstrap
+@Bootstrap(appName, AppComponent)
+class App {}

src/pipes/filterByTags.ts

@@ -3,10 +3,17 @@
  */
 
 import {PipeTransform, Pipe} from '../decorators';
+// import {CommentsService} from "../services/comments.service";
 
 @Pipe({name: 'filterByTags'})
 export class FilterByTagsPipe implements PipeTransform {
+    static $inject = ['$q'];
+    constructor(private _$q: ng.IQService) {
+    }
+    
     transform(comments: any, tags: any) {
+        let deferred = this._$q.defer;
+        // console.log(this._comments.getComments);
         if (!tags.length) return comments;
         function check(comment) {
             let filterArray = tags.map((tag: any) => tag.text);

src/pipes/pipes.module.ts

@@ -1,2 +1,2 @@
 export default angular.module('app.pipes', []);
-export {FilterByTagsPipe} from './filterByTags';
+// export {FilterByTagsPipe} from './filterByTags';