AngularJS - MVC ASP.NET Directory Structure - javascript

This is more of a general inquiry. I am looking to start a personal website as a side project using ASP.NET MVC 5/WebAPI. For my front end (Javascript) I want to use AngularJS. I have been reading tons of articles and they all suggested the best way to structure your files is to put the html, service/controller all together in the same folder. I am not sure if this is best practice for ASP.NET MVC.
What are some things that you guys can recommend to achieve clean and reusable code.
Thanks

This example shows how to create a simply web application using angularjs, mvc and RESTful Web Service, I named it is “manage customer”.
List of features:
List customer
Edit customer
Create new customer
Delete customer
List of projects of “manage customer” application:
CustomerEntities (EntityFramework 6.0.0.0)
CustomerDAL (c# classes)
CustomerBLL (c# classes)
CustomerAPI (RESTful web service)
CustomerUI (AngularJs, MVC)
Here is solution structure:
More detail and source here AngularJs MVC

Related

ASP.NET MVC with React - how to use them in a combination

I have a newbie question. If we use React (or any other similar framework) in ASP.NET MVC we end up with very simple (single?) cshtml file which delegates UI rendering to React. So in that case, why bother with MVC? Shouldn't be a better idea to create WebAPI REST service, and a frontend client application in pure JavaScript/React as two completely separated applications?
I just don't get the idea of using ASP.NET MVC in combination with different frontend frameworks...
So basically you're correct in that you would not use a typical MVC setup when using something like React or Angular. That said with the newer versions of ASP.NET there is no difference between an API controller and an MVC controller. You'd write your API endpoints in this new unified controller and use it like a standard RESTful API for your React application to hit. You can keep both in the same solution and serve up the index.html to start your web application.
In my experience it is better to just separate the two entirely and built a .Net back end in one VS solution and then use something like WebStorm to write your web application in another.
Compared to pmanderson54's answer, he is right about separating .NET back end and React Front end apps.
Just don't forget to configure enabling Cross-origin Requests in Web Api
https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

RoR and AngularJS Integeration

I am building an app with following technologies
1. RoR - BackEnd
2. Angular JS - FrontEnd
In this case RoR should handle all the backend stuff (Model and Controller) and Angular JS should handle the stuff which should with handled by RoR View. So my question is that how we can communicate between these two different technologies. If possible, also suggest some tutorials for the same.
AngularJS is the client side JavaScript Framework and it works on the MVC design pattern. while Ruby on Rails is a server-side application framework based on MVC design pattern. The points below is a quick representation of how Angular JS works seamlessly with RAILS MVC.
The power of Angular JS is the client side data manipulations which we use for various User Interface Use Cases like Lists, Refine Search, and Graphical Data Representation etc and present the Web Application to the user as a Single Page Application.
Building the single-page applications using Angular JS and Ruby on Rail is a two-step process: first, you create a JSON API in Rails and then you use that API in the JavaScript application.
The Angular JS Controllers interact with RAILS Controllers. The object data from the RAILS Model (M) is passed to the Angular JS Controllers via Rails Controller(C) using Restful API services. The view part of the application is the Angular JS framework in MVC design pattern, dropping the View in Rails.
This way the true potential of Angular JS is utilized for building the Single Page Application and Rails is capitalized for its server-side implementation using its Models and Controllers. The layers interact using Restful JSON API services. Hire a ruby on rails developer for more detailed information.

Integrating AngularJs into existing ASP.NET MVC 4 web application

Soon I'll start working on the next version of a website I've built. Basically it's kind of a CRM. Lots of tables, forms, CRUD everywhere. The problem is that it's going to be nearly a rewrite cause of huge requirements for functionality for the up-coming version, and we will need to make the website a bit more interactive, responsive and user friendly.
Currently it's ASP.NET MVC 4, with some jQuery for ajax stuff. MVC 4 application acts as a glue/proxy between client-side and underlying service which provides all the data, so WebApp has no direct communication with database. Also MVC 4 application is where business objects are transformed into ViewModels. We use DataAnnotations Validation for ViewModels.
Now what I was looking for, is to somehow integrate something like AngularJs. The goal is to move closer to SPA, give the client-side some structure, as building more functionality on top of existing jQuery code will just result in a sphagetti. However, writing full-blown SPA is not really an option, as it will require way too much effort and time, as always, is not unlimited.
For start the goal is to move Html forms management to AngularJs. That means I need a way to render MVC partial view with MVC model, and let Angular take over the controll. Posting changes/updating the view should be handled by Angular.
I have been researching Angular + asp.net for a while now, and the problem is that I need MVC models, but Angular also needs a 'model' ($scope). I know about ng-init, but some models will be quite complex. so it does not seem like a good idea.
Also server side validation (DataAnotations with loads of customized stuff) with unobtrusive client-side validation works very well for us, so would like to keep that and somehow make it work with Angular.
I've also looked into AngularJs/BreezeJs/MVC4, but breeze mvc integration is focused on EntityFramework, and it needs model metadata for client-side to be able to save, update and cache entities. And as mentioned earlier, mvc app does not access database directly, nor has a way to generate metadata. Writing by hand is not an option.
I know I'm trying to make some kind of hybrid and would have a lot's of issues having models on server and client sides, so I am looking for an advice which way should I go.
Is this doable?
Maybe I can generate metadata for Breeze js from existing ViewModels on MVC (breeze seems to work with dataanotations and validation works on client-side, at least minimally)?
Maybe this is a nonsense and I should either continue with MVC app, or go full-SPA, and there is no easy way to combine them both.

ASP.NET MVC - Backbone js - Organize multi page mvc app

We have a project using ASP.NET MVC 4 and it is a multi page mvc web app. We are planning to use Backbone js as the front end javascript framework . What is the best practice or suggestion to organize the backbone js code for the multi page mvc web app?
How it will be organized if we use Knockout js instead of backbone js.?
Thanks,
Sarathy
In my experience, Backbone is best used for SPA's (Single page apps). It is designed to help bring structure to javascript heavy applications. You first need to tell us why you are looking to use either of these libraries and a description of the site or app you are building? Are you using MVC 4 Web API, because Backbone connects to your existing API over a RESTful JSON interface and Web API is a perfect fit for this.
The only reason I would see to use Backbone for a multi-page mvc web app, is if you are looking for the app to function with javascript disabled and progressively enhance the app with Backbone. If you are looking to use pushstate, then you would also need to serve the individual pages.
I think the best bet is to look at TODOMVC to get a feel of the different libraries. Look how they work and see which, if any, would be a good fit for your app.

Do I need (Spring) MVC if I have Javascript/CXF?

I am developing a Java web services application that is (mostly) to be used by other SOA clients. Currently I am planning on using CXF to publish my various web services & methods using SOAP/XML.
I am now being asked to investigate a thin client web-application for this tool. I have been looking into Javascript libraries such as ExtJS and Dojo -- and they seem really straightforward. Given that this is a web application and not a web site, I really don't think I'll be creating very many static HTML pages -- maybe even just one. Mostly I plan on using an XMLHttpRequest object to hit the web services I already have and take the results and modify the DOM.
However, I have never created a browser-based UI before and in the context of a nearly 100% Javascript application I am trying to figure what role, if any, a server side MVC framwork such as Spring MVC will buy me. Is it needed for this? Whats it good for?
If you use the CXF JavaScript client generator and go for a single page JS application, I don't see what a Java MVC framework will give you (apart from extra complexity).
Spring MVC is a web-based module based on servlets and JSPs. If you're writing a JavaScript UI that calls on services directly, I'd say that you don't need Spring MVC.

Categories

Resources