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 832 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.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Building an Angular App: Bootstrapping

3:48 Angular 1.x lesson by

In this lesson, we learn how to take a static HTML page and tap into the power of AngularJS by bootstrapping the framework.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson, we learn how to take a static HTML page and tap into the power of AngularJS by bootstrapping the framework.

Avatar
manoj

Is there a repository we can clone the source to follow along?

Thank you

Avatar
Joel

Right now it is just a single file. As it gets more complex, it will include the appropriate code for download.

In reply to manoj
Avatar
Jay

For those following along, in order for the script tags to work you need to serve index.html from a web server. Really Simple Server is a simple option.

In reply to egghead.io
Avatar
Joel

Is there a repository we can clone the source to follow along?

Thank you

You can find the code here on Github

In reply to manoj
Avatar
amit

where to get source code for this tutorial ?

Avatar
Pan Rada Production

any chance to have files on github with out any angular expresion ?
some example branche with only bootstraps files

Avatar
Johnathan

Your start index file is exactly the same as your finish index file on GitHub.

Avatar

Just found the start files are in the branch '01-bootstrap' in github. I recommend this tutorial starts by describing where the start files are and how to get them.

Avatar
ttaylor272

How do I get the code to show locally? Do I need to setup Node? Or what is the best way to follow the tutorials?

Avatar
Paul

Your link is incorrect. The correct link is in the code tab above (next to discuss) and it's https://github.com/eggheadio/egghead-angularjs-from-scratch-getting-started/tree/01-bootstrap

In reply to Joel
Avatar
Weng Koon

Super DUPER Confusing. git clone https://github.com/eggheadio/egghead-angularjs-from-scratch-getting-started.git. Can't follow through the videos.... need to git checkout to the commit where tag=01-bootstrap. Why this is not told upfront?????

Welcome to the first video of the Eggly series. In this video I'm going to show you how to take a static HTML page and bootstrap it into a working AngularJS application.

The first thing that we need to do to get AngularJS working in the page is to add in the AngularJS JavaScript file. Let's hop over to AngularJS.org. We'll scroll down to the bottom to the download button. I'm going to just grab the latest stable version, which is 1.2.20. I'm going to copy that.

From there, we will hop into the code into index.start.html, scroll down to the bottom. I'm going to duplicate this last include here and then paste in the reference to the AngularJS JavaScript file.

What we have here is jQuery, bootstrap, Lo-Dash, which we're going to use for some collection manipulation and for the videos. Then the minified version of AngularJS.

To get started, for the sake of illustration I am going to initialize a variable using ngInit. I'm going to say, "Hello=world." From here, I'm going to create a big H1 tag. Using double curly brace syntax, I'm going to put "Hello" in there.

And so, when I refresh the page, and this to prove or to show that AngularJS is not working. Then we will hook it up so it is working. Refresh and then you get this big Hello and these double curly braces. Nothing is happening at the moment.

To actually get this to render, we will go up to the HTML tag and we will add in the ngApp attribute. How this works is when the page loads and the AngularJS JavaScript file is loaded it scans the dom and looks for this ngApp attribute on any of the elements. When it finds it, it will initialize an AngularJS application to that element and its children.

In this case, the app is initialized into the HTML tag and everything underneath it. In this case, pretty much everything.

Let's go back and refresh the page. You can see now that {{Hello}} is being evaluated to World. Now we have a working AngularJS application.

I'll take this one step further. Let's go ahead and add in an input field. We're going to say this is text. We're going to bind this to Hello. We're saying ngModel=Hello.

Refresh the page and from here when I actually start typing because the AngularJS application has been initialized when I change it in one place it changes it in the other place. This is the beauty and the power of AngularJS is that you're now basically extracting the model out from the dom.

We're going to elaborate on this concept in the next video where I introduce a controller into the application. We will actually hook up categories and bookmarks and make those dynamic.

Thanks for sticking around for this video. I will see you in the next one.

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