TodoMVC with MEAN

I created a TodoMVC example to illustrate an implementation with a MEAN stack. You can check it out here: https://github.com/DaftMonk/mean-todomvc/

It’s based on the Angular TodoMVC example, but adapted to use ng-resource and a real backend rather than localstorage. It uses a REST api and polling to update the todos every 5 seconds.

Setting the todo filter based on route

I want to quickly go over a problem I ran into with using routeParams for setting the current todo filter.

At first I used routeParams to set the filter, however I found out there isn’t any way to disable reload of the current controller when a route change occurs. This is as problem because by reloading the controller the todo array gets cleared and has to query the server again, which causes a noticeable flicker. This happens in the Angular TodoMVC as well, however it’s less noticeable because they immediately set the todos to whatever is in local storage when the controller is loaded.

This could be solved a couple ways, but the easiest way would be to disable the controller reload on certain routes. We can do this for search queries by adding the following to our main route in app.js.

  reloadOnSearch: false

Then we can set the current filter using search query params without triggering a controller reload.

Share Button
  • Arthur Fanti

    Hi!

    I am just beginning with Angularjs and expressjs, i’ve been trying to learn it through the angular and angular-fullstack generators and I am having a hard time with that!

    Anyway, I just thought it would be great to have a tutorial on this one, a step-by-step on how to build a todoMVC using MEAN would really help the newbies like me to get a better understanding on it …

    Thanks!

    • tylerhenkel

      Hi Arthur,

      I’ll try to write something up over the weekend.