I've been looking into AngularJS and its MVC solution. Typically a MVC framework uses the HTML structure itself to bind to a backend data model. In AngularJS's case this is done with Directives, which work dandy for straight HTML.
For my scenario I have a data model that will be transmuted into a visual representation on an immediate mode Canvas. Then the visual items rendered will also need to be interacted with in order to edit the values in the backend data model.
What is the best way to achieve two way binding like this between items and the item values in a data model within a MVC framework?
Angulars strength is that it deals with the DOM for you without you having to worry about it. If you were to use SVG instead, you could let Angular deal with updating the view since SVG is DOM but if you need to use a canvas instead, Angular can't handle the drawing for you.
You can still benefit from using Angular by using watches and redrawing your canvas when data changes, but you need to deal with the drawing yourself.
Related
I am new in angular js. I want to know difference between MVVM and MVC framework and which one is best for AngularJS.
I know about MVC and MVVM pattern but I can not find which one is best and why?
Thanks,
Hitesh
In MVVM, the UI (the View), faces the user and takes user input directly. Within the View, Commands within the ViewModel (which is the DataContext of the View) are triggered by this activity. Control flows to the ViewModel which interprets what the View has sent it and prepares its Models. After control flows back to the View it updates itself according to changes in the Models. If a new View is required, the ViewModel communicates this with the NavigationService (or whatever method of navigation your application uses), which is the purview of the Window or Frame--UI components. You can see that the ViewModel isn't first and last to act; the View plays a much greater role than in MVC.
The architecture of WPF/Silverlight is the reason why things are done this way. The command, binding and navigation infrastructures can't be controlled/replaced by the Controller; they are tightly integrated with the UI. So the Controller must sit below the View and take a more passive role.
AngularJS is MV*(MV what ever) either it can be MVC or MVVC.
Model : Data you want to update.
View : HMLT/Template.
Controller : function which maintains application data and behavior.
Example for MVC is binding data to view using Interpolation {{}}.
You can update view(html) using controller.
Example for MVVC is two way data binding using ngModel.
If you bind a ngModel to input tag.
Value changed in input filed is updated in controller.
Value changed in controller is updated in input field.
Is there a way to introduce two-way bindings in a Meteor application, without adding AngularJS?
I would like to have a functionality in my input elements (text field, drop down, checkbox, etc...) where a changed value is saved back to the database automatically in response to a blur, item changed, or other such events. I understand, that Angular has nothing to do with auto-saving, but, having a two-way bindings in Meteor would bring it one step closer to my "ideal" scenario.
Try the autoform package. If that does too much for your needs, the simple way is detailed here on this SO answer: Is it possible to do 2 way data-binding on meteor
Hi I am new to AngularJS. I have great web app already running with JQuery and jQuery UI.
Now I want to completely get rid of JQuery and am going to migrate to Angularjs because of its MVC (MVW) pattern.
So my jQuery application is running with EJS for templates and entirely DOM manipulation. But when I think about Angular js, I have doubts. Can I still use EJS or not?
So please guide me whether I can use or not.
Another doubt is, let's assume I have list page. It is updated dynamically, and it will display 10 records first then based on user scroll, the next 10 records will be appended in the DOM after AJAX. Can we append to the DOM dynamically using Angular?
How do I achieve these kind of things in Angular?
You can use EJS (server or client side) in combination with Angular but there's no need and you'll probably overcomplicate things. AngularJS is very capable for manipulating the DOM by itself in a very separation of concerns kind of way. The most elegant way to work with Angular is to have a RESTful backend and just serve some static html/js files from a webserver.
As for endless scrolling, there are tons of ready to use plugins (modules) to choose from or you can write your own. Basically this will need a view with a ng-repeat directive to display the currently loaded items and a directive that will notify a controller/scope to load more items when the user is scrolling down.
A nice simple article can be found here.
Similar questions:
Mixing angular and asp.net mvc webapi
Actual use of jade template and angularjs
Yes of course you can use EJS with Angular JS. You might want to have a look at this;
https://gist.github.com/jrmoran/4277025
And about your DOM manipulation question. Yes you can append DOM dynamically using Angular JS. Angular JS have a strong feature of two way data binding which dynamically updates its DOM content when a model variable changes.
Have a look at this:
http://docs.angularjs.org/guide/databinding
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( .
Is there a good model for reusing UI components written in Backbone.js?
My team maintains a large web application that is mostly written in server-side code, but we're finding that we're doing more and more client side work. We have several large UI components that were written in jQuery, and they're really too complex to maintain with just a DOM manipulation library. We need a client-side application framework.
One nice thing that the jQuery plugin model offers is ease of reuse. You can just create a few HTML elements with the appropriate IDs and wire them up with $(function(){}). We'd definitely need to achieve something similar with Backbone if we adopted it.
Most of the examples out there show how to build an application entirely in Backbone, which is great, but we're not going to be reimplementing our app in JavaScript anytime soon. Our use of a client side framework would be confined to complex UI controls with a lot of business logic in them.
One other consideration is that we have a JavaScript bundling solution in place. I'm concerned that bundling a lot of Backbone elements together could mean that we end up with headless controls loading and running in the background.
Can you build Backbone controls and package them as jQuery plugins? Are there any good resources available about this kind of architecture?
For me one of the best parts of using Backbone is essentially what you are describing. The object-oriented-ness of Backbone makes it really easy to build out a specific 'widget' or other reusable code piece that you can bind events / templates / data to. You wouldn't necessarily want to make these jQuery plugins, simply because it wouldn't provide much benefit over Backbone's syntax.
For example, you could build a control class, and bind a click event to trigger the foo method on it.
var Control = Backbone.View.extend({
id:null,
events: {
'click' : 'foo'
},
foo: function(){
console.log(this.id);
}
})
Every time you want a DOM element to use this behaviour, you create a new Control object, and bind it to the element using jQuery.
//I say foo when you click me
var foo = new Control({el: $("#foo"), id:'foo' });
//I say bar when you click me
var bar = new Control({el: $("#bar"), id:'bar' });
(You feasibly could wrap those calls into a jQuery plugin)
This a really simple example to show what the workflow would be, you can get really intense with Backbone's models/collections and Underscore's templating engine to create some really robust dynamic & reusable classes.