Verwenden Sie angular 2 Komponente in Asp Mvc

Question

Ich habe ein Asp Mvc-Projekt, das Winkel 1.4 für das Front-End verwendet. Mein Projekt ist keine einzelne Seite und ich will es auch nicht. Ich habe kürzlich anguar2 gelernt und ich wollte es in mein Projekt integrieren. Aber im Gegensatz zu Angular 2 kann ich Angular1 verwenden, ohne mein gesamtes Projekt zu einer Einzelseiten-App zu machen. Aber angular 2 erlaubt mir das nicht. Ich möchte nur Angular2 in bestimmten Teilen meiner asp mvc Ansichten verwenden, genauso wie ich angle1 benutze, ohne meine Asp Mvc Anwendung in einem SPA zu machen.

Ich habe über das Internet nachgesehen, wie man angular2 mit Asp Mvc Projekt verwendet, ohne das ganze Projekt in SPA umzuwandeln, aber kein Glück. Hilfe wäre willkommen.

Answer 1

Ich habe mir das auch angesehen.

Aus meinem derzeitigen Verständnis, mit Angular 2 würden wir den sogenannten "Long Form Bootstrap" verwenden.

Im Wesentlichen bedeutet dies, dass man mehrere Angular 2-Komponenten auf der Seite bootstrappen würde.

<my-app></my-app> 


<div style="margin: 40px"> 
    Some server generated content. 
</div> 

<my-greeting></my-greeting> 

Dies ist ein Beispiel für das Ausführen eines langen Bootstrap-Vorgangs.

Dies ist Teil meiner persönlichen Experimente, es ist nicht produktionsreifen Code.

sollte eine Idee, wie dies ohnehin zu erreichen.

import {Component, createPlatform, coreBootstrap, coreLoadAndBootstrap, ReflectiveInjector, ApplicationRef} from 'angular2/core'; 
import {BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS, browserPlatform} from 'angular2/platform/browser'; 
import {provide, enableProdMode} from "angular2/core"; 
import {bootstrap} from 'angular2/platform/browser'; 
import {HTTP_PROVIDERS} from "angular2/http"; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/platform/common'; 
import {provideStore, usePostMiddleware, usePreMiddleware, Middleware} from "@ngrx/store"; 
import 'rxjs/add/operator/do'; 
import {store} from "./common/store"; 
import {AppComponent} from './app.component' 
import {DialogService} from './dialog.service'; 
import {GreetingComponent} from './greeting-component'; 


const actionLog: Middleware = (action: any) => { 
    return action.do((val: any) => { 
     console.warn("DISPATCHED ACTION: ", val); 
    }); 
}; 
const stateLog: Middleware = (state: any) => { 
    return state.do((val: any) => { 
     console.info("NEW STATE: ", val); 
    }); 
}; 


//var platform = browserPlatform(); 
var platform = createPlatform(ReflectiveInjector.resolveAndCreate(BROWSER_PROVIDERS)); 


var appProviders: any[] = [ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    provide(APP_BASE_HREF, {useValue: "/"}), 
    provideStore(store), 
    usePreMiddleware(actionLog), 
    usePostMiddleware(stateLog), 
    provide(LocationStrategy, { useClass: HashLocationStrategy }), 
    DialogService 
]; 
var appInjector = ReflectiveInjector.resolveAndCreate([BROWSER_APP_PROVIDERS, appProviders], platform.injector); 
var _appComponent = coreLoadAndBootstrap(appInjector, AppComponent); 


var greetingProviders: any[] = []; 
var greetingInjector = ReflectiveInjector.resolveAndCreate([BROWSER_APP_PROVIDERS, greetingProviders], platform.injector); 
var _greetingComponent = coreLoadAndBootstrap(greetingInjector, GreetingComponent); 

// 

Der AngularJS 1.x Weg war in dieser besonderen Situation ziemlich bequem.

Dennoch ist es mit Angular 2 auch perfekt erreichbar.