How to using MVC views (*.cshtml) as templates in Angular 2?

Question

Hi guys I want to know how could I using MVC views instead of templates in Angular 2. In Angular 2
I was using RouteProvider:

$routeProvider.
when('/BusinessLookup', {
    templateUrl: 'Home/BusinessLookup',
    controller: 'BusinessLookupController'
});

And how could I handle element values using $Scope.

score 3 · Answer 1 · answered Sep 16 '16 at 13:55

You can directly call your cshtml view in templateURL

import {Component, OnInit} from "angular2/core";

@Component({
    selector: "mvc",
    templateUrl: "/partial/message"
})
export class MvcComponent implements OnInit {
    message: string;

    constructor() { }

    ngOnInit() {
        this.message = "The '/partial/message' path was used as the Angular2 'templateUrl'. However, this routes through the 'PartialController' hitting the 'Message' action and is served after standard MVC pre-processing. Likewise, there is a 'message' property bound to the <blockqoute> element."
    }
}

Partial /Message.cshtml

@{
    ViewBag.Title = "MVC";
}
<mvc>
    <blockquote *ngIf="message">{{message}}</blockquote>
</mvc>

score 2 · Answer 2 · answered Nov 10 '15 at 18:49

2

What you are asking for is called Isomorphic Javascript. Basically, you can't run Razor on the client but you can run javascript on the server.

What you are looking for might more in the nodejs range. It could probably be done by changing the architecture but that would mean changing the question.

answered Nov 10 '15 at 18:49

Maxime Rouiller

13,614
9
57
107

1

I have been used it before to create SPA project using AngularJS 1 and it's work. But I want to move my project to using Angular 2 instead of AngularJs1. That's what I want. – Ahmed El-Maghrabi Nov 10 '15 at 19:13
You can create MVC views with AngularJS (1 or 2) inside of them without any problem. Your question is very broad and hard to understand. – Maxime Rouiller Nov 10 '15 at 19:14
That's what I want create MVC views and handle them using Angular 2. But my problem it's How could I do that because I cant find any reference could help me to moving from Angular 1 to Angular 2. – Ahmed El-Maghrabi Nov 10 '15 at 19:19
Here's a link that might help you but otherwise, this has nothing to do with asp.net-mvc-6 http://paislee.io/migrating-to-angularjs-2-0/ – Maxime Rouiller Nov 10 '15 at 19:23

score 1 · Answer 3 · answered Dec 30 '16 at 08:41

Of course you can render cshtml as templates!

@Component({
    moduleId: module.id,
    templateUrl: "/YourController/YourAction" 
})

When the template is needed, Angular makes an http request to 'templateUrl'.

If that url is resolved as an MVC Action, then IIS invoke the traditional MVC pipeline which can parse cshtml with Razor, and finally returns html, that is valid for angular

score 0 · Answer 4 · edited Apr 06 '18 at 06:59

0

Yes, you can do.

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: '/Student/Register',
})
export class AppComponent  { name = 'first Angular demo'; }

In Views create a directory Student add the file Register.cshtml

Hello {{name}}

edited Apr 06 '18 at 06:59

GYaN

2,327
4
19
39

answered Apr 06 '18 at 06:36

shiva samalla

79
7

How to using MVC views (*.cshtml) as templates in Angular 2?

4 Answers4

Linked