Day 53 Angular Reddit Clone Continued
Day 53 is in the books! We started the day off by working on some code wars which is always fun. We usually work on a problem for about 20 minutes and then we break out into pairs and explain our problem to a fellow classmate. If you already solved the problem then you explain how you came up with a plan and executed your strategy as well as anything you might have learned along the way. If you haven’t solved it you talk about what your approach will be and brainstorm ideas with your partner. First your partner has to restate the problem back to you to make sure that they understand it. once you are on the same page you can proceed with helping each other devise strategies and so forth.
We emphasize the process of breaking down a problem and communicating with a team which I really like. It’s helped me exponentially in my ability to solve hard problems. In the beginning I would panic when I was given a problem, but now I just follow the process. It’s not always easy, but any problem will eventually buckle if you stay with it long enough.
After code wars we did some light Angular review before jumping back into our latest version of the Reddit clone. My first task today was to allow a user to vote a post up or down and keep count of the votes on each post. It was an interesting problem to solve. It seemed fairly straight forward, but the challenge was in knowing which post that the user clicked on. I was able to solve this by passing in the post when invoking the upVote/downVote functions from the view. I had access to the post because I was using ng-repeat to loop through a list of posts on my controller. By passing the post in when invoking the voting functions I was able to keep track of which post the user voted for. Here’s an example:
As you can tell from the video above it works beautifully. I was really pumped when that started working.
The second task on my list was to give the user the ability to search a text box and to filter the posts based on their search results. Angular actually makes this pretty straightforward. You just add an ng-model to the search input box that matches up with a filter that you define in your ng-repeat. You can catch a preview of how that works in the video as well.
I also had to give the user a dropdown list of filters to filter the results by. I used votes, date, and time as filters. In the example below you can see that I setup an ng-model on the select tag. I also defined filters in the value attribute on each option tag.
In the next example you can see that I’ve added an orderBy: $ctrl.sortBy filter that corresponds with the ng-model we defined on the select tag for the dropdown list. That’s what makes the connection and binds the data to the filters. Pretty cool stuff!
I made some other small tweaks to the app today as well, but those were the big victories. Tomorrow I need to add some additional styling to the form validations I made today. You might have noticed those messages popping up in the video when I created a new post. I also need to figure out how to set the form back to it’s pristine state after a post is made. For some reason that was giving me trouble today. Next week we are going to hook this app up to a database with routes which is going to be awesome! I’m really looking forward to that!
Tomorrow we are going to tour the Atlassian offices. I’m excited to check that out. Atlassian is an amazing company. I’ve had the luxury of chatting with some of their employees and it sounds like a great place to work. I love how much they encourage their employees to volunteer and be generous. We also have a guest speaker in the afternoon who is a form galvanize grad so that should be fun. I’ll keep you posted on how all of that goes! Until next time…happy coding!
53 down 47 to go