Help me understand Angular 4 with ASP.Net MVC

Camillia
Camillia used Ask the Experts™
on
I bought this template Angular 4 template

I've been  Googling for the past two weeks and read a lot of articles on how to set an Angular 4 project. This is one of the articles I followed
Example to setup Angular 4 with MVC

I installed Node and Angular CLI. Created an MVC project. Copied the files from the template to the MVC project. I did ng build and ng serve and the index.html page comes up.

At work, we use AngularJS with ASP.Net MVC. We have the AngularJS code along with MVC controllers. Projects have ASP.Net's Identity/Membership, the login page, etc.

 So far so good.

I followed the article to "The Development Workflow and Live Reloading"  section.

Questions

1.  In Angular 4, how can I remove index.html and have Razor (index.cshtml) as the first page? I want to have a login page with Asp.Net's Identity (I'm customizing the Angular 4 template I got...don't want to use it out of the box...I want to integrate the design into ASP.Net project I'm creating)

If you look at the article I posted, it has this section "The ASP.NET MVC Index Razor View Page". I don't quite understand it but is that something I need to do to integrate ASP.Net with Angular 4?

2. Should I even be using an Angular 4 project with ASP.Net? I'm thinking I have to because I want to use webconfig settings, ASP.Net's Identity/Membership for login, MVC controllers....just like how we did AngularJS

3. This is another article Another example
 If you look at "Index.cshtml" code section,  Razor has references to the JS files and one of them is this
<script src="dist/scripts/packages/systemjs/dist/system.src.js"></script>

Open in new window


but I don't have system.src.js. I read I don't need this because I used Angular CLI to get up the project.

4. This is another example (but Angular 2) that looks like I need to add references to Index.cshtml to change the Angular 4's index.html start page to Razor
Example 3 but with Angualr 2


I've bought templates from Themeforest before. I have several jQuery/HTML ones and one AngularJS that I've been able to integrate to ASP.Net and customize the template.

How can do I with Angular 4? how can I change the index.html to razor and then use MVC controllers along with Angular 4 Components and Services?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I can't help you with the Razor integration but can help with some of your questions

Angular 2 / 4 - these are basically the same - they differ in many ways with respect to compiling and a few extra features but whatever documentation you find for integrating Angular 2 you can do with 4.

To replace the angular index.html is really easy - all you do is make sure you have your references to the Angular JS (Note - not AngularJS - the 1.x version of Angular - referring to the project JavaScript files) files (copy and paste js files from existing index.html) and that your template has the app root tag to load your application into.
<app-root></app-root>

Open in new window

These would go wherever you want your Angular App to appear.
thanks, Julian. Let me try that. I'm probably making it harder than it is.
Julian, since you don't use visual studio , do you develop SPA angular projects? Watching a tutorial on pluralsight about angular and it went into SPA a little.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Julian, since you don't use visual studio , do you develop SPA angular projects? Watching a tutorial on pluralsight about angular and it went into SPA a little.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
do you develop SPA angular projects?
That's pretty much exclusively what I do - pure Angular 1.x 4.x and as of this month 5.
So, what do you do...for example...for login page? In .net, there is membership tables that hold user information and password....or there's a webconfig for application settings. How do you handle features like that?

I have an old web forms .net application that I want to upgrade on my own time.  It's my side project. I'm researching and watching tutorials. That's why I bought that template. Wondering if I can do it using SPA but not sure about the logins I have.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
The login process depends on what I am connecting to - server service / Firebase etc. but the principle is mostly the same. With Firebase it handles most of the auth for you so that makes it easier.

You start by building an authentication service. This makes use of token based security (JWT or similar). When your code instantiates it checks the service to see if you are logged in (the service checks localStorage for the token) if not you are redirected to the login state.

With services like Firebase you get a real time notification when auth state changes - this is linked to an observable which then fires off a route change to the login state whenever the login state on the server changes.

With non realtime database interaction each route change results in a check to see if you are authenticated and if not you are routed to the login page. Angular also has Route Guards that allow for better controlling of the application routing state.

Thing to understand with SPA's is that they are state based applications. You create your model (manage it with Redux / RXJS) and state flows from the model to the view. The view changes based on state and the app communicates with the outside world with service requests.

If you come from a VS background I can understand wanting to integrate VS tried and tested and familiar .Net controls into the code but from my perspective that really does not work so well - at least not for the apps I build. Angular is about building components and connecting up components to make the app - extending the DOM with your own custom "tags". So while Angular can work with .Net I don't believe SPA's really gain anything from doing so. The service endpoints yes - leverage .Net to the Nth degree.

Of course I am terribly biased in this respect I am sure there are VS / Angular aficionados out there who argue the undeniable merits of merging the technologies - unfortunately I cannot speak to those based on my experience.
Thanks, Julian. Let me read and understand.
I looked up Firebase and Redux. Interesting stuff. I have to watch a tutorial on SPA.
To replace the angular index.html is really easy - all you do is make sure you have your references to the Angular JS (Note - not AngularJS - the 1.x version of Angular - referring to the project JavaScript files) files (copy and paste js files from existing index.html) and that your template has the app root tag to load your application into.

In index.html, I don't see references to JS files. This is the Index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ARMS NEW</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Open in new window


Then when I do ng serve, I see references in Chrome's console. But I did a search for the JS files and I don't see them in the solution. Are there any specific JS files I need to reference?  I see the node_modules folder.

If we can't figure it out, it's ok. I'll continue searching and watching tutorials.
screen shot
Ah, I did "ng build" and it created the "dist" folder. Now I see "index.html" and those JS files.

I'll continue and post back.
Got it working! thanks for you help on this.
One last question...what IDE do you use to develop your angular code?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Ah, I did "ng build" and it created the "dist" folder. Now I see "index.html" and those JS files.
Apologies I should have mentioned that it was the index.html as a result of the build

Angular 2+ VS Code + Angular CLI

Angular 1.x Notepad++

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial