In my current project I'm using backbone.js as a frontend technology. Ans I should note that I'm still on MVC3 but ready to move on;) Is it reasonable to create api area as data endpoint for my client part. Of course I can avoid it and leave just a plain controller in non-area, exterior part of my project. What is the best practice?
It is good practice to have a separate area for your client API that your backbone models interact with. Separation of concerns, readability and all that.
I would recommend using WebAPI for your API instead of standard MVC controllers though. It is easy to add via nuget, takes minimal config to set up, and it works well with Backbone's HTTP-Verb based approach to model CRUD operations.
If you are already planning on using WebAPI, then please ignore me! If you can't for whatever reason, then I would still say a separate area is a good approach.
Related
We are starting a major upgrade of a large WebForms application. The logic will be split between AngularJS on the front end and .NET MVC on the back end. What are the criteria about where to put routing? I can put it in RouteConfig.cs on the server and have .NET to be responsible for routing; or I can use ng-route on the client, and use only WebApi calls to the server.
I see pros and cons both ways, and I was wondering if anybody has any decision criteria. Or some articles that I missed (Google has plenty on implementing the routes; but not on the decision to pick one over another).
I would argue for full separation of concerns, so routing on the client. Doing the routing on the client puts the client in control of what is being displayed. The server would only serve the raw data via rest.
This also allows you more flexibility in the future as well. Say in 2 year you want to ditch Angular for the next new client framework. All you need are client developers to implement the UI calling the existing endpoints, the server code would not need to be touched. Want to move away from .NET backend? No problem, just implement the endpoint in the new framework, not client could would need to be changed.
You should use both as your application is large.
let say your screens are divide on the bases of rule.
When Admin will login you will load all files related to that functionality and after that take benefit of ng-view and make that functionality as a single page app.
So in this way you don't need to load all files once. by ng-view you can also share data between different screens.
I'm newbie in angular so i have two questions on AngularJS routing. Deeply sorry if this has been answered. tried a brief search, didnt find exact match.
I get the idea of SPA, the cost of asp.net server round trip,
however, what's a valid real world scenario that make best use of
both server side routing and client side routing together? or simply
give up the asp.net mvc routing at all?
If partial routing rules
defined on both side, isn't it a bit messy?
well, that depends on what you need I saw some people doing a mix of routes between angular and MVC, you can take a look to he boilerplate and hot towel projects for asp.net and angular combo take them as reference, both are like starter kits.
In my personal opinion (and this is subjective), I prefer to use a RESTFul architecture / SPA let angular do the routing and have web API or service stack as a middleware very much like the mean.js approach for me it's a cleaner and more natural for a SPA application.
take a look to this article that talks about rest API and some best practices.
I don't know if there's a perfect answer since it all depends on the project you're working on and the preferences of the dev team. I personally like keeping some of the MVC concepts (mvc views, routing, etc.) and just using angular for a given page's functionality. I don't make use of the angular routing at all. Obviously it would be a different story if you were trying to create a full SPA.
But I find that in a lot of cases (especially if working on an existing app written in MVC) you can introduce bets and pieces of angular without taking it all the way. If you're trying to get rid of page redirects entirely and want a full SPA experience then you should probably use a service approach instead as already suggested (if you want to stay with the Microsoft stack, Web API is a good option).
I want to create a largish ASP.NET MVC Web application. On some pages I would like to utilise AngularJS.
This app will not be a SPA.
At what point does this become a problem? For example at what point does running effectively two MVC paradigms become a headache?
Or is it a case of as long as you have clear delineation between what's using ASP.NET MVC (standard action methods etc) and what's using Angular JS then the two run side by side ok without giving you massive code organisation/maintainability headaches?
Cheers for any wisdom.
I'd love John Papas opinion!
Andrew
Since you are only asking for opinions, I will be happy to share my experience. The two do mix very well, and I think in most cases (at least most of my own development) the .NET side becomes very light weight.
Your .NET Web API Controller becomes a simple call to the Data Layer to populate a model or List(Of T) models. This gets returned as JSON to the Angular service.
From there, Angular takes over all of the logic until you need to perform another CRUD operation. Manipulating, validating, etc. all happens client-side in either the model (for me the Angular service acts as the model in MVVM) or the angular controller (which is really a ViewModel).
It's best if you let your model (Angular service) handle as much business logic as possible and restrict the Angular controller to responding to clicks, input controls, etc.
To sum up, let your .NET server side be very light. Just transport data back and forth to the Data Layer. Let Angular do the heavy lifting. You definitely do not need to be building a SPA to see the wonderful benefits of a JS data binding library, of which Angular is arguably the best of breed.
An excellent blog post that contains [ details of what I've discussed here ].
Good luck!
I use ASP.NET MVC alongside AngularJS for a fairly large in-house application. We don't really use many features of ASP.NET MVC beyond the basic page template and script bundling - so everything from the client-side is controlled by AngularJS and client-side routing - except for some distinctions we've made between 'modules' of the app where we wanted a different ng-app for each, along with different script dependencies.
If you're looking to take advantage of AngularJS on a page-by-page basis then I think you have no problem at all. As long as you reference the scripts (both core AngularJS scripts, and your AngularJS scripts for modules, controllers, etc.) correctly then you can just begin decorating elements with ng-app, ng-controller, etc. and it will just work. You could insert the relevant AngularJS scripts for relevant .cshtml pages using a #section declaration.
It will only be more complicated if you need a mix of server-side and client-side routing. Then it will be a case of carefully constructing ASP.NET MVC routes to deliver the SPA functionality where needed.
I come from using ASP.NET MVC/Web API and now I am starting to use Angular but I am not clear on the proper way to mix them.
Once I am using Angular does the MVC sever side concepts still provide any value ? Or should I strictly be using Web API purely to get data for the angular HTTP calls ?
Any tips you have for a ASP.NET MVC guy transitioning to Angular would be helpful
Pure Web API
I used to be pretty hardcore with ASP.NET MVC but since I've met Angular I do not see one reason why I would use any server side content generation framework. Pure Angular/REST(WebApi) gives a richer and smoother result. It's much faster and allows you to build websites that come quite close to desktop applications, without any funky hacks.
Angular does have a little learning curve, but once your team has mastered it, you'll build much better websites in less time. Mainly this has to do with the fact that you don't have all these state(less) issues anymore.
For example imagine a wizard form with any traditional server side framework. Each page needs to be validated and submitted separately. Maybe the content of the page is dependent on values from a previous page. Maybe the user pressed the back button and is re-submitting an previous form. Where do we store the state of the client? All these complications do not exist when using Angular and REST.
So ... come over to the dark side ... we've got cookies.
Similar question
AngularJS is more associated with the single page application paradigm, and as such, doesn't benefit much from server-side technologies that render markup. There is no technical reason that precludes you using them together, but in a practical sense, why would you?
An SPA retrieves the assets it needs (JS, CSS, and HTML views) and runs on its own, communicating back to services to send or retrieve data. So, a server-side technology is still necessary for providing those services (as well as other means such as authentication and the likes), but the rendering parts are largely irrelevant and not particularly useful because it's a duplication of efforts, except MVC does it on the server side and Angular does it on the client. If you're using Angular, you want it on the client for best results. You can make Angular post HTML forms and retrieve partial views from MVC actions, but you'd be missing out on the best and easiest features of Angular and making your life harder.
MVC is pretty flexible and you could use it to service calls from an SPA application. However, WebAPI is more finely tuned and a bit easier to use for such services.
I've written a number of AngularJS applications, including a couple that migrated from pre-existing WebForms and MVC applications, and the ASP.NET aspect evolves towards a platform for delivering the AngularJS app as the actual client, and for hosting the application layer the client communicates to via REST (using WebAPI). MVC is a fine framework, but it usually finds itself without a job in these sorts of applications.
The ASP.NET application becomes another layer to the infrastructure, where its responsibilities are limited to:
Host the dependency container.
Wire the business logic implementations into the container.
Set up asset bundles for JS and CSS.
Host WebAPI services.
Enforce security, perform logging and diagnostics.
Interfacing with application caches for performance.
Another great thing about an SPA is it can increase bandwidth of your team. One group can blast out the services while the other lays in the client app. Since you can easily stub or mock REST services, you could have a fully working client app on mock services and swap out for the real ones when they're done.
You do have to invest up front on Angular, but it pays off big. Since you are already familiar with MVC, you have a leg-up on some of the core concepts.
It depends on the project you are working on.
If angularJS is something new for you I would rather pick a small low risk/pressure project to get started and ensure you learn how to do things in the right way (I have seen many projects using Angularjs wrong because of pressure, deadlines... lack of time to learn it in a proper way, e.g. using JQuery or accesing the DOM inside the controllers, etc...).
If the project is a green field one, and you have got some experience on AngularJS, it makes sense to abandon ASP.net MVC and in the server side go for pure REST/WebAPI.
If it's an existing project, you can pick up a complex subset of functionality and build that page as a separate angularJS app (e.g. your app is composed of a big bunch of standard simple / medium complexity Razor based pages but you need and advanced editor / page, that could be the target piece to build with AngularJS).
You can use Angular framework for front end development i.e to construct views. It provides you a robust architecture and once you learn you will find it's advantages over Asp.net MVC's razor view engine. To fetch data you have to use WebAPIs and now ASP.Net MVC project support both WebAPI and MVC controllers out of the box. You can refer below link start with Angular and ASP.Net MVC application development.
http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/
There are two frameworks currently available for developing UI components for angular applications. I have used both these frameworks in one of the angular projects that I worked.
Material
https://material.angular.io/
PrimeNG
https://www.primefaces.org/primeng/#/
I got my datalayer, business layer ready. Now i want to to implement service layer.
I do not want to implement this layer in wcf ria services. Is there any other way to implement this layer in such a way using wcf, so that I get my model through wcf using js.
For example I have my domain 'Person'. (In domain project). Then in my 'PersonRespository' has
InsertPerson, GetPerson etc. to get and store the 'Person' in database.
Now I want to use asp.net mvc to show the person detais.
So next two layer will be Presentation Layer and service layer and manipulate data on client side using knockout.js and I am stuck on following issues.
Where will be mine Presentation layer will live. I am using asp.net mvc so It should be in model folder of mvc application, Is it wise to copy the same code class (Person) to model folder as well from domain model. Event when they are same.
How I will be able to get 'Person' model class in javascript and able to update it from javascript to database as well.
Is my architecture style is of enterprise level or i am missing something.
Any point to tutorial will be helpful.
If you have any further questions please let me know.
Thanks,
Daljit
Question 1:
No you should not be repeating your code. There is talk about this in the DRY (http://en.wikipedia.org/wiki/Don%27t_repeat_yourself) principals of development.
Question 2:
It is recommended that you serialize your model using a json serializer and send it to your UI. It will be updated etc, and then sent back to the services. Google MVVM pattern in javascript to see how this is done. KnockoutJs is a great start in achieving what you want. Its probably best to check out some examples done in knockoutjs to see what is going on. There are also many examples in MVVM for WPF that might help understanding the pattern at a higher level. I would recommend seeing codeproject.com for indepth MVVM examples.
As far as your layers go, you have many options, but a generic recommendation would be:
1) Presentation must be triggered through MVVM bindings, ie if the binding updates, the UI will then update itself.
2) the asp.net side of things should only update the models when sending updates via ajax to the UI. (not everything needs to be sent via ajax, im not saying that. When it does, it shouldn't also send extra html or js to put in the page).
3) Your models should really come from asp.net to the html page. (this will make things easier later, as the page will only be updated via asp.net models and you won't get items coming from multiple domains, which ends up being a nuisance.
4) Your asp.net site should provide a wrapper for your WCF service, and can foward calls to WCF.
OR
If you didn't want to wrap WCF with asp.net and needed your UI to communicate directly via ajax to WCF (should be a rarer usecase like doing an igoogle like page with widgets, or maybe mobile development with no asp.net interaction, ie full js app) Then you can investigate CORS as an option to go from JS to WCF and JS to asp.net (This is of a hard difficulty, easy to program, hard to get working for WCF as there is very very low documentation on it for in my case non IIS hosted WCF). See this page for information: http://enable-cors.org/