My First Experience with AngularJS and Rails 5

tutorial

Hi Everyone! My name is Dakota Lee Martinez. Over the last year or so, I’ve been working on the Flatiron School’s Full Stack Web Developer course. I’ve just completed the final project, a full stack web application built with AngularJS and Rails. I’m super excited to share my experience building the app with you all over the next series of posts.

About My Project

For this project, I wanted to pick something I’m passionate about and something that I would actually use. I remember when I first was exposed to code snippets. When I watched a few of Jeffrey Way’s laracasts, I was hooked. If you’re not familiar with custom code snippets, the idea is that you can write a code template for accomplishing a certain task. You give your snippet a trigger phrase. When you type this phrase the phrase expands into your template.

If this were all it could do, it would still be really cool. But, there’s more!!! You can add variables to your template, allowing you to type in a value and have it appear in multiple places within the template. This kind of thing is very useful for variable or function names. Even better, you can cycle through these variables within the snippet by hitting the tab key. This allows you to avoid spending time and keystrokes referencing library specific syntax for a task you’ve already done a lot of times and skip right to adjusting the values that are specific to your particular application.

Building a Hacker News Clone in AngularJS – Part 6

tutorial

Hi Everybody! Welcome to the final installment of our series on building a Hacker News clone in AngularJS. In this post, we’re going to discuss routing resolves and when we might want to add them to our application. For a quick review, let’s take a look at what we covered in the previous posts:

In Part 1, we covered creating an Angular service to connect to the Hacker News API.
In Part 2, we covered creating a custom Angular directive to display individual stories.
In Part 3, we covered AngularJS pagination with a library developed by Michael Bromley
In Part 4, we covered creating a custom Angular component to display individual comments, using Angular Filters to help out.
In Part 5, we covered displaying threaded comments by using nested components.

In Part 6 of our series, we’re going to be adding routing resolves to our application to make sure that we don’t transition to a story’s show page before we get the story’s data from the Hacker News API.

To do that, we’ll be going through how to create routing resolves to preload data from a service before hitting the controller. There are certain instances where this is more useful than others. Specifically, when we are wary of a promise failing, using resolves can be a better bet as we won’t load a page before we have the data needed to display it properly. If a promise within a routing resolve fails, the page stays in its current state.

Building a Hacker News Clone in AngularJS – Part 5

tutorial

Hi Everyone! Welcome to the next post in our series on building a Hacker News Clone in AngularJS! In this post, we’re going to focus on using nested components to display threaded comments on individual posts. In the last few posts, we’ve covered a bunch of topics.

In Part 1, we covered creating an Angular service to connect to the Hacker News API.
In Part 2, we covered creating a custom Angular directive to display individual stories.
In Part 3, we covered AngularJS pagination with a library developed by Michael Bromley
In Part 4, we covered creating a custom Angular component to display individual comments, using Angular Filters to help out.

In Part 5 of our series, we’re going to complete our custom Angular component that will display a comment. Specifically, we’re going to focus on expanding its functionality by allowing it to display nested comments (threaded comments). This will be a good example of how to implement nested components in AngularJS.

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

tutorial

Hi Everyone! In this post, we’ll continue our journey through building a Hacker News Clone in AngularJS. The main focus of this post will be on building a new state for individual stories. To do that, we’re going to build a custom Angular component and refactor some of our earlier formatting code into Angular Filters. That way, we can reuse our earlier code in our new component. Our goal is to build a page that will display the comments related to a given story.

Be sure to check out the previous posts in the series if you haven’t already:
Part 1: Creating a Service to connect to the Hacker News API
Part 2: Creating a Custom Directive to display stories
Part 3: Adding Pagination

In Part 4 we’ll be covering the following tasks:

  1. Adding a new state for individual posts
  2. Adding content to the Post Show Page
  3. Creating a custom Angular Component to display individual comments
  4. Refactoring our Story Directive’s formatting functions into Angular Filters

Building a Hacker News Clone in AngularJS – Part 3

tutorial

This is Part 3 of the series on Building a Hacker News Clone in AngularJS. The Project is the penultimate assignment in the Learn Verified Full Stack Web Developer Program. In this post, we’ll be focusing on implementing AngularJS Pagination. To do this, we’ll be using a library developed by Michael Bromley.

In this post we’ll cover the following tasks:

  • Using the dir-paginate directive to paginate our list of top stories
  • Using the dir-pagination-controls directive to add pagination links.
  • Displaying the proper numbers on each page

Michael Bromley’s library gives us two directives that we can use to implement AngularJS Pagination. The library itself makes it extremely easy to add pagination to your Angular app. In the following sections, you’ll see that we ran into some issues that are specific to our Hacker News Clone. After we add pagination to our app, we’ll walk through how to work with the library to address the issues that were specific to this application.

Building a Hacker News Clone in AngularJS – Part 2

tutorial

This is part 2 of my walkthrough on creating a Hacker News clone in AngularJS. This is one of the final projects in the Learn Verified Curriculum. I recommend reading through Part 1 of the series on Building a Hacker News Clone first.

In the first post, we bootstrapped our Angular app, created a nested view using Angular UI Router, created a TopStoriesService to connect to the Hacker News API, and used that service to display a list of story ids in the browser. In this post, we’ll cover the following tasks:

  • Adding a custom directive to display each story
  • Calling on our TopStoriesService within our directive’s controller to fetch information from the Hacker News API
  • Adding our custom directive to the top-stories view
  • Adding a view template for our new directive to use

Building a Hacker News Clone in AngularJS – Part 1

tutorial

As part of the curriculum for the AngularJS portion of the Learn Verified Full Stack Web Developer Course, students build a Hacker News Clone. In this project, we use the Hacker News API to reconstruct the top stories page at Hacker News.

At this point, we’ve already completed nearly the entire course, which I’ve been working on part time for the past 8 months, so we’re pretty far in. Of the 600+ lessons I’ve completed, 110 of them are related to AngularJS. We’ve already covered a lot of the concepts that we’ll be tackling when building this project, but up until this point we’ve been working on them one small piece at a time. In the next few posts, I’ll be walking you through my progress through the project.