I am confused about how to process my form(s) using django, django-rest-framework, angularjs, and django-angular.
Using standard Django techniques I can create a model form in my view and pass it to my template.
Using django-angular, I can ensure that the form has lots of pretty bootstrap3 styling and integrates well w/ angularjs.
Using angularjs, I can bind the form to javascript models and gets loads of cool interactive functionality.
Using django-rest-framework, I can load the initial form data via a RESTful API which returns JSON.
This all works great. I am just not sure what to do when submitting my form though...
Should I submit using an angular function that calls my RESTful API? Or should I submit using normal Django methods (ie: if form.is_valid(): form.save()?
I am refactoring this code from a pure Django app and the forms have some extremely complex custom validation methods. I am not sure that I can (or should) replicate that in angular.
Is there a "best practice" out there? Given that I can GET and POST via my RESTful API, what is the advantage to still doing it via Django?
note: I just thought that custom serialization validation should let me have the same level of complexity going through django-rest-framework as I previously had in pure Django. Whether this is a good idea or not is still a valid question.
note2: angularjs & django-rest-framework sure does seem faster.
It is common practice to submit the data through the API and let the serializer do most of the validation for you. You can then do custom validation if needed. You can take a look here for more information on custom validation if you need it. But it does a pretty good job and I rarely have to write any custom validation.
Some of the problems you may run into with trying to do it through pure django, is that it will mess up your SPA. Doing a POST request will require you to "leave the SPA" and return back to it. Other issues such as CSRF tokens are also a pain in the butt to try and figure out. Best to just use your REST API.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I heard a lot about how AngularJS is so much better than jQuery for communicating with server.
But all i found was replacing C# controllers and cshtml views with purely client-side javascript files. And i have no interest in that.
is anything that I'm missing?
I am currently using jQuery Ajax for communication between client and server through JSON. I was looking forward for a better solution for this purpose.
Once a controller returns a view, what is sent to the browser is pure HTML. Razor is rendered server side as HTML. Or your action can return pure JSON.
Therefore, whether you want to use jquery, angularjs, or any other JS/HTML based library, there is really no restriction there imposed by MVC. From the perspective of client side code, controller actions are just URLs that return return HTML or JSON.
Additionally, MVC controller actions which return JSON, or WebAPI controllers, are perfect RESTful endpoints for your AngularJS to interact with. If you need HTML fragments for refreshing dynamic areas of a page, then a controller action returning a partial view will come down to the client as an HTML fragment. So your interactive requests through Angular can still leverage your backend architecture of Controller/Business/Data layers.
What Angular Offers MVC
AngularJS offers an MVC application the same thing it offers any web applicaion. It is a great way to abstract the presentation of UI elements from the interactivity of those elements with the backend. The problem with common approaches with jquery is you react to interaction with specific HTML elements via selectors such as $('.someClass').on(... and then in the handler collect information from the element about what was clicked and submit that in an ajax request, and then take the response and update specific elements $('.areaToUpdate).html(response)`.
So you have three concerns not properly separated:
What element responds to interaction(button click, drop down change, item drag/drop)
The interaction with the server to compile a request, submit it, and parse response.
Updating the UI based on the server's response
Often times because of the way we try to make this code less fragile, you are restricted to a logical hierarchy of objects that also matches your UI's HTML element hierarchy. Long story short, the lack of proper separation of concerns means changing any one will impact a chunk of code that has multiple purposes, and thus changes are more challenging because you have certain restrictions imposed due to lack of decoupling.
AngularJS provides a client side separation of these concerns by using a client side model as the intermediary between these concerns. UI interactions update the model, other code responds to changes to the model and makes server requests which update the model in response, and yet other code can respond to those changes and update the UI in response to the model changing. You are free to modify the UI's structure, and have a much more smaller set of code to update to get the UI changes wired up.
The fact that AngularJS is modeled from an MVC pattern makes it seem as though it would be mutually exclusive with ASP.NET MVC. However, they serve two different purposes. ASP.NET MVC provides separation of concerns for the server side querying of data, population of server side model, and rendering of server side HTML. It also provides a great way to support the rendering of JSON or HTML fragments(partial views) that might be leveraged by a client side interactive framework. AngularJS provides a model appropriate for writing clean client side code for highly interactive pages.
Personally, I think they are very complimentary.
Trying to do highly interactive pages with jquery+ASP.NET MVC is doable and can be efficient, but AngularJS adds a lot to the maintainability of the client side code. ASP.NET MVC provides a good framework for your server side logic. Additionally, if you have simple pages that fit a more traditionally PRG pattern or simply rendering HTML content, then ASP.NET MVC gives you an efficient way to quickly implement these pages without the unnecessary boilerplate code you'd need with Angular. In other words, you can choose to use AngularJS only on the pages that will really benefit from it.
You can mix MVC and angularjs with out completely removing MVC controllers.E.g if you have 5 modules on your app create that parent routes on MVC routing.(E.g Students,Teachers,Attendance etc..)
initially render your first view say student view renders through asp.net MVC then include all your JS files(including states related to that module) on that view(e.g students.cshtml)
.JS files related to this module may be
studentModule.js,studentController.js , studentService.js etc.
Do all your CRUD operations on angular JS.
Here your studentService will interact with MVC controller for all your db operations.
Benefit you are getting with this is
you are interacting with your server asynchronously and you can use
all angularjs features like(Directives,resources etc)
You can authorize all your MVC controller actions with asp.net
identity.
-Also to render any html template on state you can call your MVC controller action from templateUrl.return csHtml from MVC controller
action.
There are lot of applications on live using both asp.net mvc and angular js. here are few things i know.you can check some tutorials for better understanding.
.
Angular and ASP.net are both MVC frameworks. They are in a sense at odds with each other - I work on an Angular / ASP.net project where we serve and initial ASP.net view and then let Angular SPA routing take over, but its kind of a hack and I sometimes which we separated the two and had a plain WebApi implementation with Angular front end.
Using AngularJS just for its Http library is like using a sledge hammer when a hammer will do. You are wasting bandwidth in downloading large amounts of unused JS.
I would look to a pure JS library to handle your Http communication if you are unhappy with JQuerys implementation.
Axios is an amazing example of one of these libraries and uses Javascript promises just like Angular - which make the whole process really neat and easy.
Good luck!
what are the advantages of using 2 MVC architectures(frontend and backend) in same project. AngularJS and Spring MVC.
Without using AngularJs, can I update single div data without loading the entire page? Is AngularJS responsible for updating single <div> data out of multiple <div>s without loading entire page? If so, please explain in detail.
Once you have a single-page application you have to make sure all the different parts of that application are consistent, that's what the MVC/MV-Whatever in the front end is doing for you. That's not an issue in an old-school web application because the relevant state is regenerated with each request, but once the updates are coming in bits and pieces then different pieces of the front end need to be coming from the same model and that model needs to get updated consistently.
Obviously you can implement div updates with raw JavaScript, you don't need frameworks just to do AJAX. The JavaScript frameworks are written in JavaScript, after all. The frameworks and libraries do make things easier by doing things like papering over browser inconsistencies and providing convenient and useful features (like databinding in Angular).
The server-side MVC does become less complex and involved than it was in the old-school web application, you have less POST-Redirect-GET going on, the front end is more in control about what it is asking for. The front-end application is decoupled much more from the server-side because that whole server-side view layer of JSPs or Facelets or whatever is greatly reduced or just missing, instead you have services supplying JSON over HTTP and there is a much more limited, well-defined contract.
You can update a single element of your page without using AngularJS. As an alternative, for example, you can use JQuery.
You should wonder for the best approach for your project. This answer explains very well the differences between this two approaches.
As an aside note, AngularJS is not exactly a MVC architecture. Instead, the community has decided to call it MVW (Model View Whatever). Check this source for more details.
Basically I'm writing an app and am using Sails, MongoDB and Node JS for the back end. I'll use Sail's API features and was wondering what would be the best way to make the app realtime.
For instance I could use AJAX to call the API and manipulate the DOM using jQuery and update the DB through $.post then let the model update the db in the backend, however I'm finding this approach quite cumbersome. Not to mention I can see the code could become quite difficult to maintain after a while.
I've been doing some research and - if I understood correctly - it seems I could use either Backbone, Angular or Knockout to manipulate the data/DOM on the front end, however I'm not sure what would be the best approach in my case nor whether any of these would indeed suit my needs:
Being able to get the data dynamically
Update the data and the DOM dynamically as the user interact with the page
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
All the above asynchronously
As I don't want this to become a heated debate on which library is best, so I would like to know only whether any of the aforementioned libraries can do what I need and which is the leanest/simplest/has the lighter learning curve.
I did similar research a while ago and when found AngularJS, just stopped looking any further.
Right to your questions:
Being able to get the data dynamically
It is pure pleasure to do it in Angular. For the very basic functionality you have got $http service which allows you to send http request and register a callback when the data arrives.
For more complicated things there are modules ngResource and Restangular (external).
Update the data and the DOM dynamically as the user interact with the page
For manipulating DOM, Angular introduced concept of directive. It is basically future of the web (Shodow DOM and Web Components) right now. At this time point, there is nothing more elegant out there.
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
Yes. JSON.
All the above asynchronously.
Yes, of course.
SailsJS provides interchangeability of HTTP or socket.io connections. In your case I think sockets would be a better fit than AJAX.
I am developing an AngularJS/Web Api application, is there any way that we can write any Page validations in C# code and can be called from AngularJS as a service call?
i.e. the C# code is converted to JSON object where the angularJS service read the JSON object to enable/disable other controls? With this approach i can keep all my validation logic in one centralised place.
I don't want to write the same validation logic in the Angular script.
Please suggest.
Thanks
If I understand you correctly, you want to have only server-side validation. And at the same time you want your validation to happen asynchronously at server. And for end-user it would seem like a client-side validation.
Whether you are using Web API or Spring java, it is possible. There is a framework that can greatly simplify it. Just download example and see how it works:
https://upida4net.codeplex.com
By the way, you can take a look at working example here: http://upida.cloudapp.net:8080/org.upida.example.angular/
I promise, you will be surprised with amount of code there.
I'm currently building a Backbone.js/ASP.net MVC/Web API application and everything is going very smooth :)
When sending data to the server I know I can use ModelState and a ValidationFilter to validate there. However, when retrieving a model from the server, I'd like to include any validation rules that come from Data Annotations so that I can hook them into JQuery Validate or whatever I decide on. In ASP.net SPA you can call dataSource.getEntityValidationRules() from javascript to do exactly that.
I was wondering if there was a way to include these rules whenever I get a model with data annotations from Web API without the use of ASP.net SPA and its javascript libraries?
The benefit of backbone models is that those are are dynamic, so you can create a parser to read the validations form the server and add those validations to the backbone model in the way your pluggin need it, its kind of easy if you only use: required, minlength, max length and a regex but gets harder with ranges or some other kind of validations.
As I said plug those validation requires a some work to build this parser as I think there is no plugging or library for that.