如何在.NET 4 Web Forms項目中使用Angular 2？

我有用C＃編寫的ASP.NET 4 Web Forms項目。我想添加Angular 2.我在網上看到很多使用ASP.NET 5的例子，但我無法弄清楚如何在我的項目中執行它。如何在.NET 4 Web Forms項目中使用Angular 2？

來源

2016-02-12 BorisD

個人？我建議反對它。 Angular 2就像您可以獲得的客戶端一樣。與WebForms耦合聽起來像一個漫長而痛苦的經歷。 –

有沒有想過這件事？我實際上在同一條船上 – Matt

已經面臨類似的要求，並做了一些POC這一點，並肯定會繼續與它。我作爲獨立的角度2 SPA應用程序與每個.aspx頁面一起工作。這意味着每個aspx頁面都有自己的App.Component.ts和main.ts文件（基於Angular 2文檔的文件名）。 main.ts文件包含引導應用程序的代碼（下面的示例代碼），因此每個.aspx頁面都會有一個main.ts文件。

import {bootstrap} from 'angular2/platform/browser'; 
 
import {HTTP_BINDINGS} from 'angular2/http'; 
 

 
import {HomeComponent} from './home.component'; 
 

 
bootstrap(HomeComponent, [HTTP_BINDINGS]) 
 
    .catch(err => console.error(err));

會有一個app.component.ts（將其命名爲home.component.ts我home.aspx）文件爲每個aspx頁面。現在包含Sytem.config細節我定義爲我的home.aspx新地圖和包項的配置文件，如下圖所示：

System.config({ 
 
    transpiler: 'typescript', 
 
    typescriptOptions: { 
 
     emitDecoratorMetadata: true, 
 
     experimentalDecorators: true 
 
    }, 
 
    map: { 
 
     app: '../../Javascript/angular/app', 
 
     home: '../../Javascript/angular/home' 
 
    }, 
 
    packages: { 
 
     app: { main: './main.ts', defaultExtension: 'ts'}, 
 
     home: { defaultExtension: 'ts' } 
 
    } 
 
});

最後我感動的System.import碼部分到.aspx頁面（下面的代碼）。每個頁面都將導入自己在sytem.config中定義的包。

<script> 
 
      System 
 
      .import('home/main-home') 
 
      .catch(console.error.bind(console)); 
 
    </script>

在這裏，我有一個名爲我的main.ts作爲主home.ts。

希望這可以幫助你和其他人。此外，我對這種方法的建議和評論/替代解決方案持開放態度。

僅供參考，請參閱：bootstrapping-multiple-angular-2-applications-on-the-same-page

來源

2016-06-12 07:58:13 pawan

我面臨這個問題，並沒有前進，有沒有可以上傳你的代碼的基礎部分？也許在Github .. – Franki1986

@ Franki1986請查看我的答案。大部分這將有所幫助。 –

改變您的index.html基本路線到您的網頁

<base href="/YourWebPageRoute">

包括Web窗體

<% Response.WriteFile("index.html"); %>

來源

2016-10-03 15:27:51

我完全@帕萬的同意內頁回答，但是@pawan我找到了一個很好的解決方案。這個解決方案無疑幫助了我，並希望它能幫助你們所有人。

我們不需要爲每個頁面創建main.ts和AppComponent.ts。

我們需要使我們的主要組件是我們的引導動態。在我們的例子中，在app.component.ts中，我基於當前頁面的url動態地引導組件。

假設你的頁面是home.aspx，然後boostrap HomeComponent或about.aspx然後boostrap AboutComponent 我正在通過執行ngDoBootstrap方法來做到這一點，如下所示。

export class AppModule { 
    url : string; 
    constructor(@Inject(DOCUMENT) private document: any){ 
     this.url = this.document.location.href.toLowerCase(); 
    } 
    ngDoBootstrap(app:ApplicationRef){ 
     if(this.url.indexOf("home.aspx") > 0){ 
      app.bootstrap(HomeComponent); 
     } 
     else if(this.url.indexOf("about.aspx") > 0){ 
      app.bootstrap(AboutComponent); 
     } 
    } 
}

這是怎麼了基於網頁的網址，就可以動態地引導我們的組件，節省main.ts和app.component.ts的很多文件每一頁。

對於這一點，你需要爲每個組件添加進入NgModule的entryComponents排列如下：

@NgModule({ 
    entryComponents : [ 
     HomeComponent, 
     AboutComponent, 
    ] 
})

希望這有助於。

來源

2017-08-16 06:50:44

如何在.NET 4 Web Forms項目中使用Angular 2？

回答

相關問題