Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Building an Angular App: Controllers

7:58 Angular 1.x lesson by

We are going to take the static HTML elements and dynamically display them on the page by setting up an AngularJS controller and hooking it up with AngularJS templating in the view.

The code for this lesson can be found on Github. Note: the tag name corresponds to the lesson.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We are going to take the static HTML elements and dynamically display them on the page by setting up an AngularJS controller and hooking it up with AngularJS templating in the view.

The code for this lesson can be found on Github. Note: the tag name corresponds to the lesson.

Avatar
shawn

OK, further fix for ng 1.3.8 - the code to reset, I needed to explicitly set the member as it was setting an object, thus the comparison is using an object vs. string.

function resetCreateForm() {
            $scope.newBookmark = {
                title: '',
                url: '',
                category: $scope.currentCategory.name
            };
        }
In reply to egghead.io
Avatar
Gumga

Shawn, I'd better do as follows:
$scope.newBookmark = new Object();

In reply to shawn
Avatar
Eric

I was trying this example, and I was not able to get the bookmark list to appear. I only see bookmark items when I hit a category.

I narrowed it down to the filter being added to ng-repat="bookmark in bookmarks | filter: {category: currentCategory.name}".

This is the js files I am using for angular:

//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"
//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"
//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"

Avatar
John

Why was there no extended discussion about or explanation of $scope? That's very, very important in Angular.

Avatar
Joe Turbin

Great video. Easy to follow for a beginner. Thanks!

Avatar
Raul

I have seen this in various tutorials: What is the reason behind putting the <script> tags at the end of the body section instead of puting them in the head section?

Avatar
Joel

I have seen this in various tutorials: What is the reason behind putting the <script> tags at the end of the body section instead of puting them in the head section?

The browser loads everything in head first and blocks the page. People put scripts in body to allow the body text to render and give a better user loading experience.

In reply to Raul
Avatar
Raul

Good to know. Thanks Joel!

In reply to Joel
Avatar
Raul

I thought about this for a bit and I do believe it is better to import angular on top in angular apps since if the page loads without angular you will see a lot of {{expresion}} statements there. Please tell me if i'm wrong.

In reply to Joel
Avatar

Please remember to add https: before URL calls. People don't run your code on a server, they tend to use it locally.

Avatar
Dler

Refering to video Building an Angular App: Filters by Lukas Ruebbelke. My question is, if I create a bookmark and then refresh the page in my website, will the created bookmark get deleted because of refreshing the page? That is something I have been wondering about for a long time..

Avatar
Nabil

This helped me big times! Even though I am running on a local server with npm http-server it didn't work. Thanks for pointing this out!

In reply to
Avatar
Michael

use script defer in the head

In reply to Joel

Welcome to the next video in the Eggly series where I am going to show you how to create an AngularJS module, as well as hook up an AngularJS controller and then make that available to the view to actually render data structures that you define in your controller.

What we're going to do in this application is actually take these category elements and these bookmark elements and define them in the controller. Then using ngRepeat and AngularJS templating then render them back out in the view.

The first thing that we need to do is actually define the module that we are going to organize our code into. An AngularJS module is simply an organizational mechanism to group functionality. It's a way for, for instance, if you have users then you might group the user functionality into a user submodule. If you have, for instance, a bookmarks functionality or a set of bookmarks functionality you can organize that into a bookmarks submodule.

You'll see this actually in later videos when we start to get into more advanced topics. For now, I'm going to go to the ngApp directive and I'm just going to add a value to this attribute and I'm going to say, "Eggly." When this instantiates it's going to look for a module called Eggly."

We need to define this module, but the first thing that we need to do is actually reference our source file for our application. It's Eggly app.start. Let's hop over to here. You define your Angular module using Angular.module. This takes two arguments, the name of the module and then an array of dependencies. In this case, we do not have any dependencies yet but you could put any submodule in there. For instance, if you're doing routing or animating then you would put ngRouter ngAnimate.

From there, we are going to define our controller. Let's call this "Main Controller." This takes a second parameter, either an array with submodules or dependencies, and then the last element of that array being the actual functionality for the controller in the form of a function or it can just take a function. I prefer to use the function and then actually define my dependencies using ngMin or in a post-production step. In this case, we're just going to pass in scope like so.

Just to show that this is working let's create a variable called "Hello." This is going to be similar to what we did before. We're going to instantiate this to World. Let's hop back in here. We have to actually define the controller in our HTML. We're going to use ngController. We're going to set this to main controller. Now this controller controls the element that it was defined on and all of its subelements or children elements.

From here I'm just going to go, "H1 {hello}." Let's refresh the page. This should evaluate to "World." Now our controller is hooked up. It's live. Let's delete this. What I'm going to do now is I am going to define a categories and bookmarks array in this controller. I'm not actually going to type this out. I'm just going to paste this in here.

What I have is scope.categories. It's an array with objects for categories with an ID and a name. Then, bookmarks is also an array of objects with ID, title, URL, and category. You can see that the category actually matches up to the category that it's in.

Now that I've defined categories and bookmarks on scope, it's now available in the view for binding. Let's go ahead and do that. Now you can see that I have these three category elements. Let's delete this one.

You can see that we have three category elements. Let's delete this one. We want to actually repeat this list item element. We're going to go here. Using ngRepeat, we're going to say, "ngRepeat category in categories." What this does is it looks for the categories array and then it will basically stamp out this element once per element or item in the collection.

From here, we simply can do the double curly braces and category. That's a variable that keeps track of the current category that it's referencing in the categories array. Let's put category.name. Let's hop into the HTML, refresh. Now you can see that we have these four categories here. Development, design, exercise, and humor. Let's do the same thing for the bookmarks.

We don't need these bottom two but we do want to repeat the first bookmark. Let's go "ngRepeat bookmark in bookmarks" like so. Then, from here, let's change this Href to the "bookmark.url," and let's change this to "bookmark.title." When we refresh this now, we should have categories that are dynamic and we have the bookmarks that are also rendering dynamically as they are being pulled from the controller.

Just to review what we've done, we've taken ngApp and now we are pointing it to the Eggly submodule which we defined up here, Angular.module Eggly, and then on top of that module we have defined a main controller with two arrays of objects, category and bookmarks.

Because we have put that on scope that is available for the view. Think of scope as the glue between the controller and the view. Then using the ngRepeat syntax we are repeating over categories and bookmarks and, in this case, category and categories as we can now reference that object and bind to it. Now we're binding into displaying the category name. Then down here we are binding to the URL and the bookmark title.

In the next video, I'm going to show you how, when you actually click on a category, we can actually filter out and show just the bookmarks for that category. We've seen how to actually bind two properties in the controller but now we're going to take it one step further and we're going to actually show how to add in functionality or communicate back to the controller from the view.

Thanks for sticking around for this video. I look forward to seeing you in the next one.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?