⚠️ This lesson is retired and might contain outdated information.

Bootstrap AngularJS into a Static HTML file

Lukas Ruebbelke
InstructorLukas Ruebbelke
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 2 years ago

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

Man: [00:00] 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.

[00:14] 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.

[00:39] 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.

[00:55] 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.

[01:12] 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.

[01:40] 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.

[01:56] 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.

[02:25] In this case, the app is initialized into the HTML tag and everything underneath it. In this case, pretty much everything.

[02:33] 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.

[02:46] 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.

[03:09] 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.

[03:29] 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.

[03:43] Thanks for sticking around for this video. I will see you in the next one.

manoj
manoj
~ 10 years ago

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

Thank you

Joel Hooks
Joel Hooks
~ 10 years ago

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

Joel Hooks
Joel Hooks
~ 9 years ago

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

Thank you

You can find the code here on Github

amit
amit
~ 9 years ago

where to get source code for this tutorial ?

Pan Rada Production
Pan Rada Production
~ 9 years ago

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

Johnathan
Johnathan
~ 8 years ago

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

~ 8 years ago

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.

ttaylor272
ttaylor272
~ 8 years ago

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?

Paul
Paul
~ 8 years ago

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

Weng Koon Wong
Weng Koon Wong
~ 8 years ago

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?????

Markdown supported.
Become a member to join the discussionEnroll Today