CODEWITHSUNDEEP
angularjsasp.net-mvcangular
Eskinder
Eskinder

Reputation: 1409

Use angular 2 Component in Asp Mvc

I have an Asp Mvc project that uses angular 1.4 for the front end. My project is not a single page application and nor do I want it to be. I recently learned anguar2 and i wanted to incorporate it into my project without forcing the whole project to be a SPA.

I looked over the internet on how to use angular2 with Asp Mvc project without transforming the whole project in to SPA but no luck. Help would be appreciated.

Upvotes: 1

Views: 416

Answers (1)

VRPF
VRPF

Reputation: 3118

I have also been looking at this.

From my current understanding, with Angular 2 we would use the so called "long form bootstrap".

In essence it means one would bootstrap multiple Angular 2 components in the page.

<my-app></my-app>


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

<my-greeting></my-greeting>

This an example of doing long form bootstrap.

This is part of my personal experiments, it is not production ready code.

Should provide an idea of how to achieve this anyway.

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

//

The AngularJS 1.x way was pretty convenient in this particular situation.

Nonetheless, it is perfectly achievable with Angular 2 as well.

Upvotes: 1

Related Questions