CODEWITHSUNDEEP
javascriptangular
Pankaj Badukale
Pankaj Badukale

Reputation: 2046

angular 2 es5 component route

I am trying to implement Angular 2 routing using ES5.

Following is appComponent

(function(app) {
  app.AppComponent =function() {};
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app'
    }).
    View({
        templateUrl: 'app.html',
        directives: [ng.router.ROUTER_DIRECTIVES]
    })
    .Class({
      constructor: function() {
          this.name = "pankaj Badukale";
      }
    });

    **ng.router.RouteConfig([
        {
            path: "login",
            component: app.LoginComponent,
            as: "login"
        }
    ]);**

})(window.app || (window.app = {}));

app.html

<h1>
    {{name}}  
    <a [routerLink]="['/login']">Home</a>
    <router-outlet></router-outlet>
</h1>

I want to know how we can config routing on component.

I have searched lot but people just defined up to view, component, class.

Do anyone have idea?

Upvotes: 3

Views: 596

Answers (1)

rykhan
rykhan

Reputation: 309

Component and RouteConfig both are decorators, you can write decorators in angular 2(beta) like 

app.AppComponent = ng.core.Component(...)(app.AppComponent);
app.AppComponent = ng.router.RouteConfig(...)(app.AppComponent);


here is your working copy... 

(function(app) {
  app.AppComponent =function() {};
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app'
    }).
    View({
        templateUrl: 'app.html',
        directives: [ng.router.ROUTER_DIRECTIVES]
    })
    .Class({
      constructor: function() {
          this.name = "pankaj Badukale";
      }
    });

    app.AppComponent = ng.router.RouteConfig([
        {
            path: "login",
            component: app.LoginComponent,
            as: "login"
        }
    ])(app.AppComponent);

})(window.app || (window.app = {}));

Upvotes: 1

Related Questions