Migrate article directive to typescript using ngforward

Michel Felipe
1 parent 37fd3f09
Showing 10 changed files with 149 additions and 137 deletions Show diff stats
package.json
src/app/components/noosfero-articles/article/article.directive.js
src/app/components/noosfero-articles/article/article.directive.ts
src/app/content-viewer/content-viewer.controller.js
src/app/content-viewer/content-viewer.controller.ts
src/app/index.module.ts
src/app/index.route.ts
src/app/index.ts
tsconfig.json
typings.json
@@ -49,7 +49,9 @@
     "karma-phantomjs-launcher": "~0.2.1",
     "lodash": "~3.10.1",
     "main-bower-files": "~2.9.0",
+    "ng-forward": "0.0.1-alpha.12",
     "phantomjs": "~1.9.18",
+    "reflect-metadata": "^0.1.3",
     "ts-loader": "^0.8.1",
     "typescript": "^1.8.2",
     "typings": "^0.6.8",
@@ -1,36 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .directive('noosferoArticle', noosferoArticle);
-
-  /** @ngInject */
-  function noosferoArticle($injector, $compile) {
-    var directive = {
-      restrict: 'E',
-      templateUrl: 'app/components/noosfero-articles/article/article.html',
-      scope: {
-          article: '<',
-          profile: '<'
-      },
-      controller: ArticleController,
-      controllerAs: 'vm',
-      bindToController: true,
-      link: function(scope, element) {
-        var specificDirective = 'noosfero'+scope.vm.article.type;
-        if($injector.has(specificDirective+'Directive')) {
-          var directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-          element.replaceWith($compile('<'+directiveName+' article="vm.article" profile="vm.profile"></'+directiveName+'>')(scope));          
-        }
-      }
-    };
-
-    return directive;
-
-    /** @ngInject */
-    function ArticleController() {
-    }
-  }
-
-})();
@@ -0,0 +1,45 @@
+import { Input, Inject, Component, Directive } from 'ng-forward';
+
+@Component({
+    selector: 'noosfero-default-article',
+    templateUrl: 'app/components/noosfero-articles/article/article.html',
+    providers: ['$injector', '$compile']
+})
+export class ArticleView {
+
+}
+
+/**
+* <noosfero-article></noosfero-article>
+*
+*
+*/
+@Directive({
+    selector: 'noosfero-article',
+    providers: ['$injector', '$compile'],
+
+})
+@Inject('$element')
+@Inject('$scope')
+export class ArticleDirective {
+
+    @Input("article")
+    article: any;
+
+    @Input("profile")
+    profile: any;
+
+    constructor($element: any, $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
+        console.log('ARTICLE DIRECTIVE');
+        var specificDirective = 'noosfero' + this.article.type;
+        if ($injector.has(specificDirective + 'Directive')) {
+            var directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+            $element.replaceWith($compile('<' + directiveName + ' article="vm.article" profile="vm.profile"></' + directiveName + '>')($scope));
+            //$element.html($compile('<' + directiveName + ' article="vm.article" profile="vm.profile"></' + directiveName + '>')(scope))
+        } else {
+            //TODO
+        }
+    }
+
+
+}
@@ -1,25 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .controller('ContentViewerController', ContentViewerController);
-
-
-  /** @ngInject */
-  function ContentViewerController(noosfero, $log, $stateParams) {
-    var vm = this;
-    vm.article = null;
-    vm.profile = null;
-    activate();
-
-    function activate() {
-      noosfero.currentProfile.then(function(profile) {
-        vm.profile = profile;
-        return noosfero.profiles.one(vm.profile.id).one('articles').get({path: $stateParams.page});
-      }).then(function(response) {
-        vm.article = response.data.article;
-      });
-    }
-  }
-})();
@@ -0,0 +1,18 @@
+import {ArticleDirective, ArticleView} from "../components/noosfero-articles/article/article.directive";
+
+/** @ngInject */
+export function ContentViewerController(noosfero, $log, $stateParams) {
+    var vm = this;
+    vm.article = null;
+    vm.profile = null;
+    activate();
+
+    function activate() {
+        noosfero.currentProfile.then(function(profile) {
+            vm.profile = profile;
+            return noosfero.profiles.one(vm.profile.id).one('articles').get({ path: $stateParams.page });
+        }).then(function(response) {
+            vm.article = response.data.article;
+        });
+    }
+}
@@ -22,6 +22,10 @@ export class NoosferoApp {
         angular.module(NoosferoApp.appName).service(serviceName, value);
     }
+    static addController(controllerName: string, value: any) {
+        angular.module(NoosferoApp.appName).controller(controllerName, value);
+    }
+
     static run(runFunction: Function) {
         angular.module(NoosferoApp.appName).run(runFunction);
     }
 /** @ngInject */
-export  function routeConfig($stateProvider, $urlRouterProvider) {
+export function routeConfig($stateProvider, $urlRouterProvider) {
     $stateProvider
-      .state("main", {
-        url: "/",
-        templateUrl: "app/main/main.html",
-        controller: "MainController",
-        controllerAs: "vm",
-        resolve: {
-          currentUser: function(AuthService) {
-            return AuthService.loginFromCookie();
-          }
-        }
-      })
-      .state("main.profile.cms", {
-        url: "^/myprofile/:profile/cms",
-        views: {
-          "mainBlockContent": {
-            templateUrl: "app/cms/cms.html",
-            controller: "CmsController",
-            controllerAs: "vm"
-          }
-        }
-      })
-      .state("main.profile.settings", {
-        url: "^/myprofile/:profile"
-      })
-      .state("main.profile", {
-        url: "^/:profile",
-        abstract: true,
-        views: {
-          "content": {
-            templateUrl: "app/profile/profile.html",
-            controller: "ProfileController",
-            controllerAs: "vm"
-          }
-        }
-      })
-      .state("main.profile.home", {
-        url: "",
-        views: {
-          "mainBlockContent": {
-            controller: "ProfileHomeController",
-            controllerAs: "vm"
-          }
-        }
-      })
-      .state("main.profile.info", {
-        url: "^/profile/:profile",
-        views: {
-          "mainBlockContent": {
-            templateUrl: "app/profile-info/profile-info.html",
-            controller: "ProfileInfoController",
-            controllerAs: "vm"
-          }
-        }
-      })
-      .state("main.profile.page", {
-        url: "/{page:any}",
-        views: {
-          "mainBlockContent": {
-            templateUrl: "app/content-viewer/page.html",
-            controller: "ContentViewerController",
-            controllerAs: "vm"
-          },
-          "actions@main": {
-            templateUrl: "app/content-viewer/navbar-actions.html",
-            controller: "ContentViewerActionsController",
-            controllerAs: "vm"
-          }
-        }
-      });
+        .state("main", {
+            url: "/",
+            templateUrl: "app/main/main.html",
+            controller: "MainController",
+            controllerAs: "vm",
+            resolve: {
+                currentUser: function(AuthService) {
+                    return AuthService.loginFromCookie();
+                }
+            }
+        })
+        .state("main.profile.cms", {
+            url: "^/myprofile/:profile/cms",
+            views: {
+                "mainBlockContent": {
+                    templateUrl: "app/cms/cms.html",
+                    controller: "CmsController",
+                    controllerAs: "vm"
+                }
+            }
+        })
+        .state("main.profile.settings", {
+            url: "^/myprofile/:profile"
+        })
+        .state("main.profile", {
+            url: "^/:profile",
+            abstract: true,
+            views: {
+                "content": {
+                    templateUrl: "app/profile/profile.html",
+                    controller: "ProfileController",
+                    controllerAs: "vm"
+                }
+            }
+        })
+        .state("main.profile.home", {
+            url: "",
+            views: {
+                "mainBlockContent": {
+                    controller: "ProfileHomeController",
+                    controllerAs: "vm"
+                }
+            }
+        })
+        .state("main.profile.info", {
+            url: "^/profile/:profile",
+            views: {
+                "mainBlockContent": {
+                    templateUrl: "app/profile-info/profile-info.html",
+                    controller: "ProfileInfoController",
+                    controllerAs: "vm"
+                }
+            }
+        })
+        .state("main.profile.page", {
+            url: "/{page:any}",
+            views: {
+                "mainBlockContent": {
+                    templateUrl: "app/content-viewer/page.html",
+                    controller: "ContentViewerController",
+                    controllerAs: "vm"
+                },
+                "actions@main": {
+                    templateUrl: "app/content-viewer/navbar-actions.html",
+                    controller: "ContentViewerActionsController",
+                    controllerAs: "vm"
+                }
+            }
+        });
     $urlRouterProvider.otherwise("/");
-  }
-
-
+}
@@ -2,6 +2,7 @@ import {NoosferoApp} from &quot;./index.module&quot;;
 import {noosferoModuleConfig} from "./index.config";
 import {noosferoAngularRunBlock} from "./index.run";
 import {routeConfig} from "./index.route";
+import {ContentViewerController} from "./content-viewer/content-viewer.controller";
 declare var moment: any;
@@ -26,7 +27,7 @@ require(&quot;./components/auth/auth.service.js&quot;);
 require("./components/navbar/navbar.directive.js");
 require("./components/noosfero-activities/activities.component.js");
 require("./components/noosfero-activities/activity/activity.component.js");
-require("./components/noosfero-articles/article/article.directive.js");
+//require("./components/noosfero-articles/article/article.directive.js");
 require("./components/noosfero-articles/blog/blog.component.js");
 require("./components/noosfero-blocks/block.directive.js");
 require("./components/noosfero-blocks/link-list/link-list.component.js");
@@ -39,9 +40,11 @@ require(&quot;./components/noosfero/noosfero-template.filter.js&quot;);
 require("./components/noosfero/noosfero.service.js");
 require("./components/noosfero/profile-image/profile-image.component.js");
 require("./content-viewer/content-viewer-actions.controller.js");
-require("./content-viewer/content-viewer.controller.js");
+// require("./content-viewer/content-viewer.controller.js");
 require("./profile-info/profile-info.controller.js");
 require("./profile/profile-home.controller.js");
 require("./profile/profile.controller.js");
+NoosferoApp.addController("ContentViewerController", ContentViewerController);
+
 NoosferoApp.addConfig(routeConfig);
@@ -3,7 +3,8 @@
         "module": "commonjs",
         "target": "es5",
         "noImplicitAny": false,
-        "sourceMap": false
+        "sourceMap": false,
+        "experimentalDecorators": true
     },
     "exclude": [
         "node_modules",
@@ -4,6 +4,8 @@
   "devDependencies": {},
   "ambientDependencies": {
     "angular": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular.d.ts#1c4a34873c9e70cce86edd0e61c559e43dfa5f75",
+    "angular-ui-router": "github:DefinitelyTyped/DefinitelyTyped/angular-ui-router/angular-ui-router.d.ts#655f8c1bf3c71b0e1ba415b36309604f79326ac8",
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
     "jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/jquery.d.ts#470954c4f427e0805a2d633636a7c6aa7170def8"
   }
 }
	@@ -1,36 +0,0 @@	@@ -1,36 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .directive('noosferoArticle', noosferoArticle);
7	-
8	- /** @ngInject */
9	- function noosferoArticle($injector, $compile) {
10	- var directive = {
11	- restrict: 'E',
12	- templateUrl: 'app/components/noosfero-articles/article/article.html',
13	- scope: {
14	- article: '<',
15	- profile: '<'
16	- },
17	- controller: ArticleController,
18	- controllerAs: 'vm',
19	- bindToController: true,
20	- link: function(scope, element) {
21	- var specificDirective = 'noosfero'+scope.vm.article.type;
22	- if($injector.has(specificDirective+'Directive')) {
23	- var directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
24	- element.replaceWith($compile('<'+directiveName+' article="vm.article" profile="vm.profile"></'+directiveName+'>')(scope));
25	- }
26	- }
27	- };
28	-
29	- return directive;
30	-
31	- /** @ngInject */
32	- function ArticleController() {
33	- }
34	- }
35	-
36	-})();
@@ -0,0 +1,45 @@		@@ -0,0 +1,45 @@
	1	+import { Input, Inject, Component, Directive } from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'noosfero-default-article',
	5	+ templateUrl: 'app/components/noosfero-articles/article/article.html',
	6	+ providers: ['$injector', '$compile']
	7	+})
	8	+export class ArticleView {
	9	+
	10	+}
	11	+
	12	+/**
	13	+* <noosfero-article></noosfero-article>
	14	+*
	15	+*
	16	+*/
	17	+@Directive({
	18	+ selector: 'noosfero-article',
	19	+ providers: ['$injector', '$compile'],
	20	+
	21	+})
	22	+@Inject('$element')
	23	+@Inject('$scope')
	24	+export class ArticleDirective {
	25	+
	26	+ @Input("article")
	27	+ article: any;
	28	+
	29	+ @Input("profile")
	30	+ profile: any;
	31	+
	32	+ constructor($element: any, $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
	33	+ console.log('ARTICLE DIRECTIVE');
	34	+ var specificDirective = 'noosfero' + this.article.type;
	35	+ if ($injector.has(specificDirective + 'Directive')) {
	36	+ var directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	37	+ $element.replaceWith($compile('<' + directiveName + ' article="vm.article" profile="vm.profile"></' + directiveName + '>')($scope));
	38	+ //$element.html($compile('<' + directiveName + ' article="vm.article" profile="vm.profile"></' + directiveName + '>')(scope))
	39	+ } else {
	40	+ //TODO
	41	+ }
	42	+ }
	43	+
	44	+
	45	+}
	@@ -1,25 +0,0 @@	@@ -1,25 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .controller('ContentViewerController', ContentViewerController);
7	-
8	-
9	- /** @ngInject */
10	- function ContentViewerController(noosfero, $log, $stateParams) {
11	- var vm = this;
12	- vm.article = null;
13	- vm.profile = null;
14	- activate();
15	-
16	- function activate() {
17	- noosfero.currentProfile.then(function(profile) {
18	- vm.profile = profile;
19	- return noosfero.profiles.one(vm.profile.id).one('articles').get({path: $stateParams.page});
20	- }).then(function(response) {
21	- vm.article = response.data.article;
22	- });
23	- }
24	- }
25	-})();
@@ -0,0 +1,18 @@		@@ -0,0 +1,18 @@
	1	+import {ArticleDirective, ArticleView} from "../components/noosfero-articles/article/article.directive";
	2	+
	3	+/** @ngInject */
	4	+export function ContentViewerController(noosfero, $log, $stateParams) {
	5	+ var vm = this;
	6	+ vm.article = null;
	7	+ vm.profile = null;
	8	+ activate();
	9	+
	10	+ function activate() {
	11	+ noosfero.currentProfile.then(function(profile) {
	12	+ vm.profile = profile;
	13	+ return noosfero.profiles.one(vm.profile.id).one('articles').get({ path: $stateParams.page });
	14	+ }).then(function(response) {
	15	+ vm.article = response.data.article;
	16	+ });
	17	+ }
	18	+}