Thanks a lot! You saved a lot of hours of trial and error. My spa works seemlessly now. On Feb 12, 2014 4:46 PM, "Luke Kende" <[email protected]> wrote:
> 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 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.
