I won't claim to be a guru with Angular, I just have worked through these sorts of issues. What I have found is that Angular gives you a general framework for structuring your app, but not necessarily a guideline on how to do it. It's fairly versatile in letting you determine how to do it.
That said, I use value() very rarely, as i don't see the benefit of it over a service since it only holds one reference. With a service I can setup all sorts of data structures. I only use a factory when I need something new'ed such that each time I inject it in a controller, I'm going to call new. I use it with a timer object I created that can count down and up and bind to the UI (like showing you have 10,9,8,7... seconds to confirm, or, you have been active for so many seconds). When injecting it into a controller, I will call $scope.timer = new TimerService(); In this way, I don't have a shared "state" with the timer, only a way to create a new instance of something I will use in several places to perform some functionality. I have not used providers, but understand they offer more abstracted functionality. I went through a three month experimental phase and learned a lot about Javascript that I did not before. I still don't always understand it all, but enough to get things working well. Good luck! On Wed, Feb 12, 2014 at 7:28 AM, Yonatan Kra <[email protected]> wrote: > Thanks. It makes much more sense now (as usual with things that work :)). > How about "value"? Would it work the same? > e.g. > myApp.value('myValue',{ > myStatus: "ok" > }); > or only with a service ( > *myApp.service('myService',function(){* > *var myStatusObj = {myStatus: "ok"}; * > *return myStatusObj;* > *});*) > > Thanks again > > (I'm sorry for the newbie questions, but I'm still trying to get the > differences between factory/value/service/provider/constant - that's my > mission on my 3rd week in Angular...) > > > On Wed, Feb 12, 2014 at 3:55 PM, Luke Kende <[email protected]> wrote: > >> I wrote my example terribly (the service name should obviously be >> consistent).... but yes, the problem is due to primitive reference being >> passed by value. A rule to follow is always pass an object as javascript >> will maintain reference to the object which is only created once in your >> service (when initializing the app) and exists for the duration of the >> page. So change your example to: >> >> function EmailService(){ >> var myObject = { >> myStatus: "ok" >> } >> >> return myObject; >> } >> >> function InboxCtrl($scope, EmailService){ >> >> //this will get lost if changing myStatus on scope because copies the >> primitive value >> $scope.myStatus = EmailService. myStatus; >> >> //this will not get lost as $scope.email now points to the same object >> as defined in the service >> $scope.email = EmailService; >> $scope.email.status = "sweet"; //any change to the object locally >> reflects back to the service because they are the same object, even though >> the property itself is a primitive. This will be true no matter the view >> changes >> } >> >> Somewhere is written in an angular doc the "dot" rule. This kind of >> thing trips a lot of Javascript developers up. By the way, no, the service >> doesn't handle the view at all, it is just injected into the controller >> that is loaded with the view. It will make sense more as you use it and >> explore it. >> >> >> >> >> On Wed, Feb 12, 2014 at 12:53 AM, Yonatan Kra <[email protected]>wrote: >> >>> Hi, >>> Thanks. That's roughly what I did. I have 2 questions. >>> The simple one: Are you handling the views from the controller itself >>> (by changing the view in the service)? >>> >>> The "more complex" one: >>> >>> Let's say I have this route defintions: >>> >>> 1. $routeProvider.when('/inbox', { >>> 2. templateUrl: 'inbox.html', >>> 3. controller: InboxCtrl >>> 4. } >>> 5. }); >>> 6. $routeProvider.when('/otherPage', { >>> 7. templateUrl: 'otherPage.html', >>> 8. controller: OtherPageCtrl >>> 9. } >>> 10. }); >>> >>> >>> In InboxCtrl I call function (*InboxCtrl($scope, MyService)*) and do >>> all kind of manipulations. Let's assume a very simple service here like: >>> function EmailService(){ >>> var myStatus = "OK"; >>> return {myStatus: myStatus}; >>> } >>> function InboxCtrl($scope, MyService){ >>> $scope.myStaus = MyService.myStatus; >>> } >>> And it is bound to an input in the view, so user can change myStatus. >>> >>> Now a person clicks on a link that leads him to "otherPage" (with *function >>> OtherPageCtrl($scope, MyService)*). >>> >>> When I call MyService.MyStatus in the "otherPage" controller, I get "OK" >>> no matter what was its value in the "Inbox" page. >>> >>> Is that a glitch in my code? Or is that how it's supposed to be? >>> >>> Thanks >>> >>> On Wed, Feb 12, 2014 at 8:53 AM, Luke Kende <[email protected]>wrote: >>> >>>> Yes. Use a service. If it's not working for you then you are coding >>>> it wrong. My guess is not understanding object inheritance and losing a >>>> reference to primitive values >>>> >>>> My examples are not full blown, but hopefully the details will help you >>>> see what you need: >>>> >>>> function EmailService(){ >>>> var emailObject = { >>>> emails: [], >>>> currentView: 'inbox', >>>> folders: [] >>>> } >>>> >>>> return { >>>> emails: emailObject.emails, >>>> setCurrentView: function(view){ >>>> emailObject.currentView = view; >>>> }, >>>> folders: emailObject.folders >>>> } >>>> >>>> } >>>> >>>> function InboxCtrl($scope, MyService){ >>>> $scope.emails = MyService.emails; >>>> >>>> //now whatever you do on the scope will reflect in the service >>>> emails and will remain there when reloaded >>>> $scope.emails.push({'from': 'bob', message: 'Hi Larry!'}); >>>> >>>> $scope.folders = MyService.folders; >>>> >>>> $scope.userClickedFolder(folder){ >>>> MyService.setCurrentView(folder) >>>> } >>>> } >>>> >>>> function OtherCtrl(){ >>>> >>>> } >>>> >>>> On Monday, February 10, 2014 8:40:31 AM UTC-7, Yonatan Kra wrote: >>>>> >>>>> I have a SPA (single page app). I am trying to keep data of one route, >>>>> when moving to another, so if a person returns to the route, he'll see it >>>>> in exactly the same state he left it. >>>>> >>>>> In example, I have an inbox page (e.g. #/inbox). >>>>> On this page, a person can see his inbox, and gets new messages to the >>>>> inbox when he stays on this page. Unread emails are in bold, read emails >>>>> are normal and they are sorted and filtered in a certain manner the user >>>>> has chosen. >>>>> The app gets one "push" of emails from the server, and then updates >>>>> when it runs. >>>>> It works fine. >>>>> >>>>> The problem arises when this person "navigates" away from the inbox >>>>> "page". >>>>> The navigation is from #/inbox to #/other-page - each has its own >>>>> controller and view. >>>>> >>>>> After the person navigates away, and then comes back to the page, the >>>>> page resets - e.g. the inbox starts from scratch, there are no unread >>>>> emails in bold, filters are reset etc. >>>>> I followed instructions given me here, to keep the data in a service, >>>>> but when I get back to #/inbox, the service resets and I lost the data. >>>>> >>>>> How do I keep such data, so the person would see the same inbox page >>>>> after navigating the rest of the SPA? >>>>> Or is there a smarter way than just rebuilding the page with saved >>>>> data? >>>>> >>>>> Thanks >>>>> >>>>> >>>>> >>>>> -- >>>> You received this message because you are subscribed to a topic in the >>>> Google Groups "AngularJS" group. >>>> To unsubscribe from this topic, visit >>>> https://groups.google.com/d/topic/angular/jL-IAlCZEaU/unsubscribe. >>>> To unsubscribe from this group and all its topics, send an email to >>>> [email protected]. >>>> To post to this group, send email to [email protected]. >>>> Visit this group at http://groups.google.com/group/angular. >>>> For more options, visit https://groups.google.com/groups/opt_out. >>>> >>> >>> -- >>> You received this message because you are subscribed to a topic in the >>> Google Groups "AngularJS" group. >>> To unsubscribe from this topic, visit >>> https://groups.google.com/d/topic/angular/jL-IAlCZEaU/unsubscribe. >>> To unsubscribe from this group and all its topics, send an email to >>> [email protected]. >>> To post to this group, send email to [email protected]. >>> Visit this group at http://groups.google.com/group/angular. >>> For more options, visit https://groups.google.com/groups/opt_out. >>> >> >> -- >> You received this message because you are subscribed to a topic in the >> Google Groups "AngularJS" group. >> To unsubscribe from this topic, visit >> https://groups.google.com/d/topic/angular/jL-IAlCZEaU/unsubscribe. >> To unsubscribe from this group and all its topics, send an email to >> [email protected]. >> To post to this group, send email to [email protected]. >> Visit this group at http://groups.google.com/group/angular. >> For more options, visit https://groups.google.com/groups/opt_out. >> > > -- > You received this message because you are subscribed to a topic in the > Google Groups "AngularJS" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/angular/jL-IAlCZEaU/unsubscribe. > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/angular. > For more options, visit https://groups.google.com/groups/opt_out. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
