This was inspired by my friend Mark Tucker aka @marktucker when he hit me about controllers preserving state across routes. This created a great opportunity for me to revisit the post I did a year ago Building a Website with AngularJS – Routes and Partials and not only expand upon the idea but address a few rookie mistakes I made during that dark dark period of my life.
Code can be downloaded here https://github.com/simpulton/angular-website-routes
I hope you like it and thanks for the great question Mark!
Interesting and well done screencast, but i have a question… is it possible to persist views? Ex: using your above site add a fourth link “contact me”, when the user clicks the button “contact me” the url changes to “/contact-me” a form overlays (eg: modal) and underneath the form still remains the previous route template such as the home. Same effect would occur if the user was on “about” page and clicked “contact me” button the url changes (/contact-me) the form displays but underneath the form and still viewable to the user is the about page. Can this be done?
I am trying to figure out what you get by keeping the underlying view in place. I can understand wanting a canonical URL to link directly to a contact page but what happens if someone goes there directly? Then there is no view to persist. What do you show under the modal?
The next UX question I would have is what happens if the user closes the modal? How is the URL supposed to respond? Does it go back to the previous URL? Now we are into some kind of state management which does not exist in $route.
With that said! I think having a contact form that exists as a global modal element could be a good idea from a UX perspective if it makes it easier for the user to submit a question/request/etc. I would probably just make it available without tying it the URL and then have a separate view if someone goes to it directly. You could even use the same partial in the view and the modal. This way you get the best of both worlds. A global form element and a canonical URL without all the messy UX/state overhead.
Does this make sense?
It definitely make sense, thank you for a quick response and i apologize the modal was not a good example if you take a look at this site http://www.iqagency.com/projects and click on contact link a form slides the content down the url does not change which normally it wouldn’t matter to me but in my situation i need to have new url representing the contact form. You made valid points such as where does the user land when they would go directly to that url. Maybe in the case of iqagency they could approach the situation with a url such /projects/contact and careers/contact where the container is projects or careers and the partial nested inside is the contact form.. Therefore a user could land on the projects page and the form would open up but i personally havent seen a site with urls such as that, seems a bit silly but yet from a tracking POV someone could tell that the user went to the contact form X amount of times from the projects page rather than career page and therefore its more important… or something like that.
I have tried different options to achieve my results using ui-router from angularjs ui and just hit a wall(especially when deeply nested), maybe its time to have the designer re-work that concept?
Here is a a fairly simple way around it… use a URL param to signify the contact form should be shown.
http://www.iqagency.com/projects?a=contact // Where ‘a’ signifies action
You could wrap this bit of logic around $location fairly easy in an AngularJS service doing something like this…
http://stackoverflow.com/questions/8648892/convert-url-parameters-to-a-javascript-object
and in the controller do something like this var $scope.showContactForm = UrlService.showContactForm(); which does a basic boolean check a la return url.a === ‘contact’
A different way around the block but as much as I am of being ‘clever’ and ‘correct’… I am an even bigger fan of getting things done! 😀 Thoughts?
Interesting, very well thought-out monsieur savvy, i will give it a go thanks for the help and input 🙂
How would you avoid repeating the “updateMessage” function on each of the three controllers?
Creating that function once on a controller that wraps the ng-view would be a bad idea from an architectural pov?
I try to avoid relying on prototypical inheritance to expose methods because it increases dependencies and makes testing harder. If I moved updateMessage to a parent controller, I could not test the child controller without having to spin up the parent controller as well.
I think because the example is so simplistic it looks like I am duplicating code but in real life, updateMethod would probably be different for each view. I will pose a question of my own. In classical languages, if multiple concrete classes implement an interface that defines a specific method, are they adhering to a convention or duplicating the function? Convention does not mean duplication per say.
Hi Lukas , Can you tell me how to implement the website with angular js.
Ex- I have pages like this
1)Login.html
2)Home .html
3)Contact .html
4)About.html
please tell me how to implement sample site with clear explanation .
Did you watch the video? I am not sure how I could be any clearer than that especially since there is a sample site to accompany it.
Hi Lukas,
I’m just starting out and was following your first edition. I’m wondering about the changes you made to the buttons, changing them to a tags instead? I changed the code to follow your updates in this video however they aren’t working for me…should I be including the $location service as well??
Should they work ok as you have exemplified BEFORE you begin to speak about the factory?
Also wondering where do the controllers for each page come in? Where does ng-controller get placed?
Thanks for the vids – really enjoying them!
Ciaran
First off, great stuff as always, Lukas. I have created a checklist application using the ui-router as prescribed, and it’s very slick, and even better: people are on board with the architecture; however, an obstacle cropped up after blending together two models into one. Can I share some code with you for another perspective? Github? (It’s nearly identical to your eggly (p. II) app, so your help would be of the greatest value). Thanks.
-David
Great stuff !!, I have a question on the state management. I Observed that the state is cleared during the page refresh (F5) so is there a way to persist the state on page refresh
I am a huge fan of angular-storage https://github.com/auth0/angular-storage by Auth0. I use it all the time to store state between page refreshes. Hope this helps!