Day 52 is in the books and I am well on my way with yet another Reddit clone. We spent the first half of the day reviewing some Angular terminology. We talked about components, scope, data-binding, etc… It was a good review and a good chance to close some of the gaps in my knowledge.
Reddit Clone Begins
Just before lunch we were turned loose on our Reddit clone assessment. The screen shot above is from my latest working version. So far I’ve just got the basic Angular stuff wired up. I mentioned yesterday that writing javascript inside script tags in the html drives me nuts so I abstracted that out. Now my module and component live in their own js file. I also abstracted my template out into it’s own html file so that I can have all of the conveniences of working with it like regular html. The alternative is to throw it inside of a template on the controller, but you lose syntax highlighting and some other perks if you do it that way.
ng-click
Once I had everything wired up the way that I wanted I started in on my first task which was to make the new post form show/hide when you click the new post button. I added an ng-click directive to the button to accomplish this. Inside of the ng-click I invoked a toggleForm( ) function on my controller. The function changes a boolean value on a variable in the controller. When that variable evaluates to true the form is shown and when the variable evaluates to false the form is hidden. This is my first angular app so that took me longer than I care to admit to accomplish.
ng-repeat
The next task was to give the user the ability to create a new post. First, I created a posts array and added a few hardcoded posts so I could make sure I knew how I was going to display them. I used an ng-repeat like so: <div ng-repeat=”post in $ctrl.posts” class=”row”> to loop through the posts array and for each post I created all of the html elements necessary to display them on the page. Each of those elements has access to the appropriate post property like so {{post.title}}. I must admit once I started to get my head around how this stuff was working I was really excited. Today didn’t feel like work it just felt like fun!
Next Steps
My next steps are to add some form validations the Angular way and to give users the ability to vote posts up or down. I’ll have to keep track of each post’s voteCount and order them on the page accordingly.
Tomorrow is more Reddit clone! I’ll let you know how things progress. Until next time…happy coding!
52 down 48 to go!
