纯Javascript中的Angular 2路由（无Typescript）

所以我一直在努力让路由器在Angular2中工作，而不使用Typescript。除了一些使用decorator函数的typescript编译的javascript之外，我似乎找不到任何例子。是否可以将Angular 2路由器与普通Javascript一起使用？

您可以使用方法指定路由列表。下面是一个纯用ES5编写的示例（请参阅）：

var-App=组件({
选择器：“我的应用程序”，
指令：[RouterOutlet，RouterLink]，
模板：(
“你好，世界！！！”+
“
”+
“
是
ES2016
（以前的ES7）的一部分。它们是javascript，受支持。我认为您不应该害怕使用它们。
另一个受Angular2“英雄之旅”教程启发的示例（您可以在此处找到纯javascript的完整教程：）：

/=需要指令/仪表板组件
//=需要指令/组件
//=需要指令/英雄细节组件
//=需要服务/英雄服务
var MyApp=ng.core.Component({
选择器：“我的应用程序”，
指令：[ng.router.router\u指令]，
providers:[ng.router.router\u providers，ng.http.http\u providers，HeroService]，//ng.http.http\u providers允许使用http并从服务器获取列表
模板：“{{title}”\
\
英雄\
仪表板\
\
"
}).类({
构造函数：[ng.router.router，函数（router）{
router.config([
{路径：'/dashboard'，名称：'dashboard'，组件：DashboardComponent，useAsDefault:true}，
{路径：'/heroes list'，名称：'heroes'，组件：HeroesComponent}，
{path:'/detail/：id'，name:'HeroDetail'，component:HeroDetailComponent}
]);
this.title=‘英雄之旅’；
}]
});
我也在寻找有关Angular 2在普通JavaScript中部署的资源。我找到了这篇文章，它是我启动和运行所需的一切。我不确定作者是谁，但它写得非常好且清晰

其他示例显示了typescript的使用，这在我们的企业环境中是不允许的。（IDK why，我发现它真的很有用。）幸运的是，有一种方法可以只用Javascript来实现（博客作者的示例说明了此示例）：

在项目的引导过程中，包括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:角度2库

app.Main:应用程序的主要组件

ng.router.router\u绑定：包括使用路由器的所有依赖项。

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>

//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 () {}
  });

});


您的单页应用程序现在应该能够仅使用JavaScript处理路由和页面重新加载

再次感谢博客的作者和他花时间创建这个
，虽然这可以从理论上回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。其他答案要么使用TypeScript，要么不处理页面重新加载。（如果没有HashLocation和/或服务器配置，重新加载页面时路由将中断。）我对发布答案还是新手，请让我知道上述内容是否更适合社区。我在2.0.0-beta.17中工作过。谢谢！我遇到了这个错误：无法读取未定义的属性“ROUTER_指令”。如何要求/导入纯javascript中的ng.ROUTER模块？（不使用require（）/import语句？）呃..那个plunk是用打字机写的？
//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 () {}
  });

});