I am working with some data and I think that the best data structure will be a recursive parent/child relationship to represent a hierarchy.
My question is:
How to best return this data from my API to work nicely with angular?
How to use the angular to convert this into my DOM?
Many thanks
Toby
Related
What's the best way to define relationships inside a Marionette/Backbone application?
I know there's Backbone-relational, but it hasn't been updated for over 6 months... Is there another way to create relationships in Backbone and/or Marionette?
Cheers!
As far as i can see the only libraries that look decent are backbone-associations and backbone-relational. In my opinion backbone associations is the best one since backbone relational hasn't been updated for a long time.
Currently am writing all my business logic inside the view class which make my view class unmanageable. Am planning to create Backbone object and move all the business logic there and invoke it from view class. Please correct me with right way of thinking
Backbone in general does not provide an entity named Controller, this is one of the reasons which Backbone called MV*. Generally user interact with views, you know well this interact means change and update over models.
"So does Backbone.js have controllers? Not really. Backbone’s views typically contain
controller logic, and routers are used to help manage application state, but neither are
true controllers according to classical MVC." (Addy Osmani Book's)
so i think your way is not incorrect, but you can improve your project structure through this solutions:
Marrionette (and also Thorax ) is a excellent framework that provide such a excellent structure for your app. You can read this annotated code and get some tip from it.
You know certainly AMD a nice api to provide modular pattern in js. Require.js a nice tool for organize your code. For more information i recommend check TodoMVC + Backbone+Require code.
I'm a little confused about mvc frameworks for the web...take angular for example. Are the "views" in angular the (tweaked out) html and CSS and the "models" just javascript/json-like objects that contain data like regular Ajax data? It seems to me that this is how it is (maybe not in full detail, but roughly it seems like this is it). Does angular even use CSS? And I don't really understand the controller.
I know javascript to a degree where I am not a total beginner but these frameworks make no sense to me, it's like everyone is speaking Greek or something when I look up tutorials. It would help to know I'm sort of on the right track or whether my thinking is wrong, in a ballpark sense.
Help is highly appreciated. Thank you.
It sounds like you're on the right track. In Angular specifically, yes, the views are written declaratively in HTML and special tags and attributes called directives. Models can be anything; often you'll see examples in Angular that use plain JavaScript objects as the models, but in a more complex app you might have special objects that have methods specific to the application. Controllers are just there to tie the two together—they take the models and make them available to the view via the scope, and events (like ng-click) call methods on the controllers which make changes to the models.
AngularJS implements Model-View-Controller paradigm by connecting your HTML (views) to your JavaScript objects (models) via two-way data binding.
It extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. You can also create your own directives, crafting reusable components that fill your needs and abstracting away all the DOM manipulation logic. Like most JavaScript MVC frameworks, it lets you work with any server-side technology as long as it can serve your app through a RESTful web API.
You can find more info here:
http://www.angularjstutorial.com/
http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with
http://mrbool.com/mvc-in-angularjs/28962
We got an app written in AngularJS but we have run into performance issues as the app tries to load a large amount of data from the server and lets the user play around with it (read a complex DOM). Surfing around and reading about it seems that two-way data binding, intrinsically called $watch expressions etc of AngularJS is posing a problem that we are unable to surmount. And then we have come across fb's ReactJS that promises fast view rendering.
This has set us wondering if ReactJS could be used with AngularJS to just take care of the 'view' part. Would be very grateful if anyone could provide some insight or direction regarding this?
Thanks
This tool (single-spa, a javascript framework for front-end microservices) allows you to use different libraries and frameworks combine. In this way, you can save your old business logic.
Have you tried ngReact? I haven't tried it myself but it seems to do what you want (using React components in Angular).
i'm playing with that now to combine angular directives with react, but for my app in pure angular on large data set, i used angulars for $compile and rendering and it works pretty fast, but data manipulation and whole building of this part of HTML is done by d3.js, maybe you can look on that lib...
A couple of hours ago Twitter released Flight, a component-based framework for JavaScript. Its components are plain DOM elements and communicate through plain DOM events, which its really nice.
I just wonder... can I combine this with AngularJS? If I understand both frameworks correctly I can create "new" elements with AngularJS which could be use by and contain Flight components. And these components can be populated with data by AngularJS.
To put it another way: I could AngularJS like I normally would, but the directives are "decorated" Flight components. (Use Flight to create views and use AngularJS for everything else.)
Would that make sense? If not... I don't get the purpose of Flight :(
I understand you want to do the following: Decorate AngularJS directives with Flight components and Flight views.
You could probably create these Flight components within a directive and gain an advantage from the data-binding Angular offers. However, judging from the following:
"Flight enforces strict separation of concerns.
When you create a component you don't get a handle to it. "
It seems like Flight does not promote that you speak to these components via data-binding.
Furthermore, directives can be seen as components themselves already. And as for creating views, in AngularJS the DOM is already the view, what reason specifically would you have to use Flight views on top?
Also since the AngularJS is not subscribed to the events that Flight uses it has no way of knowing when the DOM has been modified (I am not sure of this please someone more knowledgeable correct me if I am wrong).
As for making sense. It does not look like Flight is meant to solve the same problems as Angular. I think AngularJS directives solve the same problem as Flight components, but offer a lot more.