Question

我有一个Asp Mvc项目，前端使用角度1.4。我的项目不是单页应用程序，也不是我不希望它。我最近学会了anguar2，我想把它融入我的项目中。但与angular 2不同，我可以使用Angular1而不强迫我的整个项目成为单页应用程序。但角度2不允许我这样做。我只是想在我的asp mvc视图的某些部分使用Angular2，就像我使用angular1而不将我的Asp Mvc应用程序放入SPA中一样。

我浏览了互联网，了解如何在不将整个项目转化为SPA的情况下将angular2与Asp Mvc项目一起使用，但没有运气。帮助将不胜感激。

Answer 1

我一直在看这个。

根据我目前的理解，使用Angular 2，我们将使用所谓的＆＃34;长形式引导程序＆＃34;。

本质上，它意味着可以在页面中引导多个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也可以完美实现。

在Asp Mvc中使用angular 2 Component

1 个答案: