普通Javascript中的Angular 2路由（无打字稿）

Question

所以我一直在努力使路由器在Angular2中工作而不使用Typescript。 我似乎找不到任何示例，除了一些使用装饰器函数的打字稿编译的javascript。 可以将Angular 2 Router与纯Javascript一起使用吗？

Answer 1

另一个受Angular2“英雄之旅”教程启发的示例（您可以在此处找到纯JavaScript的完整教程： https ://programming.sereale.fr/2016/03/22/rails-and-angular2-react-the- 英雄之旅/ ）：

//= 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编写的示例（请参阅此示例）：

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 装饰器是ES2016 （以前为ES7）的一部分。 它们是javascript并受Babel支持。 我认为您不应该害怕使用它们。

Answer 3

我也一直在寻找有关以纯JavaScript部署Angular 2的资源。 我找到了这篇文章，这是我启动和运行它所需要的一切。 不知道作者是谁，但是它写得很清楚。

其他示例显示了打字稿的使用，这在我们的企业环境中是不允许的。 （IDK为什么，我觉得它真的很有用。）幸运的是，有一种方法可以仅使用Javascript来完成（博客作者的小插曲举例说明了此示例。）：

1. 在项目的引导过程中，包括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（...）：如果您不想在服务器端处理页面重新加载逻辑，此行非常重要。 （如果没有它或未配置托管服务器，则浏览器将请求一个页面，该页面由于单页面应用程序路由而仅存在于客户端。）
   

2. 配置路由器以向您的应用程序公开路由，以及将处理每个路由的组件。

    (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：配置为另一个示例组件。

3. 更新主页上将处理路由的链接：

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

   routerLink：将目标路由通过其名称绑定到链接标记。
   路由器出口：路由器的占位符，在用户浏览应用程序时包括组件的不同视图。

4. 确保将ng.router.ROUTER_DIRECTIVES包含在Main组件的指令中，以便Angular可以识别模板中的指令。

5. 创建用于路由的组件：

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

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

再次感谢此博客的作者以及他花了很多时间创建了这个插件