Rails 4 nested attributes with AngularJS - angularjs

I have been searching online and have not been able to come across an example. Does anyone know of any resources for using nested attributes with AngularJS?

There's a lot of good information here and I've found it pleasant to work with. Their library does a lot of wiring for you, and I'm just starting to play with nesting the attributes but I did read on a blog that this library does it. I'll post more as I know it.
https://github.com/FineLinePrototyping/angularjs-rails-resource

Alright just did some quick reading on Nested Attributes in Rails here: http://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods.html
As far as I know there's no such equivalent provided with Angular. Generally speaking angular works with JSON encoded data coming back from requests like
{
"id":1,
"name":"Shaun"
}
and otherwise data is stored with Plain old javascript objects (or specific object types if a developer so chooses to create them).
There's lots of good info on various ways to use JavaScript on Crockford's site here http://www.crockford.com/javascript/javascript.html
But so far as I know you'll have to roll your own solution. I did a bit of googling on Nested Attributes and javascript and mostly the solutions/topic seem focused around Backbone.js but you might be able to adopt the same concept and just replace Backbone.js methods with their angular equivalents.
As it stands today angular doesn't really do a whole lot when it comes to your model outside of watching for property changes and updating things during a digest. My understanding is working on better functions for the models is a large part of what's in the works for version 2.0 whenever that hits.

Related

Why would you use lodash in AngularJS?

Simple enough question I think. I see people raving about it but I haven't seen anything on the "why" use it. It doesn't seem to me (from my naïve outside perspective) ng-repeat, if not in that nested layer do ng-repeat inside another. I looks like that it doesn't add functionality that angular doesn't already have—I'm sure I'm wrong—
I see the term "lazy loading" being used with it and it doesn't seem like it's that much easier after seeing there docs. What are some things lodash makes significantly easier in AngularJS specifically that I would make it work adding another lib to my project? And what can you do with it that you cannot with angular out of the box?
They're just not the same, and exist for distinct reasons. I think you already know what AngularJS works for, so about your questions:
What can you do with it that you cannot with angular out of the box?
Well, if you need to deal with several data in structures like arrays, objects or mixed/nested shapes, lodash will save you a lot of time and effort.
Maybe there's a lot of items in collections which should be presented to your client application in some particular way, you would have to write a lot of JS code in Angular controllers or services with out the aid of lodash.
If there's a lot of logic tied to your data structures and/or complex algorithms and coding workflow, go for lodash.
Lodash is a great tool, you can get some intro here and of course, just check out the API reference. You can use it at everywhere, either Angular or any other framework, and of course, also at Node too!

Get AngularJS template bindings

I am working on something like CMS based on AngularJS templates. I need to get bindings from a template so my users are able to fullfill those properties for specific pages.
So how can I get all bindings from a template?
You can't... using techniques AngularJS itself provides. Your question is just beyond the scope of the functionality the core devs thought to provide.
#bmceldowney is correct - a regex could be used to parse templates, although I think that would be challenging for a few reasons:
AngularJS templates can contain all sorts of complex expressions, not just simple vars. How will you deal with filters - and if you won't, you lose a lot of value here...
AngularJS can lazy-load templates and this is a common practice. You wouldn't want hundreds of useless templates floating around just in case they might be used at some point. How will you deal with templates that haven't been loaded yet - that you don't know exist?
If you're building a CMS that implies data management of some kind, and that's not going to get stored in the front-end because it would be useless there - nobody else would ever see it. So aside from the editing cycle itself, it seems like something to be solved server-side and not with AngularJS.
All that said, my suggestion would be to do exactly that - work out something server-side where you can access templates as raw files just by scanning some folder where they're stored, use regular expressions to find the template variables, and you're going to have to be clever with how you parse expressions and what you'll support here. Then you can prepare appropriate data objects to pass down to the client via an API for it to support the actual editing.

Can i use ReactJS with AngularJS to take care of the 'view'?

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...

Can you use AngularJS with Parse.com?

I am new to phonegap development & I am trying to pick a framework to use. I'd like to use AngularJS as I've read good things about it, but I'd like it to work with Parse.com as a backend. I noticed that one Parse.com they don't specify any compatibility with Angular, and all their documentation and Javascript API requires Backbone.
I know AngularJS supports http, so I can communicate with Parse using the REST API. But is this going to end up being a mess & will I save myself time & stress if I use Backbone with the Parse.com Javascript API instead?
I have not worked on Parse, but I believe as long there is a REST API available AngularJS can very well integrate with Parse.com. These links substantiate that fact
https://parse.com/questions/does-any-know-of-any-angularjs-sites-that-are-built-with-parse-that-are-open-source
http://brandid.github.io/parse-angular-demo/#/
Said that, AngularJS is a very capable framework with a steep learning curve. The simple stuff is simple but one needs to put ones head down and start learning the not so simple stuff like directives once one starts building any decent size application. The more you invest in learning AngularJS the more rewarding it becomes.
It has a very clean separation in terms of view and code. The code is further organized into modules, factories, services, controllers, directive, filters etc.
But still nothing stops you from creating a mess with the implementation :) What I have realized over the time is even if you create mess within AngularJS the effects are localized rather than affecting the complete application, due to the modular nature of Angular.
I suggest you try creating or looking at some samples with AngularJS (such as TodoMVC)
This is how i felt learning and implementing AngularJS solutions
Thanks for bring up our Parse x AngularJS boilerplate - we've just updated it today too.
Our entire site getbrandid.com is built with Parse x AngularJS and no servers of our own.
We built this boilerplate after because having spent a few years building BRANDiD, we had a lot of best practices to share with the Parse and AngularJS communities. We think it is a match made in heaven, and is the fastest way to build powerful complex, highly maintainable serverless apps.
We've basically extended the Parse SDK to support AngularJS bindings, we've eliminated a ton of boilerplate code, and most importantly, we've established an architecture for large serverless apps using Parse and Angular.
I highly encourage you to check it out -
Parse x AngularJS Boilerplate
Actually Parse's documentation does not say that you have to use Parse with Backbone, it just says that some stuff are compatible with Backbone classes, like the Collections object, which might be useful ONLY IF you use Backbone.
The big hassle of using 3rd party stuff inside angular is its lifecycle, as it uses POJOs and only watches for changes in these objects at specific points in time - Check the Scope Life Cycle documentation for more info.
Given that, when Parse returns its callbacks, AngularJS might no longer be observing those Parse objets, so you need a way of telling angular that thing changed, and you have to do it inside the digest loop, for example using $scope.$apply
I created a small wrapper for Parse.Query and Parse.Object to avoid the need for $scope.$apply all the time, let me know if you find it useful: https://github.com/felipesabino/angular-parse
The easiest way I found to communicate with the parse.com backend is to use the jimrhoskins/angular-parse Angularjs module that replaces the (backbone) ParseSDK.
Ads instant :-) I included it in this angular/parse boilerplate.
We've been using this method fairly frequently. We decided to document our experience. Its a 2 part series on building angular apps with a parse backend. Hope it helps!

How to implement Backbone boilerplate with views

I am trying to learn backbone, however truth be told, I'm feeling a little overwhelmed. Everywhere I look it is being done in a slightly different way, each with more frameworks and plugins to learn. So I have decided to put my faith in Addy Osmani and am reading his Backbone Fundamentals book. I have followed his recommendation and used the Backbone-Boilerplate. However for whatever reason, I have been unable to successfully install Grunt BBB so I cannot download the working examples.
What I am trying to do is follow this router section and use views. http://addyosmani.github.com/backbone-fundamentals/#router.js.
The problem is that I think these instructions are incomplete. For a start the collection.fetch() variable is in the wrong scope, and I really am not understanding where I need to place the views and how. I am pretty sure that if I could see a working example of this I could understand it, but as I said, everywhere I look its a different implementation.
Does anyone know how to use the backbone-boilerplate with routers and views? Are there any working examples anywhere?
Let me make a suggestion. A couple of months ago, I was where you are now: trying to learn backbone and trying to follow best practices while I did so. Like you, I came across Addy Osmani's book and like you I tried getting stated with backbone-boilerplate.
After much stumbling around, I eventually concluded that backbone-boilerplate was not something I needed to have while I was just learning backbone. It is now, only after having created a fully working, non-trivial CRUD application that I start to see how I might incorporate backbone-boilerplate. I think you probably need to be asking the questions that backbone-boilerplate answers (How can I break up my application into modules?, etc.) before you attempt to incorporate another framework or plugin. The same goes for Backbone.Marionette: great library, but you really need to have something to apply it to before using it.
Starting out, I would suggest having just a single file for all your backbone code.
One of the things that really helped me out was playing around with and extending various jsfiddle demos people had created using backbone. A simple google search will turn up quite a few. I found it a great way to learn as I was able to manipulate working code and get immediate feedback on what worked and what was allowed.
And although backbone is a client-side library, it's often simpler and faster just to ignore html and write stuff out to the console.
Finally, if you're willing to pay for it, I highly recommend Liam McLennan's set of backbone.js training videos on pluralsight.

Resources