普通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就能夠處理路由和頁面重新加載。

再次感謝此博客的作者以及他花了很多時間創建了這個插件