Building a Hacker News Clone in AngularJS Part 4 – Angular Filters

Hi Everyone! I’m Dakota Lee Martinez. In this video series I’ll be using the Hacker News API to build out a Hacker News Clone in AngularJS.

These videos are accompanied by a series of blog posts at becomingaprogrammer.com. You can find the written explanation of the process and code samples there.

Building a Hacker News Clone in AngularJS Part 4 – Angular Filters

This video covers the following topics:

* discussing where to put view formatting functions in AngularJS
* creating the filters we’re going to create: js/app/filters/getHoursAgo.js, js/app/filters/getDomainFromUrl.js
* linking these filters to the project by creating script tags at the bottom of index.html
* adding the Visual Studio Code snippet for Angular Filters: Copy and paste the following command into your terminal:
curl https://gist.githubusercontent.com/DakotaLMartinez/1840f35d0c0cc6dc9f7d2465fb17ceea/raw/80a6044634238b416cea544ea6c486c8d78bca44/javascript.json | pbcopy
Open up the Code menu .. Preferences .. User Snippets
Type in JavaScript and hit return
paste in the contents of your clipboard, making sure the currently open file contains valid JSON (no red squiggly lines underneath the code).
* using the ng1filter snippet to build our getHoursAgo Filter, consulting the code we wrote earlier in the tutorial
* making sure our filter only accepts numeric input. Check out this blog post for more details:
http://javascript.boxsheep.com/how-to-javascript/How-to-check-if-a-value-is-a-number/
* using our filter within the StoryCommentController in js/app/components/StoryComment.js by injecting it as a dependency.
* applying our getHoursAgoFilter to the value of res.data.time retrieved from the Hacker News API and storing the result in the vm.commentTime property
* using our filter within the StoryDirectiveController in js/app/directives/Story.js by injecting it as a dependency.
* applying our getHoursAgoFilter to the value of vm.story.time retrieved from the Hacker News API and storing the result in the vm.time property
* loading http://localhost:8080/#/post?id=1 to make sure that the proper time is still being displayed

source