Intro to AngularJS

This week, HacKSU talked about Angular. Angular is a cool Javascript framework that punches a lot of power into your front end. Angular web apps are single pages, so you never have to refresh to submit or anything, creating a faster and more desktop application like experience.

To show only some of the features of Angular, we’ll be creating a dynamic list of HacKSU members and their favorite colors. By the end, we’ll be able to search through the list, reorder the list, and add new people to the list, all in the same page without ever reloading. (Wooahhhhh.)

Step 1 — Let’s get set up.

Let’s begin by creating 3 files: an index.html file, an app.js file, and a main.ctrl.js file. The index.html file is the single page in our application, where we would load different views in and out of. Our example won’t be that complex, so we’ll just have a single view. The app.js file just connects our two files, the index.html and the controller. This is explained more in the files. Then we have our main.ctrl.js file, which is the controller, or brain, if you will, of our web app. You can see them below:

Step 2 — Let’s get the D(ata).

Let’s get working now! The next thing we’re going to do is update our controller in the main.ctrl.js file to include some information about who’s at HacKSU. We’re going to add an array of JS objects with some information about some members, including their names and favorite colors. We’re also going to give the page some information about how to organize our data and how to add a new member.

Step 3 — Let’s see what the heck we’re doing.

Now we’re going to play with the index.html file. We’re going to add an input to type into to search, a blank unordered list that we’ll populate with our hacksu members, a drop down to specify how to order the list, and a form to add new members.

And there you go! A simple, single paged web app. Please contact us with any questions or issues at hacksu@cs.kent.edu.