Angular 2 Routing in Simple Javascript (No Typescript)

Question

So, I struggled for the router to work in Angular2 without using Typescript. I can't seem to find any examples besides some typescript compiled javascript that uses a decorator function. Is it possible to use Angular 2 Router with plain Javascript?

Answer 1

Another example inspired by the Angular2 tutorial Traveling Heroes (you can find the full tutorial in simple javascript here: https://programming.sereale.fr/2016/03/22/rails-and-angular2-react-the-tour -of-heroes / ):

//= require directives/dashboard-component
//= require directives/heroes-component
//= require directives/hero-detail-component
//= require services/heroes-service

var MyApp = ng.core.Component({
    selector: 'my-app',
    directives: [ng.router.ROUTER_DIRECTIVES],
    providers: [ng.router.ROUTER_PROVIDERS, ng.http.HTTP_PROVIDERS, HeroService], // ng.http.HTTP_PROVIDERS enables to use http and get the list from the server
    template: "<h1>{{title}}</h1> \
                <nav> \
                  <a [routerLink]=\"['Heroes']\">Heroes</a> \
                  <a [routerLink]=\"['Dashboard']\">Dashboard</a> \
                </nav> \
                <router-outlet></router-outlet>"
}).Class({
    constructor: [ ng.router.Router, function(router) {
            router.config([
                { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
                { path: '/heroes-list', name: 'Heroes', component: HeroesComponent },                
                { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent }
            ]);

            this.title = 'Tour of Heroes';
    }]
});

Answer 2

router.config() , . , ES5 (. plunk):

var App = Component({
  selector: 'my-app',
  directives: [RouterOutlet, RouterLink],
  template: (
    '<h2>Hello, World!!!</h2>' +
    '<ul>' +
      '<li><a [router-link]="[\'./Index\']">Index Page</a></li>' +
      '<li><a [router-link]="[\'./Home\']">Home Page</a></li>' +
    '</ul>' +
    '<router-outlet></router-outlet>'
  )
})
.Class({
  constructor: function(router) {
    router.config([
      { path: '/index': component: Index, name: 'Index' },
      { path: '/home':  component: Home,  name: 'Home'  }
    ])
  }
});

App.parameters = [Router];

PS Decorators ES2016 ( ES7). javascript Babel. , .

Answer 3

Angular 2 JavaScript. , , . , , .

typescript, Enterprise-. (IDK, , , .) , Javascript ( plunk .):

• Angular ng.router.

  /*global app*/
  'use strict';
  
  (function (ng, app) {
    document.addEventListener('DOMContentLoaded', function () {
      ng.platform.browser.bootstrap(app.Main , [
        ng.router.ROUTER_BINDINGS,
        ng.core.bind(ng.router.LocationStrategy).toClass(ng.router.HashLocationStrategy)
      ]);
   });
  })(this.ng, this.app);
  

  ng: Angular 2
  app.Main:
  ng.router.ROUTER_BINDINGS: .
  ng.core.bind(...): , . ( , - .)
  

• , .

  (function (ng, app) {
  
  ng.router.RouteConfig([
      { path: '/home', component: app.HomeComponent, as: 'Home', useAsDefault: true},
      { path: '/test', component: app.TestComponent, as: 'Test'}
  ])(app.Main);
  
  })(window.ng, window.app);
  

  app.HomeComponent: , .
  app.TestComponent: .

• , :

  <ul>
    <li>
      <a [routerLink]="['Home']">Home</a>
    </li>
    <li>
      <a [routerLink]="['Test']">Test</a>
    </li>
  </ul>
  <router-outlet></router-outlet>
  

  routerLink: .
  -:. , .

• , ng.router.ROUTER_DIRECTIVES , Angular .

• :

  //home.component.js
  app.register ('HomeComponent', function (ng) {
    return ng.core.
  
    Component({
      template: '
  <div>Hello {{name}}!</div>
  ',
    }).
    Class({
      constructor:function () {
        this.name ='world';
      }
    });
  
  });
  
  //test.component.js
  app.register ('TestComponent', function (ng) {
    return ng.core.
  
    Component({
      template: 'This is a testing page'
    }).
    Class({
      constructor: function () {}
    });
  
  });
  

• Your one-page application should now be able to handle both redirects and page reloads using only JavaScript.

Thanks again to the author of this blog and the time he spent on creating this plump