I am a jquery developer, now I am learning angularJS through tutorials point, I didn't understand the concept of the angularJS service and factory. Please advise me where can I get exact details on this.
Advance thanks.
If you don't have a fundamental understanding of MVC frameworks, I would recommend first understanding the Model-View-Controller concept. Assuming you have an understanding of MVC:
Both sort of act as your 'models'. Ultimately, if you so choose, you can use either or in most cases. However, the main difference between a service and a factory is that a factory is intended to return an object, that you will interact with. Whereas a service actually gets initialized using this, and you will interact with the service using it's namespace followed by an attribute on the service.
I reccommend the article below. It really helps highlight on the difference in a way that's easy for angular newbies. I find myself referring to it from time to time, and it's currently the top result on google. Check er out,
http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/
At the end of the day, I typically find myself using services more. The use cases will vary, and like I said earlier, in most basic applications there is a good chance you could get away with using either/or.
Providers on the other hand are intended to be used quite a bit differently. Refer to the article though, as he does a much better job of explaining the nuances.
Related
I have an AngularJS 1.3 application that will I suppose eventually move to AngularJS 2.0. I've watched the videos from ng-europe and I understand there are many changes. As I expect development to continue with our AngularJS 1.3 code for the next 12 I would like to hear if anyone has any specific suggestions on preparing for 2.0.
My application is simple in that it creates no directives. In particular I would like to hear any tips on how I should go about creating controllers to get ready for them being very different in 2.0. Should I eliminate all references to scope in my controllers. Should I move everything to services?
I hope for some useful suggestions but of course specific ones so this question does not get closed.
Thanks
I think that so little has specifically been announced yet, and there's so much potential for it to change that it's a hard question to answer, e.g. check out this issue for an example of something quite fundamental that's likely to change since the ng-europe announcement.
Within my team we're trying to take the following approach:
Try not to use $scope (controller-as syntax).
Keep your controllers as light as possible by using directives to encapsulate UI functionality and services to deal with data models / API calls.
Use the new syntax for one-way binding where you don't need two-way binding. One-way binding will be the default for Angular 2.0.
Write some unit tests! It'll be much easier to do some significant refactoring if you have some confidence that your code will still work :).
Not only should that help with the move to 2.0 if / when that happens, but it should help your 1.3 apps too!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
Learning angular is a pretty frustrating process. I've just started the journey down this endless road a couple of weeks ago. I've gone through the official tutorial on the angular website, watched the first 40+ videos on egghead.io and read through several other tutorials and examples. I'm new to angular but have a good amount of experience with javascript, jQuery, and knockout, but even after all of the research and examples I've gone through, I still can't piece together even the simplest angular app in a real-world situation.
The problem is that most of these tutorials and examples try to show all the different parts of angular, including controllers, directives, filters, services, $http/$resource, routing, animations, etc.so you end up with this one or two controller app that doesn't have any substance but it incorporates the basics of all of these features. Now, strip away all of the features that aren't really needed for a simple app like $resource, routing, and animations, and add substance to the business logic and data management, and you quickly can see how many holes exist in these tutorials.
For example, a tutorial will show how you can share data between controllers using services. It will go over creating the controller, and using a service to get the data from a server using $http or $resource. Then it will show that even though the request for data is asynchronous, there is rarely a need for callbacks because the data-bindings will just be empty until the data arrives and then magically filled in. Now you have a reusable service to get data in all of your controllers.
Wow! everything is so simple and clean, and it just works! Angular is awesome! Then, of course, when you go to write an actual app that needs more than one controller, and the controllers all depend on the same data, and you add something called "business logic" that is also shared and uses this data, you immediately realize things aren't so simple.
First of all, as soon as you add business logic that has to use the data from the server (like with any real app), your clean code with no callbacks is broken. You now have to implement callbacks everywhere, because you have to wait for the data to arrive before you can use it. Second, prototypal scope inheritance becomes unreliable because you don't know if the data from other controllers has loaded yet or not. Worst of all though, there is nothing in these tutorials about how you are supposed to keep the data in sync between controllers, and with the server. If the data is modified in the scope of one controller, somehow all of the other controller scopes need to be updated as well...
These are just some of the complexities that are introduced even with a pretty simple app that doesn't even use routing. I'm trying to make a simple calculator that doesn't persist data, and I am stuck with all of these problems and questions and can't find any real solutions.
Can someone please point me in the right direction of a good tutorial, example, or book that will fill in these missing holes without getting into complex parts of angular that my app doesn't require?
Thanks in advance and sorry for the rant, this has been very frustrating :/
I am far from being an angularJS expert, I am actually in the process of learning too. However, we are almost done with our first angularJS MVP at work so maybe I can share some of my experience. Here are a few patterns I learnt
Your controllers should be minimalist and call services and factories.
Controller actions are triggered by $emit and $broadcast which is what keeps everything in sync. I have controllers with just a list of $scope.$on('onCustomAction',function(event,params){ $scope.myObject.doSomething(); }). Ideally, it should be a minimalist list of those.
In ng-click, you should have methods like myObject.fancyMethod() where myObject is part of the '$scope`.
Put small pieces of reusable html that have their own little controller in directives. I am quite late on that but I am starting to have a few.
Use ng-include for large pieces of html that you need to move around (ie: modal windows, main content, sidebars etc).
Remember, if it's not in the $scope, it might as well not exist.
Services can call other services and can be used for singletons and instanced objects. They should be the meat of your code.
Hope this helps. Feel free to argue each of those items.
As someone who was experiencing the same type of angularjs frustration. I get it. What helped me immensely was Jeremy Howard's 4 part tutotial, "Angularjs End to end web app in under an hour". It uses ASP.net but I am sure most of the back end examples would be easily reproducible with any other framework.
Here is a quick and dirty laundry list of why I found this useful.
Example is a Todo CRUD app that could be used as a template for most other web apps.
The videos move at a reasonable pace and are broken down into logical functional areas.
Jeremy uses some of the techniques you described above that are in other videos such as promises, directives, factories, services, link functions, controllers, etc. However, the examples he uses do have substance as they work within the context of the todo app.
Lastly, it becomes clear in watching Jeremy going through his tutorial that being very organized in how you structure your back end will make your front end angular app so much better and powerful. Think separation of concerns to a whole other level.
I could go on and on but one thing I can say, is that Jeremy's tutorials not only made me better at angularjs but made me better at being a full stack developer.
Do yourself a favor and check it out. You won't regret it. Good luck.
Here is a nice tutorial on data model dealing with your problem:
"Worst of all though, there is nothing in these tutorials about how you are supposed to keep the data in sync between controllers, and with the server. If the data is modified in the scope of one controller, somehow all of the other controller scopes need to be updated as well..."
http://www.webdeveasy.com/angularjs-data-model/
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.
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!
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.