在 Asp Mvc 中使用 Angular 2 组件

Question

我有一个使用 Angular 1.4 作为前端的 Asp Mvc 项目。我的项目不是单页应用程序，我也不希望它是。我最近学习了 anguar2，我想把它整合到我的项目中，而不是强迫整个项目成为一个 SPA。

我在互联网上查看了如何将 angular2 与 Asp Mvc 项目一起使用，而无需将整个项目转换为 SPA，但没有运气。 帮助将不胜感激。

Answer 1

我也一直在看这个。

根据我目前的理解，对于 Angular 2，我们将使用所谓的“长格式引导程序”。

本质上，这意味着可以在页面中引导多个 Angular 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 方式在这种特殊情况下非常方便。

尽管如此，Angular 2 也可以完美实现。