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!
Related
I am learning MEAN Stack. I started from learning Angular(from angular.io) now I am learning node.js and express.js
My question is, if there is angular for front end in MEAN Stack then why there are views and template engines in express.js at back-end? Are they alternative for each other or complements each other? what is the boundary for the role and responsibility of these two?
I am looking forward for someone's help in clarifying of my concept for role these two technologies(express' views and angular) used in mean stack.
In order to answer your question, let me explain what is angular and what are template engines in express?
What is Angular?
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
what is template engine?
A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express application generator uses Jade as its default, but it also supports several others.
So,
Angular is a framework with a templating component baked in. You use it to create Single page Web Applications which means that DOM modification is happening on the client side and the app exchange with server only data. If your concern is template it is plain HTML.
Whereas, template engines' rendered views are sent to client each time by server whenever request is made each time a new page is rendered on server and sent to the client which is Great for static sites but not for rich site interactions.
If there is angular for front-end in MEAN Stack then why there are views and template engines in express.js at back-end?
This is because not every time generating views from angular is recommended sometimes it is better to use Template Engines to generate views and send the rendered page to a client, generating views at client side has its own pros and cons and generating views at server side has its own.
Generating views using template engines (i.e. at server-side):
pros:
Search engines can crawl the site for better SEO.
The initial page load is faster.
Great for static sites.
cons:
Frequent server requests.
An overall slow page rendering.
Full page reloads.
Non-rich site interactions.
Generating views using angular engines (i.e. at client-side):
pros:
Rich site interactions
Fast website rendering after the initial load.
Great for web applications.
Robust selection of JavaScript libraries.
cons:
Low SEO if not implemented correctly.
The initial load might require more time.
In most cases, requires an external library.
So, after knowing the pros and cons, you yourself can better decide that in particular case which one is better for you. Mean Stack has provided options for developers.
As far as your question regarding the role of these two technologies is concerned, Angular is a lot more view generator only, It has features like routing, it as services two-way data binding etc while the template engines are meant to render HTML so that it can be sent to the client.
I hope you will find this answer useful.
References:
what is the template engine?
what is angular?
pros/cons
Angular is a full-fledged front-end framework that comes with its own way of doing templating, using angular-specific markup in your HTML. If you use Angular as your framework, you're more or less stuck with their way of templating within the Angular portion of your application.
Angular Features
It is a framework written in Javascript language
Manages state of models
Integrates with other UI tools
Manipulates DOM
Allows writing custom HTML codes
It is meant for javascript developers to create dynamic web pages in a quick time
NodeJS
It serves the web
It is runtime built on javascript engine in google chrome
It can be considered as a lightweight server which can serve client requests in a more
simpler way than java does
It performs communication operation with databases, web-sockets,
middleware etc.
Why we use angular for Tempting not Express/Node tempting Engine
Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.
Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. The request usually only takes a few milliseconds, but that ultimately depends on a multitude of factors:
Your internet speed
how many users are trying to access the site and
how optimized the website is, to name a few
Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.
It doesn’t matter if the new page only has a few items that are different than the current page, the browser will ask for the entire new page and will re-render everything from the ground up.
How client-side rendering works
When developers talk about client-side rendering, they’re talking about rendering content in the browser using JavaScript. So instead of getting all of the content from the HTML document itself, you are getting a bare-bones HTML document with a JavaScript file that will render the rest of the site using the browser.
This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development.
See Examples HerePratical Example
Basically template engines in Express are mostly used for displaying 404 and other server error messages. I find them ideal for such use cases. Using template engines for complex front end rendering is bad and not a good practice.
Express JS is a web framework on top of nodejs http module. Whereas Angular JS is a front end framework which doesnot depend on NodeJs server to run. Conceptually both are similar in few features like routing whereas implementation is different
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am trying to find out real need of Angularjs framework use with ASP.NET MVC. As I am not wrong, ASP.NET has it own ans strong routing engine, MVC framework and it works as loading views (templates) into master page.
Angular's data binding feature (+1 point).
I understand and recommend to use WebAPI with AngularJS as in that case webAPI only provides data and not frontend(views).
I see couple of articles and blogs, and most of all say about how to use, and I am using too, however now I came across this question WHY? and really required?
May be my question is not up to the level, however can have valid point.
AngularJS and ASP.NET MVC do perform similar functions. But they go about it in very different ways.
AngularJS does its work on the client-side while ASP.NET does its heavy lifting on the server.
So what?
The difference between these approaches leads to a bunch of differences in implementation and user experience. In general here are some of the Pro's and Con's:
AngularJS = Client-side execution
Pros
More responsive page reactions to user changes
Easier to maintain state: Client can keep things in memory for life of app.
Cons
Longer load time on initial page load.
May need to write some validation twice, since you should still validate on the server side.
Dependencies on client-side environment, which can be harder to control than the server. (For example, your code could run slowly because the user's computer is slow.)
ASP.NET MVC = Server execution
Pros
Uses well-known POST and GET requests for every page load.
State is cleared out on every request, which can be more predictable (but this is also a pain.)
Server environment is more easily controlled than client environment.
Provides easier tracking and logging of behavior.
Can usually use same objects and language that back-end layers are written in.
Cons
Requires more network traffic, as every page load must go to server and back. Usually slower for end user.
Each page load is a complete page load. You'll see the navigation bar flash as the page is reloaded.
State is cleared out on every request.
There are many other differences but these are the first to spring to mind.
I have done AngularJS with ASP.NET MVC, in fact what I usually do is a combination of Angular + MVC + WebAPI.
I usually have a ASP.NET MVC View for each angular application within my whole webpage.
For example. I have a login MVC view that is served to the browser, but that page has other functionalities in it, like a send feedback form, and other user interactive features that dont require the MVC view to change, for those functionalities, I use angular to send AJAX calls, manipulate the DOM, etc.
I would have another MVC view when the user is logged in, and within that view another angularjs application, here, if needed I could have a ng-route views within the MVC view if neeed.
And another angularJS app in an additional MVC view, etc, etc, you see the point... all the AJAX calls from angular are received by the WebAPI controller in the back end, and the MVC controller just handles the change of MVC views.
It would depend on your specific project if you want do lots of code in razor sintax before serving the MVC view, or if you would leave that to angular at the front end.
My two cents.
Edit:
I guess I never answered the question why use it this way? Because it works great and it allows you the FLEXIBILITY to go heavy on the code on the razor view, or heavy on angular/javascript side >> which I always do =)
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.
First of all i am confuse for my project whether it can use angular.js or not, although i have started using it and i created some customization module with this but when i started applying it for all project i got stuck on many things.
My project is a order taking project and it has structure like this.
In the index page it has 3 panels.
left panle that draws all categories
middle panel that draws all category specific productes
and right panel that draws all the basket items with calculations.
On product click there also appears a model that draws all the customization.
I am using MVC-4.
Every thing on index that includes some layout is a partial view _leftpanl, _middlePnl, _rightPnl, _customziaion.
My concern is.
If i define the routes to the module i created how to fix on ng-view because per scope there will be one ng-view only. and my application load atleast 3 partial views to index page at the same time. So how would i fix on ng-view.
Just gimme some guide lines that i should follow to create this kind of application with angular.js.
Or it is not possible with angular because i think it is not a single page application.
Use the Angular-Breeze SPA template provided by the ASP.Net team http://www.asp.net/single-page-application/overview/templates/breezeangular-template
Don't mix up the Razor view/partials with Angular. Use ASP.Net MVC to manage only the REST interface and use AngularJS to embrace the presentation layer.
Learn the Angular Routing and Templates to mimic your requirements.
https://egghead.io/lessons/angularjs-routeprovider-api
https://egghead.io/lessons/angularjs-ng-view
It seems you have a problem to define what you really need.
AngularJS primary purpose is to do some Single Page Application. Which is, code only in HTML/CSS/JS in the front-end, and reuse your abilities in the back-end to produce DATA only (REST-json is the most classic but you can choose whatever you want).
So if you use a tool outside its primary purpose, you have to do some compromises : Of course you can mix backend template with AngularJS, but in this case, you can forget the router and ng-view.
Use AngularJS if you think you have some complex web interface. If it is only some static text, or even a few input forms here and there you don't necesseraly have to AngularJS, you can just use your classic server-side display rendering.
You could use ng-include to include each of your three partials into one view. Then in each partial view you can specify the controller with ng-controller. For creating the modal popup I would probably use ui bootstrap's modal
Alternatively you could use ui-router to create multiple parallel views.
I have following guidelines here which i hope will help you.
Do not mix Server Side MVC and Client Side MVC. AngularJS is primarly meant to augment the HTML and browser capability. The two-way binding of angularjs is excellent and provides lots of dynamic behavior. MVC4 scores best when we have to do lot of server side processing using the .Net platform capabilities.
But as you spent some good effort on this project and the corresponding technologies, there is a way out. Convert all your Controlller Actions in MVC4 to produce JsonResult and when the angularjs needs data use that, e.g. in $http.get( .
I am currently using the Backbone philosophy which involves dust.js for template style. Recently I came across AngularJS, which extends the HTML syntax with custom elements and attributes.
Cons of Backbone+dust.js environment:
Upgrading components is time consuming.
Module specification and identification is not easy.
If I move my functionality to AngularJS will it be helpful or does it feel the same?
Can anyone explain to me what the major differences among these two libs are, as they seem similar to some extent?
dust.js is purely a templating module. So, it allows the combination of json with a template to deliver html output.
Angular.js is client side framework that allows binding of logic to variables defined in a template (your page).
So, with dust.js you are responsible for deciding when to run the json through the template. Typically you feed in the json on the server (or client) and ask it to render the results.
With angular.js when the model (the json) changes the framework re-renders as appropriate. Triggers for that change could be user actions (such as filling a form in) or it could be due to loading some fresh json from a service.
Typically you would use angular.js if you want a single page JS app (think gmail). dust.js is perhaps more akin to a traditional approach with multi pages with content driven by passing in json.
You could even use the both of them in tandem - server side rendering using dust.js with dynamic client side logic in angular.js.