Bootstrap AngularJS into a Static HTML file

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.