Mam projekt ASP.NET 4 Web Forms napisane w języku C#. Chciałbym dodać Angular 2. Widziałem wiele przykładów w Internecie przy użyciu ASP.NET 5, ale nie wiem, jak to zrobić w moim projekcie.Jak mogę użyć Angular 2 w projekcie .NET 4 Web Forms?
Odpowiedz
Zetknąłem się z podobnym wymogiem i zrobiłem trochę POC na tym i zdecydowanie posuwałem się naprzód z tym. Pracowałem na każdej stronie .aspx jako samodzielnej aplikacji kątowej 2 SPA. Oznacza to, że każda strona aspx będzie miała swój własny plik App.Component.ts i main.ts (nazwa pliku na podstawie dokumentacji Angular 2). plik main.ts zawiera kod do załadowania aplikacji (przykładowy kod poniżej), więc będzie plik main.ts dla każdej strony .aspx.
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));
będzie jeden app.component.ts (nazwał go home.component.ts dla mojego home.aspx) plik dla każdej strony aspx. Teraz w pliku konfiguracyjnym, który zawiera dane Sytem.config zdefiniowałem nowa mapa i pakiet wpis dla mojego home.aspx jak pokazano poniżej:
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' }
}
});
I wreszcie przeniosłem kod System.import część strony .aspx (kod poniżej). Każda strona zaimportuje swój własny pakiet zdefiniowany w sytem.config.
<script>
System
.import('home/main-home')
.catch(console.error.bind(console));
</script>
tutaj nazwałem moje main.ts jako głównego home.ts.
Mam nadzieję, że to pomoże Tobie i innym. Również jestem otwarty na sugestie i recenzję/alternatywne rozwiązanie tego podejścia.
Dla porównania proszę zobaczyć: bootstrapping-multiple-angular-2-applications-on-the-same-page
Mam do czynienia z tym problemem i nie idę naprzód, czy jest możliwość załadowania podstawowych części twojego kodu? Może w Github .. – Franki1986
@ Franki1986 Proszę sprawdzić moją odpowiedź poniżej. Głównie to pomoże. –
zmienić trasę podstawową index.html do swojej strony internetowej
<base href="/YourWebPageRoute">
obejmują stronę wewnątrz formularza internetowego
<% Response.WriteFile("index.html"); %>
I całkowicie zgadzam się z @ pawan-tych Odpowiedź brzmi: tak, tak, ale znalazłem fajne rozwiązanie tego. To rozwiązanie zdecydowanie mi pomogło i mam nadzieję, że to też pomoże wam wszystkim.
Nie trzeba tworzyć plików main.ts i AppComponent.ts dla każdej strony.
Musimy uczynić nasz główny komponent, który dynamicznie ładujemy. W naszym przypadku, w app.component.ts, dynamicznie ładuję nasz komponent na podstawie adresu URL bieżącej strony.
Powiedzmy, że jeśli twoja strona to home.aspx, wówczas doładowujesz HomeComponent lub about.aspx, a następnie boostrap AboutComponent Robię to poprzez implementację metody ngDoBootstrap w następujący sposób.
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);
}
}
}
ten sposób na podstawie adresu URL strony, możemy dynamicznie bootstrap nasz komponent i zapisywanie plików Wiele main.ts i app.component.ts dla każdej strony.
Do tego trzeba dodać wpis dla każdego składnika w entryComponents tablicy NgModule jak poniżej:
@NgModule({
entryComponents : [
HomeComponent,
AboutComponent,
]
})
nadzieję, że to pomaga.
- 1. Angular 2 Reactive Forms vs Formy szablonów
- 2. Jak załadować obraz (i inne zasoby) w projekcie Angular 2?
- 3. Jak migrować Angular 2 RC 1 (lub wcześniejsze) Formularze do Angular 2 RC 2/RC 4 Nowe formularze
- 4. Jak mogę użyć zewnętrznego słoja w projekcie Android w NetBeans?
- 5. Konwertowanie .NET 4 Gwintowanie do .NET 2
- 6. Korzystanie z DataAnnotations w projekcie Windows Forms
- 7. Wtyczka walidacji jQuery w ASP.NET Web Forms
- 8. Formularze w Angular 2 RC4
- 9. Jak ponownie użyć kompilacji dla projektu Angular
- 10. Jak mogę współużytkować komponent Angular 2 między wieloma projektami Angular 2?
- 11. Jak używać ramki Angular 2 (lub 4) z CDN
- 12. Czy mogę użyć angular/di.js z projektem AngulrJS 1.3.0?
- 13. Jak zaimportować mapbox-gl-draw do Angular 2/4?
- 14. Czy możesz użyć biblioteki .NET 4.0 w projekcie 3.5?
- 15. Czy można użyć rury w kodzie w Angular 2?
- 16. Jak dodać zajęcia do Laravel 4 Forms
- 17. Jak odczytać plik tekstowy w projekcie PCL Xamarin Forms?
- 18. .NET 4 Web API odbiera dane NULL w parametrach
- 19. Waluta w Angular 2
- 20. Użyj Angular 2 with Electron (Angular CLI)
- 21. Błąd Angular 4 w IE11
- 22. Jak mogę używać Angular 2 w aplikacji PHP?
- 23. Jak mogę wywołać metodę klasy wewnątrz obietnicy w Angular 2?
- 24. Jak ustawić tryb wyłączania aplikacji w projekcie C# Windows Forms?
- 25. Angular 2 - Lista wydarzeń
- 26. Jak mogę użyć innego języka .net (F #) dla asp.net vnext
- 27. Jak pogrupować dane w Angular 2?
- 28. Dodaj ASP.NET MVC obszar do ASP.NET Web Forms istniejącego projektu
- 29. Angular 2. Jak zastosować orderBy?
- 30. Angular 4 - materiał 2 - md datepicker ustawić pierwszy dzień tygodnia
Osobiście? Polecam przeciw temu. Angular 2 jest po stronie klienta, jak tylko możesz. Połączenie z WebForms brzmi jak długie i bolesne doświadczenie. –
kiedykolwiek coś z tym wyjdzie? Jestem w tej samej łodzi – Matt