migrated auth_service, session and auth controller to typescript. renamed articl…

…edirective to articleView. fixed articleView test.

migrated auth_service, session and auth controller to typescript. renamed articl…
…edirective to articleView. fixed articleView test.
ABNER SILVA DE OLIVEIRA
1 parent 807f6df6
Showing 30 changed files with 320 additions and 241 deletions Show diff stats
.vscode/settings.json
src/app/cms/cms.component.ts
src/app/components/auth/auth.controller.js
src/app/components/auth/auth_controller.ts
src/app/components/auth/auth_events.ts
src/app/components/auth/auth_service.ts
src/app/components/auth/noosfero_root_scope.ts
src/app/components/auth/session.ts
src/app/components/noosfero-articles/article/article.directive.spec.ts
src/app/components/noosfero-articles/article/article.directive.ts
src/app/components/noosfero-articles/article/article_view.spec.ts
src/app/components/noosfero-articles/article/article_view.ts
src/app/components/noosfero-articles/blog/blog.component.ts
src/app/components/noosfero-boxes/boxes.component.ts
src/app/content-viewer/content-viewer-actions.component.ts
src/app/content-viewer/content-viewer.component.ts
src/app/index.config.ts
src/app/index.module.ts
src/app/index.route.ts
src/app/index.run.ts
@@ -4,5 +4,7 @@
         "**/.git": true,
         "**/.DS_Store": true,
         "src/app/*.js": false
-    }
+    },
+    "editor.fontSize": 14,
+    "typescript.useCodeSnippetsOnMethodSuggest": true
 }
 \ No newline at end of file
 import {StateConfig, Component, Inject} from 'ng-forward';
-
+import {Profile} from "./../models/interfaces";
 @Component({
     selector: 'cms',
     templateUrl: "app/cms/cms.html"
@@ -10,19 +10,19 @@ export class Cms {
     article: any = {};
     profile: any;
-    constructor(private noosfero, private $stateParams, private $httpParamSerializer, private $state, private SweetAlert) {
+    constructor(private noosfero: any/* TODO convert noosferoService */, private $stateParams: ng.ui.IStateParamsService, private $httpParamSerializer: any, private $state: ng.ui.IStateService, private SweetAlert: any) {
     }
     save() {
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: Profile) => {
             return this.noosfero.profiles.one(profile.id).customPOST(
                 { article: this.article },
                 'articles',
                 {},
                 { 'Content-Type': 'application/json' }
             )
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });
             this.SweetAlert.swal({
                 title: "Good job!",
@@ -1,17 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .controller('AuthController', AuthController);
-
-
-  /** @ngInject */
-  function AuthController(noosfero, $log, $stateParams, AuthService) {
-    var vm = this;
-    vm.credentials = {};
-    vm.login = function() {
-      AuthService.login(vm.credentials);
-    }
-  }
-})();
@@ -0,0 +1,22 @@
+import {Credentials} from "./../../models/interfaces";
+import {AuthService} from "./auth_service";
+
+export class AuthController {
+
+    static $inject = ["noosfero", "$log", "$stateParams", "AuthService"];
+
+    constructor(
+        private noosfero: any,
+        private $log: ng.ILogService,
+        private $stateParams: any,
+        private AuthService: AuthService
+    ) {
+
+    }
+
+    credentials: Credentials;
+
+    login() {
+        this.AuthService.login(this.credentials);
+    }
+}
 \ No newline at end of file
-
-
 export interface IAuthEvents {
     loginSuccess: string;
     loginFailed: string;
 import {Injectable, Inject} from "ng-forward";
-import {Credentials} from "./../../models/interfaces";
+import {Credentials, NoosferoRootScope, User, UserResponse} from "./../../models/interfaces";
 import {Session} from "./session";
-import {NoosferoRootScope} from "./noosfero_root_scope";
+
 import {AUTH_EVENTS, IAuthEvents} from "./auth_events";
-@Injectable
-@Inject("$q", "$http", "$rootScope", Session, "$log", "AUTH_EVENTS")
+@Injectable()
+@Inject("$q", "$http", "$rootScope", "Session", "$log", "AUTH_EVENTS")
 export class AuthService {
+
     constructor(private $q: ng.IQService,
         private $http: ng.IHttpService,
         private $rootScope: NoosferoRootScope,
-        private Session: Session,
+        private session: Session,
         private $log: ng.ILogService,
-        private AUTH_EVENTS: IAuthEvents) {
+        private auth_events: IAuthEvents) {
     }
-    private loginSuccessCallback(response) {
+    loginFromCookie() {
+        let url: string = '/api/v1/login_from_cookie';
+        return this.$http.post(url, null).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
+    }
+
+
+    private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
         this.$log.debug('AuthService.login [SUCCESS] response', response);
-        let currentUser = this.Session.create(response.data);
+        let currentUser: User = this.session.create(response.data);
         this.$rootScope.currentUser = currentUser;
-        this.$rootScope.$broadcast(this.AUTH_EVENTS.loginSuccess, currentUser);
+        this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
         return currentUser;
     }
     login(credentials: Credentials) {
         let url = '/api/v1/login';
         let encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
-        return this.$http.post(url, encodedData).then(this.loginSuccessCallback, this.loginFailedCallback);
+        return this.$http.post(url, encodedData).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
     }
-    private loginFailedCallback(response) {
+    private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
         this.$log.debug('AuthService.login [FAIL] response', response);
-        this.$rootScope.$broadcast(AUTH_EVENTS.loginFailed);
+        this.$rootScope.$broadcast(this.auth_events.loginFailed);
         // return $q.reject(response);
         return null;
     }
     public logout() {
-        this.Session.destroy();
+        this.session.destroy();
         this.$rootScope.currentUser = undefined;
-        this.$rootScope.$broadcast(AUTH_EVENTS.logoutSuccess);
-        this.$http.jsonp('/account/logout'); //FIXME logout from noosfero to sync login state
+        this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
+        this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
     }
     public isAuthenticated() {
-        return !!this.Session.getCurrentUser();
+        return !!this.session.getCurrentUser();
     }
-    public isAuthorized(authorizedRoles) {
+    public isAuthorized(authorizedRoles: string | string[]) {
         if (!angular.isArray(authorizedRoles)) {
-            authorizedRoles = [authorizedRoles];
+            authorizedRoles = [<string>authorizedRoles];
         }
-        return (this.isAuthenticated() && authorizedRoles.indexOf(this.Session.getCurrentUser().userRole) !== -1);
+        return (this.isAuthenticated() && authorizedRoles.indexOf(this.session.getCurrentUser().userRole) !== -1);
     }
 }
 \ No newline at end of file
@@ -1,5 +0,0 @@
-import {User} from "./../../models/interfaces";
-
-export interface NoosferoRootScope extends ng.IScope {
-    currentUser: User;
-}
 \ No newline at end of file
 import {Injectable, Inject} from "ng-forward";
+import {UserResponse, User, INoosferoLocalStorage} from "./../../models/interfaces";
 @Injectable()
 @Inject("$localStorage", "$log")
 export class Session {
-    constructor(private $localStorage, $log) {
+
+    constructor(private $localStorage: INoosferoLocalStorage, private $log: ng.ILogService) {
     }
-    create = function(data) {
+    create(data: UserResponse): User {
         this.$localStorage.currentUser = data.user;
         this.$log.debug('User session created.', this.$localStorage.currentUser);
         return this.$localStorage.currentUser;
     };
-    destroy = function() {
+    destroy() {
         delete this.$localStorage.currentUser;
         this.$log.debug('User session destroyed.');
     };
-    getCurrentUser = function() {
+    getCurrentUser(): User {
         return this.$localStorage.currentUser;
     };
@@ -1,85 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Input, provide, Component} from 'ng-forward';
-
-import {ArticleDirective} from './article.directive';
-
-// Instantiate the Builder, this part is different than ng2.
-// In ng2 you inject tcb.
-const tcb = new TestComponentBuilder();
-
-// this htmlTemplate will be re-used between the container components in this spec file 
-const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
-
-
-describe("Article Directive", () => {
-    
-    
-    // the karma preprocessor html2js transform the templates html into js files which put
-    // the templates to the templateCache into the module templates
-    // we need to load the module templates here as the template for the 
-    // component NoosferoArtileDirective will be load on our tests
-    beforeEach(angular.mock.module("templates"));
-
-    it("receives the article and profile as inputs", done => {
-
-        // Creating a container component (ArticleContainerComponent) to include 
-        // the component under test (ArticleDirective)  
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective] })
-        class ArticleContainerComponent {
-            article = { type: 'anyArticleType' };
-            profile = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-
-        // uses the TestComponentBuilder instance to initialize the component
-        tcb.createAsync(ArticleContainerComponent).then((fixture) => {
-            // and here we can inspect and run the test assertions 
-            let myComponent: ArticleContainerComponent = fixture.componentInstance;
-
-            console.log(myComponent);
-
-            // assure the article object inside the ArticleDirective matches
-            // the provided through the parent component
-            expect(myComponent.article.type).toEqual("anyArticleType");
-            expect(myComponent.profile.name).toEqual("profile-name");
-
-            myComponent.metodoAsync(() => {
-                done();
-            });
-            // done needs to be called (it isn't really needed, as we can read in
-            // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
-            // because createAsync in ng-forward is not really async, but as the intention 
-            // here is write tests in angular 2 ways, this is recommended
-            done();
-        });
-    });
-
-
-    it("renders a directive which matches to the article type", done => {
-        // NoosferoTinyMceArticle component created to check if it will be used
-        // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleDirective)
-        // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
-        @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
-        class NoosferoTinyMceArticle {
-            @Input() article: any;
-            @Input() profile: any;
-        }
-
-        // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective, NoosferoTinyMceArticle] })
-        class CustomArticleType {
-            article = { type: 'TinyMceArticle' };
-            profile = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-        tcb.createAsync(CustomArticleType).then(fixture => {
-            let myComponent: CustomArticleType = fixture.componentInstance;
-            expect(myComponent.article.type).toEqual("TinyMceArticle");
-            expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
-            done();
-        });
-    });
-
-});
 \ No newline at end of file
@@ -1,43 +0,0 @@
-import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
-import {NoosferoArticleBlog} from "../blog/blog.component";
-
-@Component({
-    selector: 'noosfero-default-article',
-    templateUrl: 'app/components/noosfero-articles/article/article.html'
-})
-export class ArticleView {
-
-    @Input() article: any;
-    @Input() profile: any;
-
-}
-
-@Component({
-    selector: 'noosfero-article',
-    template: 'not-used',
-    directives: [ArticleView, NoosferoArticleBlog]
-})
-@Inject("$element", "$scope", "$injector", "$compile")
-export class ArticleDirective {
-
-    @Input() article: any;
-    @Input() profile: any;
-    directiveName: string;
-
-    ngOnInit() {
-        let specificDirective = 'noosfero' + this.article.type;
-        this.directiveName = "noosfero-default-article";
-        if (this.$injector.has(specificDirective + 'Directive')) {
-            this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        }
-        this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
-    }
-
-    constructor(
-        private $element: any,
-        private $scope: ng.IScope,
-        private $injector: ng.auto.IInjectorService,
-        private $compile: ng.ICompileService) {
-
-    }
-}
@@ -0,0 +1,108 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component} from 'ng-forward';
+
+import {ArticleView, ArticleDefaultView} from './article_view';
+
+// Instantiate the Builder, this part is different than ng2.
+// In ng2 you inject tcb.
+const tcb = new TestComponentBuilder();
+
+// this htmlTemplate will be re-used between the container components in this spec file 
+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
+
+
+describe("ArticleView Component", () => {
+
+    // the karma preprocessor html2js transform the templates html into js files which put
+    // the templates to the templateCache into the module templates
+    // we need to load the module templates here as the template for the 
+    // component Noosfero ArtileView will be load on our tests
+    beforeEach(angular.mock.module("templates"));
+
+    it("renders the default component when no specific component is found", (done: Function) => {
+        // Creating a container component (ArticleContainerComponent) to include 
+        // the component under test (ArticleView)  
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
+        class ArticleContainerComponent {
+            article = { type: 'anyArticleType' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        // uses the TestComponentBuilder instance to initialize the component
+        tcb.createAsync(ArticleContainerComponent).then((fixture) => {
+            // and here we can inspect and run the test assertions
+
+            // gets the children component of ArticleContainerComponent 
+            let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            // and checks if the article View rendered was the Default Article View
+            expect(articleView.constructor.prototype).toEqual(ArticleDefaultView.prototype);
+
+            // done needs to be called (it isn't really needed, as we can read in
+            // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
+            // because createAsync in ng-forward is not really async, but as the intention 
+            // here is write tests in angular 2 ways, this is recommended
+            done();
+        });
+    });
+
+    it("receives the article and profile as inputs", (done: Function) => {
+
+        // Creating a container component (ArticleContainerComponent) to include 
+        // the component under test (ArticleView)  
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
+        class ArticleContainerComponent {
+            article = { type: 'anyArticleType' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        // uses the TestComponentBuilder instance to initialize the component
+        tcb.createAsync(ArticleContainerComponent).then((fixture) => {
+            // and here we can inspect and run the test assertions 
+            let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            // assure the article object inside the ArticleView matches
+            // the provided through the parent component
+            expect(articleView.article.type).toEqual("anyArticleType");
+            expect(articleView.profile.name).toEqual("profile-name");
+
+            // done needs to be called (it isn't really needed, as we can read in
+            // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
+            // because createAsync in ng-forward is not really async, but as the intention 
+            // here is write tests in angular 2 ways, this is recommended
+            done();
+        });
+    });
+
+
+    it("renders a article view which matches to the article type", done => {
+        // NoosferoTinyMceArticle component created to check if it will be used
+        // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
+        // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
+        @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
+        class TinyMceArticleView {
+            @Input() article: any;
+            @Input() profile: any;
+        }
+
+        // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView, TinyMceArticleView] })
+        class CustomArticleType {
+            article = { type: 'TinyMceArticle' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+        tcb.createAsync(CustomArticleType).then(fixture => {
+            let myComponent: CustomArticleType = fixture.componentInstance;
+            expect(myComponent.article.type).toEqual("TinyMceArticle");
+            expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
+            done();
+        });
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,43 @@
+import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
+import {NoosferoArticleBlog} from "../blog/blog.component";
+
+@Component({
+    selector: 'noosfero-default-article',
+    templateUrl: 'app/components/noosfero-articles/article/article.html'
+})
+export class ArticleDefaultView {
+
+    @Input() article: any;
+    @Input() profile: any;
+
+}
+
+@Component({
+    selector: 'noosfero-article',
+    template: 'not-used',
+    directives: [ArticleDefaultView, NoosferoArticleBlog]
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class ArticleView {
+
+    @Input() article: any;
+    @Input() profile: any;
+    directiveName: string;
+
+    ngOnInit() {
+        let specificDirective = 'noosfero' + this.article.type;
+        this.directiveName = "noosfero-default-article";
+        if (this.$injector.has(specificDirective + 'Directive')) {
+            this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        }
+        this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
+    }
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $injector: ng.auto.IInjectorService,
+        private $compile: ng.ICompileService) {
+
+    }
+}
 import {Component, Input, Inject} from "ng-forward";
+import {Article, Profile} from "./../../../models/interfaces";
 @Component({
     selector: "noosfero-blog",
@@ -8,15 +9,15 @@ import {Component, Input, Inject} from &quot;ng-forward&quot;;
 @Inject("noosfero", "$scope")
 export class NoosferoArticleBlog {
-    @Input() article;
-    @Input() profile;
+    @Input() article: Article;
+    @Input() profile: Profile;
     private posts: any[];
     private perPage: number = 3;
     private currentPage: number;
     private totalPosts: number = 0;
-    constructor(private noosfero: any, private $scope) {
+    constructor(private noosfero: any, private $scope: ng.IScope) {
     }
     ngOnInit() {
@@ -28,8 +29,8 @@ export class NoosferoArticleBlog {
             content_type: "TinyMceArticle",
             per_page: this.perPage,
             page: this.currentPage
-        }).then((response) => {
-            this.totalPosts = response.headers("total");
+        }).then((response: restangular.IResponse) => {
+            this.totalPosts = <number>(<any>response.headers("total"));
             this.posts = response.data.articles;
         });
     }
 import { Input, Inject, Component } from 'ng-forward';
-
+import {Box} from "./../../models/interfaces";
 @Component({
     selector: "noosfero-boxes",
     templateUrl: "app/components/noosfero-boxes/boxes.html"
 })
 export class Boxes {
-    @Input() boxes: any
-    @Input() owner: any
+    @Input() boxes: any;
+    @Input() owner: any;
-    boxesOrder(box) {
-        if (box.position == 2) return 0;
+    boxesOrder(box: Box) {
+        if (box.position === 2) return 0;
         return box.position;
     }
 }
 import {Component, Inject} from "ng-forward";
+import {Profile} from "./../models/interfaces";
 @Component({
     selector: "content-viewer-actions",
     templateUrl: "app/content-viewer/navbar-actions.html",
@@ -10,8 +11,8 @@ export class ContentViewerActions {
     article: any;
     profile: any;
-    constructor(noosfero) {
-        noosfero.currentProfile.then((profile) => {
+    constructor(noosfero: any) {
+        noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
         });
     }
 import * as noosfero from "../models/interfaces";
-import {ArticleDirective, ArticleView} from "../components/noosfero-articles/article/article.directive";
+import {ArticleDefaultView, ArticleView} from "../components/noosfero-articles/article/article_view";
 import {Input, Component, StateConfig, Inject} from "ng-forward";
 import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
@@ -8,7 +8,7 @@ import {NoosferoArticleBlog} from &quot;./../components/noosfero-articles/blog/blog.c
 @Component({
     selector: "content-viewer",
     templateUrl: "app/content-viewer/page.html",
-    directives: [NoosferoArticleBlog, ArticleView, ArticleDirective]
+    directives: [NoosferoArticleBlog, ArticleView, ArticleDefaultView]
 })
 @Inject("noosfero", "$log", "$stateParams")
 export class ContentViewer {
@@ -24,11 +24,10 @@ export class ContentViewer {
     }
     activate() {
-        console.log("HERE CONTENT VIEWER");
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: noosfero.Profile) => {
             this.profile = profile;
             return this.noosfero.profiles.one(this.profile.id).one("articles").get({ path: this.$stateParams["page"] });
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.article = response.data.article;
         });
     }
 /** @ngInject */
-export function noosferoModuleConfig($logProvider, $locationProvider, RestangularProvider, $httpProvider, $provide) {
+export function noosferoModuleConfig($logProvider: ng.ILogProvider, $locationProvider: ng.ILocationProvider, RestangularProvider: restangular.IProvider, $httpProvider: ng.IHttpProvider, $provide: ng.auto.IProvideService) {
     $logProvider.debugEnabled(true);
     $locationProvider.html5Mode({ enabled: true });
     RestangularProvider.setBaseUrl("/api/v1");
     RestangularProvider.setFullResponse(true);
-    $httpProvider.defaults.headers.post = { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" };
-    $provide.decorator("$uiViewScroll", function($delegate, $document) {
-        return function(uiViewElement) {
+    (<any>$httpProvider.defaults.headers.post)["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
+
+
+    $provide.decorator("$uiViewScroll", function($delegate: any, $document: any) {
+        return function(uiViewElement: any) {
             $document.scrollToElementAnimated(uiViewElement);
         };
     });
@@ -2,14 +2,14 @@ export class NoosferoApp {
     static appName: string = "noosferoApp";
     static angularModule: any;
-    //static init(angularModule: any) {
-    //NoosferoApp.angularModule
+    // static init(angularModule: any) {
+    // NoosferoApp.angularModule
     // angular.module(NoosferoApp.appName, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
     //     "ngSanitize", "ngMessages", "ngAria", "restangular",
     //     "ui.router", "ui.bootstrap", "toastr",
     //     "angularMoment", "angular.filter", "akoenig.deckgrid",
     //     "angular-timeline", "duScroll", "oitozero.ngSweetAlert"]);
-    //}
+    // }
     static addConfig(configFunc: Function) {
         NoosferoApp.angularModule.config(configFunc);
@@ -23,6 +23,10 @@ export class NoosferoApp {
         NoosferoApp.angularModule.service(serviceName, value);
     }
+    static addFactory(factoryName: string, value: any) {
+        NoosferoApp.angularModule.factory(factoryName, value);
+    }
+
     static addController(controllerName: string, value: any) {
         NoosferoApp.angularModule.controller(controllerName, value);
     }
 /** @ngInject */
-export function routeConfig($stateProvider, $urlRouterProvider) {
+export function routeConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
     $stateProvider
         .state("main.profile.settings", {
             url: "^/myprofile/:profile"
+import {Session} from "./components/auth/session";
 /** @ngInject */
-export function noosferoAngularRunBlock($log, Restangular, Session) {
-    Restangular.addFullRequestInterceptor(function(element, operation, route, url, headers) {
+export function noosferoAngularRunBlock($log: ng.ILogService, Restangular: restangular.IService, Session: Session) {
+    Restangular.addFullRequestInterceptor((element: any, operation: string, route: string, url: string, headers: string)  => {
         if (Session.getCurrentUser()) {
-            headers["Private-Token"] = Session.getCurrentUser().private_token;
+            (<any>headers)["Private-Token"] = Session.getCurrentUser().private_token;
         }
-        return { headers: headers };
+        return <any>{ headers: <any>headers };
     });
 }
@@ -17,6 +17,7 @@ import {Main} from &quot;./main/main.component&quot;;
 import {bootstrap, bundle} from "ng-forward";
 import {AUTH_EVENTS} from "./components/auth/auth_events";
+import {AuthController} from "./components/auth/auth_controller";
 declare var moment: any;
@@ -35,8 +36,11 @@ NoosferoApp.addConstants(&quot;AUTH_EVENTS&quot;, AUTH_EVENTS);
 NoosferoApp.addConfig(noosferoModuleConfig);
 NoosferoApp.run(noosferoAngularRunBlock);
-require("./components/auth/auth.controller.js");
-require("./components/auth/auth.service.js");
+// NoosferoApp.addService("Session", Session);
+// NoosferoApp.addService("AuthService", AuthService);
+NoosferoApp.addController("AuthController", AuthController);
+
+
 require("./components/navbar/navbar.directive.js");
 require("./components/noosfero-activities/activities.component.js");
 require("./components/noosfero-activities/activity/activity.component.js");
 import {bundle, Component, StateConfig} from "ng-forward";
 import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component.ts";
-import {ArticleDirective} from "../components/noosfero-articles/article/article.directive.ts";
+import {ArticleView} from "../components/noosfero-articles/article/article_view.ts";
 import {Profile} from "../profile/profile.component";
 import {Boxes} from "../components/noosfero-boxes/boxes.component";
 import {Block} from "../components/noosfero-blocks/block.component";
+
+import {AuthService} from "./../components/auth/auth_service";
+import {Session} from "./../components/auth/session";
+
 @Component({
     selector: 'main-content',
     templateUrl: "app/main/main.html",
+    providers: [AuthService, Session]
 })
 export class MainContent {
@@ -15,8 +20,9 @@ export class MainContent {
 @Component({
     selector: 'main',
-    template: 'not-used',
-    directives: [NoosferoArticleBlog, ArticleDirective, Boxes, Block]
+    template: '<div ng-view></div>',
+    directives: [NoosferoArticleBlog, ArticleView, Boxes, Block],
+    providers: [AuthService, Session]
 })
 @StateConfig([
     {
@@ -24,7 +30,7 @@ export class MainContent {
         component: MainContent,
         name: 'main',
         resolve: {
-            currentUser: function(AuthService) {
+            currentUser: function(AuthService: AuthService) {
                 return AuthService.loginFromCookie();
             }
         }
+export interface NoosferoRootScope extends ng.IScope {
+    currentUser: User;
+}
+
 export interface Event extends Article {
     id: number;
 }
@@ -8,6 +12,7 @@ export interface Article {
 export interface Profile {
     id: number;
+    identifier: string;
 }
 export interface Person extends Profile {
@@ -32,4 +37,20 @@ export interface User {
     login: string;
     email: string;
     person: Person;
+    private_token: string;
+    userRole: string;
 }
+
+export interface UserResponse {
+    user: User;
+}
+
+
+export interface Box {
+    id: number;
+    position: number;
+}
+
+export interface INoosferoLocalStorage extends angular.storage.ILocalStorageService {
+    currentUser: User;
+}
 \ No newline at end of file
 import {StateConfig, Component, Inject} from 'ng-forward';
+import {Profile} from "./../models/interfaces";
+
 @Component({
     selector: 'profile',
     templateUrl: "app/profile-info/profile-info.html"
@@ -10,15 +12,15 @@ export class ProfileInfo {
     activities: any
     profile: any
-    constructor(private noosfero) {
+    constructor(private noosfero: any) {
         this.activate();
     }
     activate() {
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
             return this.noosfero.profiles.one(this.profile.id).one('activities').get();
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.activities = response.data.activities;
         });
     }
 import {StateConfig, Component, Inject} from 'ng-forward';
+import {Profile} from "./../models/interfaces";
+
 @Component({
     selector: 'profile-home',
     template: "<div></div>"
@@ -7,13 +9,13 @@ import {StateConfig, Component, Inject} from &#39;ng-forward&#39;;
 @Inject("noosfero", "$log", "$stateParams", "$scope", "$state")
 export class ProfileHome {
-    profile: any;
+    profile: Profile;
-    constructor(noosfero, $log, $stateParams, $scope, $state) {
-        noosfero.currentProfile.then((profile) => {
+    constructor(noosfero: any, $log: ng.ILogService, $stateParams: ng.ui.IStateParamsService, $scope: ng.IScope, $state: ng.ui.IStateService) {
+        noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
             return noosfero.profile(this.profile.id).customGET('home_page', { fields: 'path' });
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             if (response.data.article) {
                 $state.transitionTo('main.profile.page', { page: response.data.article.path, profile: this.profile.identifier }, { location: false });
             } else {
 import {StateConfig, Component, Inject} from 'ng-forward';
-import {ProfileInfo} from '../profile-info/profile-info.component'
-import {ProfileHome} from '../profile/profile-home.component'
-import {Cms} from '../cms/cms.component'
+import {ProfileInfo} from '../profile-info/profile-info.component';
+import {ProfileHome} from '../profile/profile-home.component';
+import {Cms} from '../cms/cms.component';
 import {ContentViewer} from "../content-viewer/content-viewer.component";
+import * as noosferoModels from "./../models/interfaces";
+
 @Component({
     selector: 'profile',
     templateUrl: "app/profile/profile.html"
@@ -65,15 +67,15 @@ import {ContentViewer} from &quot;../content-viewer/content-viewer.component&quot;;
 @Inject("noosfero", "$log", "$stateParams")
 export class Profile {
-    boxes: any
-    profile: any
+    boxes: noosferoModels.Box[];
+    profile: noosferoModels.Profile;
-    constructor(noosfero, $log, $stateParams) {
-        noosfero.profiles.one().get({ identifier: $stateParams.profile }).then((response) => {
+    constructor(noosfero: any, $log: ng.ILogService, $stateParams: ng.ui.IStateParamsService) {
+        noosfero.profiles.one().get({ identifier: $stateParams["profile"] }).then((response: restangular.IResponse) => {
             this.profile = response.data[0];
             noosfero.setCurrentProfile(this.profile);
             return noosfero.boxes(this.profile.id).one().get();
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.boxes = response.data.boxes;
         });
     }
@@ -0,0 +1,4 @@
+
+
+// TODO - see code generation using swagger resource declaration
+//        -> https://github.com/swagger-api/swagger-codegen
-module NgNoosferoAPI {
+namespace NgNoosferoAPI {
     export class NoosferoHttpClient {
         static $inject = ['$http', '$q'];
-        constructor(private $http, private $q) {
+        constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
         }
     }
     NgNoosferoAPI.ngModule.service(NoosferoHttpClient);
-}
-
+}
 \ No newline at end of file
-module NgNoosferoAPI {
-    
+namespace NgNoosferoAPI {
     // The following class represents the provider
     export class NoosferoHttpServiceConfigProvider implements ng.IServiceProvider {
@@ -12,19 +11,19 @@ module NgNoosferoAPI {
             contentTypeHeader: "application/json",
             textEncoding: "UTF-8"
         };
-    
- 
+
+
         // Configuration function
         public setConfig(config: NoosferoHttpServiceConfig) {
             this.config = config;
         }
- 
+
         // Provider's factory function
         public $get(): NoosferoHttpServiceConfig {
             return this.config;
         }
     }
-    
+
     ngModule.provider("NoosferoHttpServiceConfig", NoosferoHttpServiceConfigProvider);
 }
 \ No newline at end of file
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "module": "commonjs",
         "target": "es5",
-        "noImplicitAny": false,
+        "noImplicitAny": true,
         "sourceMap": true,
         "experimentalDecorators": true
     },
1	import {StateConfig, Component, Inject} from 'ng-forward';	1	import {StateConfig, Component, Inject} from 'ng-forward';
2	-	2	+import {Profile} from "./../models/interfaces";
3	@Component({	3	@Component({
4	selector: 'cms',	4	selector: 'cms',
5	templateUrl: "app/cms/cms.html"	5	templateUrl: "app/cms/cms.html"
	@@ -10,19 +10,19 @@ export class Cms {		@@ -10,19 +10,19 @@ export class Cms {
10	article: any = {};	10	article: any = {};
11	profile: any;	11	profile: any;
12		12
13	- constructor(private noosfero, private $stateParams, private $httpParamSerializer, private $state, private SweetAlert) {	13	+ constructor(private noosfero: any/* TODO convert noosferoService */, private $stateParams: ng.ui.IStateParamsService, private $httpParamSerializer: any, private $state: ng.ui.IStateService, private SweetAlert: any) {
14		14
15	}	15	}
16		16
17	save() {	17	save() {
18	- this.noosfero.currentProfile.then((profile) => {	18	+ this.noosfero.currentProfile.then((profile: Profile) => {
19	return this.noosfero.profiles.one(profile.id).customPOST(	19	return this.noosfero.profiles.one(profile.id).customPOST(
20	{ article: this.article },	20	{ article: this.article },
21	'articles',	21	'articles',
22	{},	22	{},
23	{ 'Content-Type': 'application/json' }	23	{ 'Content-Type': 'application/json' }
24	)	24	)
25	- }).then((response) => {	25	+ }).then((response: restangular.IResponse) => {
26	this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });	26	this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });
27	this.SweetAlert.swal({	27	this.SweetAlert.swal({
28	title: "Good job!",	28	title: "Good job!",
	@@ -1,17 +0,0 @@	@@ -1,17 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .controller('AuthController', AuthController);
7	-
8	-
9	- /** @ngInject */
10	- function AuthController(noosfero, $log, $stateParams, AuthService) {
11	- var vm = this;
12	- vm.credentials = {};
13	- vm.login = function() {
14	- AuthService.login(vm.credentials);
15	- }
16	- }
17	-})();
	@@ -0,0 +1,22 @@		@@ -0,0 +1,22 @@
		1	+import {Credentials} from "./../../models/interfaces";
		2	+import {AuthService} from "./auth_service";
		3	+
		4	+export class AuthController {
		5	+
		6	+ static $inject = ["noosfero", "$log", "$stateParams", "AuthService"];
		7	+
		8	+ constructor(
		9	+ private noosfero: any,
		10	+ private $log: ng.ILogService,
		11	+ private $stateParams: any,
		12	+ private AuthService: AuthService
		13	+ ) {
		14	+
		15	+ }
		16	+
		17	+ credentials: Credentials;
		18	+
		19	+ login() {
		20	+ this.AuthService.login(this.credentials);
		21	+ }
		22	+}
0	\ No newline at end of file	23	\ No newline at end of file
1	-
2	-
3	export interface IAuthEvents {	1	export interface IAuthEvents {
4	loginSuccess: string;	2	loginSuccess: string;
5	loginFailed: string;	3	loginFailed: string;
	@@ -1,5 +0,0 @@		@@ -1,5 +0,0 @@
1	-import {User} from "./../../models/interfaces";
2	-
3	-export interface NoosferoRootScope extends ng.IScope {
4	- currentUser: User;
5	-}
6	\ No newline at end of file	0	\ No newline at end of file
	@@ -1,85 +0,0 @@		@@ -1,85 +0,0 @@
1	-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
2	-import {Input, provide, Component} from 'ng-forward';
3	-
4	-import {ArticleDirective} from './article.directive';
5	-
6	-// Instantiate the Builder, this part is different than ng2.
7	-// In ng2 you inject tcb.
8	-const tcb = new TestComponentBuilder();
9	-
10	-// this htmlTemplate will be re-used between the container components in this spec file
11	-const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
12	-
13	-
14	-describe("Article Directive", () => {
15	-
16	-
17	- // the karma preprocessor html2js transform the templates html into js files which put
18	- // the templates to the templateCache into the module templates
19	- // we need to load the module templates here as the template for the
20	- // component NoosferoArtileDirective will be load on our tests
21	- beforeEach(angular.mock.module("templates"));
22	-
23	- it("receives the article and profile as inputs", done => {
24	-
25	- // Creating a container component (ArticleContainerComponent) to include
26	- // the component under test (ArticleDirective)
27	- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective] })
28	- class ArticleContainerComponent {
29	- article = { type: 'anyArticleType' };
30	- profile = { name: 'profile-name' };
31	- constructor() {
32	- }
33	- }
34	-
35	- // uses the TestComponentBuilder instance to initialize the component
36	- tcb.createAsync(ArticleContainerComponent).then((fixture) => {
37	- // and here we can inspect and run the test assertions
38	- let myComponent: ArticleContainerComponent = fixture.componentInstance;
39	-
40	- console.log(myComponent);
41	-
42	- // assure the article object inside the ArticleDirective matches
43	- // the provided through the parent component
44	- expect(myComponent.article.type).toEqual("anyArticleType");
45	- expect(myComponent.profile.name).toEqual("profile-name");
46	-
47	- myComponent.metodoAsync(() => {
48	- done();
49	- });
50	- // done needs to be called (it isn't really needed, as we can read in
51	- // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
52	- // because createAsync in ng-forward is not really async, but as the intention
53	- // here is write tests in angular 2 ways, this is recommended
54	- done();
55	- });
56	- });
57	-
58	-
59	- it("renders a directive which matches to the article type", done => {
60	- // NoosferoTinyMceArticle component created to check if it will be used
61	- // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleDirective)
62	- // * Important * - the selector is what ng-forward uses to define the name of the directive provider
63	- @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
64	- class NoosferoTinyMceArticle {
65	- @Input() article: any;
66	- @Input() profile: any;
67	- }
68	-
69	- // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
70	- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective, NoosferoTinyMceArticle] })
71	- class CustomArticleType {
72	- article = { type: 'TinyMceArticle' };
73	- profile = { name: 'profile-name' };
74	- constructor() {
75	- }
76	- }
77	- tcb.createAsync(CustomArticleType).then(fixture => {
78	- let myComponent: CustomArticleType = fixture.componentInstance;
79	- expect(myComponent.article.type).toEqual("TinyMceArticle");
80	- expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
81	- done();
82	- });
83	- });
84	-
85	-});
86	\ No newline at end of file	0	\ No newline at end of file
	@@ -1,43 +0,0 @@	@@ -1,43 +0,0 @@
1	-import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
2	-import {NoosferoArticleBlog} from "../blog/blog.component";
3	-
4	-@Component({
5	- selector: 'noosfero-default-article',
6	- templateUrl: 'app/components/noosfero-articles/article/article.html'
7	-})
8	-export class ArticleView {
9	-
10	- @Input() article: any;
11	- @Input() profile: any;
12	-
13	-}
14	-
15	-@Component({
16	- selector: 'noosfero-article',
17	- template: 'not-used',
18	- directives: [ArticleView, NoosferoArticleBlog]
19	-})
20	-@Inject("$element", "$scope", "$injector", "$compile")
21	-export class ArticleDirective {
22	-
23	- @Input() article: any;
24	- @Input() profile: any;
25	- directiveName: string;
26	-
27	- ngOnInit() {
28	- let specificDirective = 'noosfero' + this.article.type;
29	- this.directiveName = "noosfero-default-article";
30	- if (this.$injector.has(specificDirective + 'Directive')) {
31	- this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
32	- }
33	- this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
34	- }
35	-
36	- constructor(
37	- private $element: any,
38	- private $scope: ng.IScope,
39	- private $injector: ng.auto.IInjectorService,
40	- private $compile: ng.ICompileService) {
41	-
42	- }
43	-}
	@@ -0,0 +1,108 @@		@@ -0,0 +1,108 @@
		1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
		2	+import {Input, provide, Component} from 'ng-forward';
		3	+
		4	+import {ArticleView, ArticleDefaultView} from './article_view';
		5	+
		6	+// Instantiate the Builder, this part is different than ng2.
		7	+// In ng2 you inject tcb.
		8	+const tcb = new TestComponentBuilder();
		9	+
		10	+// this htmlTemplate will be re-used between the container components in this spec file
		11	+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
		12	+
		13	+
		14	+describe("ArticleView Component", () => {
		15	+
		16	+ // the karma preprocessor html2js transform the templates html into js files which put
		17	+ // the templates to the templateCache into the module templates
		18	+ // we need to load the module templates here as the template for the
		19	+ // component Noosfero ArtileView will be load on our tests
		20	+ beforeEach(angular.mock.module("templates"));
		21	+
		22	+ it("renders the default component when no specific component is found", (done: Function) => {
		23	+ // Creating a container component (ArticleContainerComponent) to include
		24	+ // the component under test (ArticleView)
		25	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
		26	+ class ArticleContainerComponent {
		27	+ article = { type: 'anyArticleType' };
		28	+ profile = { name: 'profile-name' };
		29	+ constructor() {
		30	+ }
		31	+ }
		32	+
		33	+ // uses the TestComponentBuilder instance to initialize the component
		34	+ tcb.createAsync(ArticleContainerComponent).then((fixture) => {
		35	+ // and here we can inspect and run the test assertions
		36	+
		37	+ // gets the children component of ArticleContainerComponent
		38	+ let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
		39	+
		40	+ // and checks if the article View rendered was the Default Article View
		41	+ expect(articleView.constructor.prototype).toEqual(ArticleDefaultView.prototype);
		42	+
		43	+ // done needs to be called (it isn't really needed, as we can read in
		44	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
		45	+ // because createAsync in ng-forward is not really async, but as the intention
		46	+ // here is write tests in angular 2 ways, this is recommended
		47	+ done();
		48	+ });
		49	+ });
		50	+
		51	+ it("receives the article and profile as inputs", (done: Function) => {
		52	+
		53	+ // Creating a container component (ArticleContainerComponent) to include
		54	+ // the component under test (ArticleView)
		55	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
		56	+ class ArticleContainerComponent {
		57	+ article = { type: 'anyArticleType' };
		58	+ profile = { name: 'profile-name' };
		59	+ constructor() {
		60	+ }
		61	+ }
		62	+
		63	+ // uses the TestComponentBuilder instance to initialize the component
		64	+ tcb.createAsync(ArticleContainerComponent).then((fixture) => {
		65	+ // and here we can inspect and run the test assertions
		66	+ let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
		67	+
		68	+ // assure the article object inside the ArticleView matches
		69	+ // the provided through the parent component
		70	+ expect(articleView.article.type).toEqual("anyArticleType");
		71	+ expect(articleView.profile.name).toEqual("profile-name");
		72	+
		73	+ // done needs to be called (it isn't really needed, as we can read in
		74	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
		75	+ // because createAsync in ng-forward is not really async, but as the intention
		76	+ // here is write tests in angular 2 ways, this is recommended
		77	+ done();
		78	+ });
		79	+ });
		80	+
		81	+
		82	+ it("renders a article view which matches to the article type", done => {
		83	+ // NoosferoTinyMceArticle component created to check if it will be used
		84	+ // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
		85	+ // * Important * - the selector is what ng-forward uses to define the name of the directive provider
		86	+ @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
		87	+ class TinyMceArticleView {
		88	+ @Input() article: any;
		89	+ @Input() profile: any;
		90	+ }
		91	+
		92	+ // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
		93	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView, TinyMceArticleView] })
		94	+ class CustomArticleType {
		95	+ article = { type: 'TinyMceArticle' };
		96	+ profile = { name: 'profile-name' };
		97	+ constructor() {
		98	+ }
		99	+ }
		100	+ tcb.createAsync(CustomArticleType).then(fixture => {
		101	+ let myComponent: CustomArticleType = fixture.componentInstance;
		102	+ expect(myComponent.article.type).toEqual("TinyMceArticle");
		103	+ expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
		104	+ done();
		105	+ });
		106	+ });
		107	+
		108	+});
0	\ No newline at end of file	109	\ No newline at end of file
@@ -0,0 +1,43 @@		@@ -0,0 +1,43 @@
	1	+import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
	2	+import {NoosferoArticleBlog} from "../blog/blog.component";
	3	+
	4	+@Component({
	5	+ selector: 'noosfero-default-article',
	6	+ templateUrl: 'app/components/noosfero-articles/article/article.html'
	7	+})
	8	+export class ArticleDefaultView {
	9	+
	10	+ @Input() article: any;
	11	+ @Input() profile: any;
	12	+
	13	+}
	14	+
	15	+@Component({
	16	+ selector: 'noosfero-article',
	17	+ template: 'not-used',
	18	+ directives: [ArticleDefaultView, NoosferoArticleBlog]
	19	+})
	20	+@Inject("$element", "$scope", "$injector", "$compile")
	21	+export class ArticleView {
	22	+
	23	+ @Input() article: any;
	24	+ @Input() profile: any;
	25	+ directiveName: string;
	26	+
	27	+ ngOnInit() {
	28	+ let specificDirective = 'noosfero' + this.article.type;
	29	+ this.directiveName = "noosfero-default-article";
	30	+ if (this.$injector.has(specificDirective + 'Directive')) {
	31	+ this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	32	+ }
	33	+ this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
	34	+ }
	35	+
	36	+ constructor(
	37	+ private $element: any,
	38	+ private $scope: ng.IScope,
	39	+ private $injector: ng.auto.IInjectorService,
	40	+ private $compile: ng.ICompileService) {
	41	+
	42	+ }
	43	+}
1		1
2		2
3	/** @ngInject */	3	/** @ngInject */
4	-export function routeConfig($stateProvider, $urlRouterProvider) {	4	+export function routeConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
5	$stateProvider	5	$stateProvider
6	.state("main.profile.settings", {	6	.state("main.profile.settings", {
7	url: "^/myprofile/:profile"	7	url: "^/myprofile/:profile"