在Asp Mvc中使用角度2组件

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

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

来源

2016-05-29 Eskinder

http://plnkr.co/edit/aZqdJe3OZ8K2odHioWkB 这里是一个如何创建多个角度应用程序并能够在它们之间进行通信的示例。我已经在这里回答了更多详细信息：http://stackoverflow.com/questions/37750898/how-to-do-a-longform-bootstrap-with-angular-2/38348729#38348729 – pajics

我也一直在看这个。

从我目前的理解来看，使用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也是可以完美实现的。

来源

2016-05-29 15:53:37 VRPF

在Asp Mvc中使用角度2组件

回答

相关问题