The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building an Angular App: Controllers

Building an Angular App: Controllers

7:58
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](https://github.com/eggheadio/egghead-angularjs-from-scratch-getting-started/tree/02-controllers). Note: the tag name corresponds to the lesson.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?