4

I am somewhat of a beginner and would like someone to please help me understand how Angular 2 ties into .net Core when building a web application.

I just read Adam Freeman's Pro MVC Core book, where he build a sports store using entity framework and generating razor views to display all information. I am now trying to learn Angular 2 so I can learn the front end better, and it seems like all I learned using MVC Core Razor is now a waste. What is the common usage of these technologies together? If I build a SPA using Angular 2, could I access the database using a web api built from .net core? Is that the common usage? Or is there a way to build a .net core application using entity, using normal controllers that generate angular views instead all in visual studio? I guess they would not be cshtml files? Please help me understand this.

Lastly, I am using .net code with Angular, should I be using visual studio instead if I want to use .net on the back end? Thank you.

Improve this question
3
  • "If I build a SPA using Angular2, could I access the database using a web api built from .net core?" - YES..."Is that the common usage?" - VERY YES...The only difference between Angular2 SPA application and Razor based application is that the former does not have views. That's it, everything else stays the same. Commented Feb 16, 2017 at 21:01
  • Thank you everyone for your answers. So basically I would have a angular2 app and would access a .net core web api that has a (api) controller ONLY manipulating data, not rendering any razor views at all? Commented Feb 16, 2017 at 23:54
  • That's the most common approach. I don't like mixing razor and Angular, although it's possible. Commented Feb 17, 2017 at 15:23

4 Answers 4

Reset to default
5

Yes, ASP.NET Core and Angular2 can be used together. The architecture can be the following:

  1. Data layer - SQL Server. SQL Server Express is good (free) way to get started

  2. Application layer - ASP.NET Core which accesses data from SQL Server and exposes RESTful APIs using Web API. A tutorial can be found here. You can use Visual Studio 2015 Community which is free for most companies.

  3. Client app - Angular2 can be used to build client side applications. Its architecture is described here.

Razor can be used to dynamically generate initial views (e.g. some fixed master layout that looks differently based on logged in user).

Angular2 has very nice tutorials that also deal with best practices:

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

The common way to merge these two technologies is to have .NET MVC application serve as a back end API and then have the front end written as an Angular SPA. The SPA would be using the back end for database integration or any server side business logic.

I'm not aware of any meaningful way to combine Razor views with Angular but I might be wrong.

In any case there is a Pluralsight beginner course you can take a look at.

Additionally LinkedIn has something called "Learning" with various courses on various programming topics. There is a course there that might help you.

Both sites have a 1 month free trial.

Here is a link to a similar question.

Improve this answer

6 Comments

I don't think there is any meaningful way to combine Angular and razor. Angular can of course attach to any backend api and .NET MVC makes a very good backend.
You could have the Angular code run on the server and send resulting HTML to the client to improve first request time and SEO optimization. Subsequent requests would be done through Angular running on the client. Scott Hanselman covered it recently on his blog. So I wouldn't say there's no meaningful way. Or I myself have used MVC Views to deliver the "first" page of the SPA.
@jdl134679 I specifically say Razor not .NET MVC. Can you use a MVC Razor view bound to both MVC model and Angular in a meaningful way?
@Marko - no, I don't think so... my comment was meant to be agreeing with you
@jdl134679 Ok I missunderstood your answer then. In any case I could be wrong, I was talking based on my experience.
|
1

When you compare Angular and MVC/Razor, what you are really comparing is "client-side rendering" vs "server-side rendering". There can be use for both in a client/server application.

A "cshtml" file, when sent to the server, becomes just an html file. The "cs" part of it is the code for server-side rendering. You can also use other rendering engines with MVC if you choose.

Server-side rendering is also a hot topic in the Angular community, using Angular itself on the server for rendering. But ASP.NET MVC offers a lot in this regard. There is a huge existing ecosystem of .NET components that you can draw from. There is much existing code that you can immediately use.

For example, you can just check the Authentication box when you create a ASP.NET project and will immediately get a robust set of views and controllers for handling normal, 2-factor and third party authentication.

When you ask about web api, you are talking about the second major part of ASP.NET. WebApi and MVC were once separate technologies but have recently merged into the same Microsoft code base. You can call into ASP.NET WebApi directly from within your Angular2 app. Angular's router will recognize it as an external route and sent the request to the server.

As far as database access, you can use this from within both your MVC controllers and from the WebApi calls that you handle on the server.

Improve this answer

Comments

0

JavaScript Services shows how to get started, with a good scaffolded templates: https://github.com/aspnet/JavaScriptServices

In your case, look at https://github.com/aspnet/JavaScriptServices/tree/dev/templates/AngularSpa in order to see how they build an Angular / .NET Core SPA.

You can either clone their repository or use their template generator as follows:

npm install -g yo generator-aspnetcore-spa
cd some-empty-directory
yo aspnetcore-spa
dotnet run

Practically, an Angular / .NET Core is made of the server-side part (.NET Core) and client-side part (Angular). For those who are new to ASP.NET Core (not your case), I'd recommend reading Learn ASP.NET Core MVC in order to learn about the server-side part.

Improve this answer

Comments