角度2を使用するAsp Mvcのコンポーネント

Question

フロントエンドに角度1.4を使用するAsp Mvcプロジェクトがあります。私のプロジェクトは単一のページアプリケーションではなく、私はそれが欲しくない。私は最近anguar2を学びました。私はそれを私のプロジェクトに組み込みたいと思っていました。しかしAngular1とは異なり、Angular1はプロジェクト全体を単一のページアプリにする必要はありません。しかし、角度2ではそうすることができません。私はちょうど私がSPAに自分のASP Mvcアプリケーションを作成せずにangular1を使用するように私のASP MVCビューの特定の部分でAngular2を使用したい。

Ang2をAsp Mvcプロジェクトで使用する方法をインターネットで調べましたが、プロジェクト全体をSPAに変えずに運行することはできませんでした。 ヘルプをいただければ幸いです。

Answer 1

私もこれを見てきました。

私の現在の理解から、角度2では、いわゆる "ロングフォームのブートストラップ"を使用します。

本質的には、ページ内に複数の角度2のコンポーネントをブートストラップすることを意味します。

<my-app></my-app> 


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

<my-greeting></my-greeting> 

これはロングフォームのブートストラップの例です。

これは私の個人的な実験の一部です。実稼動準備ができていません。

とにかくこれを達成する方法のアイデアを提供する必要があります。

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); 

// 

AngularJS 1.xの方法は、この特定の状況ではかなり便利でした。

それにもかかわらず、角度2でも完全に達成可能です。