initial commit

Author: 500Tech

src/app.config.ts

@@ -1,15 +1,11 @@
-/**
- * Created by 500tech on 7/14/16.
- */
-export const appName = 'app';
+import {routes} from "./app.routes";
+import {provideStates} from "./decorators";
 
 export function appConfig($urlRouterProvider, $stateProvider, tagsInputConfigProvider) {
+    provideStates(routes, $stateProvider);
+
     $urlRouterProvider.otherwise('/');
-    $stateProvider
-        .state('root', {
-            url: '/',
-            template: `<${appName}></${appName}>`
-        });
+
     tagsInputConfigProvider
         .setDefaults('tagsInput', {
             placeholder: 'Search tags',

src/app.routes.ts

@@ -0,0 +1,6 @@
+import {AppComponent} from "./components/app.component";
+import {IComponentState} from "./decorators";
+
+export const routes: IComponentState[] = [
+    { state: 'root', url: '/', component: AppComponent }
+];

src/components/app.component.ts

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

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

@@ -24,15 +24,14 @@ import {FilterByTagsPipe} from "../../pipes/filterByTags";
             </div>
         </div>`
 })
-
 @Injectable()
 export class CommentsComponent {
     comments: IComment[];
     emptyComment: IComment;
     tags: string[];
     tagFilter: any[];
 
-    constructor(private _CommentsService: CommentsService) {
+    constructor(private _CommentsService) {
         this.emptyComment = {};
         this.tagFilter = [];
         _CommentsService.getComments().then((comments) => {

src/decorators.ts

@@ -1,4 +1,6 @@
-import {appName} from "./app.config";
+import {IState, IStateProvider} from "angular-ui-router";
+
+const appName = 'app';
 
 const module = function(moduleOrName) {
     return typeof moduleOrName === "string"
@@ -13,27 +15,30 @@ export function Component(options: {
     templateUrl?: string,
     bindings?: any,
     require?: any,
-    directives?: any[]
-    pipes?: any[]
+    directives?: any[],
+    pipes?: any[],
     providers?: any[]
 }, moduleOrName: string | ng.IModule = `${appName}.components`) {
-    return (controller: any) => {
+    return (Class: 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 }));
+        Class.selector = selector;
+        module(moduleOrName).component(selector, angular.extend(options, { controller: Class }));
     }
 }
+function annotate(func: any) {
+    const $injector = angular.injector(['ng']);
+    func.$inject = $injector.annotate(func).map(member => member.replace(/^_/, ''));
+}
 
-export function Service(moduleOrName: string | ng.IModule = `${appName}.services`) {
+export function Injectable(moduleOrName: string | ng.IModule = `${appName}.services`) {
     return (service: any) => {
         const name = service.name;
         const isProvider = service.hasOwnProperty('$get');
-        if (!name) {
-            console.error('Service decorator can be used with named class only');
-        }
+        annotate(service);
         module(moduleOrName)[isProvider ? 'provider' : 'service'](name, service);
     }
 }
@@ -48,32 +53,41 @@ export interface PipeTransform {
 
 export function Pipe(options: {name: string}, moduleOrName: string | ng.IModule = `${appName}.pipes`) {
     return (Pipe: PipeTransformStatic) => {
-        const filter = () => {
-            console.log(Pipe.$inject);
-            //@todo: add support for injection across all registered modules
-            const $injector = angular.injector(['ng']);
-            const instance:any = $injector.instantiate(Pipe);
-            return instance.transform.bind(instance);
-        };
-        module(moduleOrName).filter(options.name, filter);
+        annotate(Pipe);
+        //@todo: add support for injection across all registered modules
+        debugger;
+        const $injector = angular.injector(['ng']);
+        const instance:any = $injector.instantiate(Pipe);
+        module(moduleOrName).filter(options.name, () => instance.transform.bind(instance));
     }
 }
 
+export interface IComponentState extends IState {
+    state: string,
+    component?: any,
+    views?: { [name: string]: IComponentState }
+}
 
-export function Injectable() {
-    return (Class: any) => {
-        const $injector = angular.injector(['ng']);
-        Class.$inject = $injector.annotate(Class).map((member) => member.replace(/^_/, ''));
-    }
+function setTemplate(state: IComponentState) {
+    const selector = state.component.selector;
+    state.template = `<${selector}></${selector}>`;
+    delete state.component;
 }
 
-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`);
+export function provideStates(states: IComponentState[], $stateProvider: IStateProvider) {
+    states.map((config) => {
+        const name = config.state;
+        const namedState = config.views;
+        if (namedState) {
+            const namedViews = Object.keys(namedState);
+            namedViews.forEach((view) => {
+                setTemplate(namedState[view]);
+            });
         }
-        angular.element(document).ready(() => {
-            angular.bootstrap(document, [appName]);
-        });
-    }
+        else {
+            setTemplate(config);
+        }
+        delete config.state;
+        return { name, config };
+    }).forEach(state => $stateProvider.state(state.name, state.config));
 }

src/main.ts

@@ -8,13 +8,12 @@ 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";
+import {appConfig} from "./app.config";
+
+const appName = 'app';
 
 // configure
-angular
-    .module(appName, [
+angular.module(appName, [
         'ui.router',
         'ngTagsInput',
         'ngSanitize',
@@ -25,5 +24,6 @@ angular
     .config(appConfig);
 
 // bootstrap
-@bootstrap(appName, AppComponent)
-class App {}
+angular.element(document).ready(() => {
+        angular.bootstrap(document, [appName], { strictDi: true });
+});

src/pipes/filterByTags.ts

@@ -5,17 +5,18 @@
 import {PipeTransform, Pipe, Injectable} from '../decorators';
 import {CommentsService} from "../services/comments.service";
 
-@Injectable()
+// @Injectable()
 @Pipe({name: 'filterByTags'})
 export class FilterByTagsPipe implements PipeTransform {
     // static $inject = ['$q'];
-    // constructor(private _$q: ng.IQService, private _CommentsService: CommentsService) {
-    constructor(private _$q: ng.IQService) {
+    constructor(private _$q: ng.IQService, private _$state: CommentsService) {
+        console.log(`filter register`);
+    // constructor(private _$q, private _CommentsService) {
     }
 
     transform(comments: any, tags: any) {
         let deferred = this._$q.defer;
-        // console.log(this._Comments_Service.getComments);
+        console.log(this._$state);
         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 default angular.module('app.pipes', ['app.services']);
 // export {FilterByTagsPipe} from './filterByTags';

src/services/comments.service.ts

@@ -1,19 +1,13 @@
-/**
- * Created by voland on 4/2/16.
- */
-import {IComment} from "../interfaces";
-import {Service} from "../decorators";
+import {Injectable} from "../decorators";
 
-@Service()
+@Injectable()
 export class CommentsService {
 
-    static $inject = ['$http'];
-    constructor(private $http) {
+    constructor(private _$http) {
+        console.log(`CommentsService register`);
     }
 
     getComments() {
-        return this.$http.get('assets/mock.json').then((response: {data: IComment[]}) => {
-            return response.data;
-        });
+        return this._$http.get('assets/mock.json').then(response => response.data);
     };
 }

src/services/services.module.ts

@@ -1,5 +1,4 @@
 /**
  * Created by voland on 4/2/16.
  */
-export default angular.module('app.services', []);
-// export {Comments} from './comments.service'
+export default angular.module('app.services', []);