FREELessons: 17Length: 2.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.4 Starting the Angular Application

The next step in building our application is to turn the HTML file, that we are currently serving to the browser, into an actual Angular application. So we're back in our public/main.html file, and the first thing we need to do to convert this this static HTML here into an actual Angular application is add a script tag. And this is the script for lib/angular/angular.min.js. So now that we have the Angular JavaScript on the page we need to go ahead and write a little bit of JavaScript that uses Angular. So let's go ahead and open public/src and let's create an app.js file. And in here we're going to create our Angular application by creating an angular module. So we're gonna have an angular module and we're gonna call it ContactsApp. And currently it will have no dependencies but we will get some eventually. And for now we're not ready to build any real components yet, so we'll just have a run block here. And this will take the routeScope so that we can make sure things are actually working. It's not a great idea to use the rootScope for just any old values, however for now, since we're not going to have any controllers, we'll go ahead and use the rootScope and we'll give it a message and we'll just say Hello Angular! So now when our Angular application is started up on our main .HTML page our application will have access to this message value. So now that we have some incredibly basic application code we need to add a script tag for it. So we have script src and this is /src/app.js. There we go. But this is not quite enough just yet because we need tell Angular that we want to, to start up the application that is our module ContactsApp. So to do this, we need to add the ng-app attribute. And we're gonna do this on the html on the top, of the top. So we'll say ng-app=ContactsApp. And notice ContactsApp right here is the very same thing that we're calling our module. So, that means that this web page here is supposed to be the ContactsApp application. And this attribute that we're adding here, ng-app, I believe the accurate term for what this is doing is bootstrapping the application onto the page. Don't confuse this with Twitter Bootstrap, it's a different thing altogether. So now that we've bootstrapped our application and started up on this page, we now have access to this message value. So, up here after Contacts, just go ahead and in here, we will say message, and we can just do it inside of double curly braces like that, and this is the big thing about Angular that's different from other front end frameworks, such as Background. Instead of creating templates that you then render with values and then insert onto the page, the page itself becomes your template and so, right here we can have these double curly braces to interpolate a value right onto our HTML page and Angular will go ahead and interpolate that so we can see it. And we can see this in process if I come back to our browser here. I have the server running. And if I refresh the page you can see that now we have the message, Hello Angular displaying on the page. So that is great. Now what was previously a static HTML page is a dynamic Angular application.

Back to the top