First Step: Adding Angular to the HTML Page

Lukas Ruebbelke
InstructorLukas Ruebbelke
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 5 years ago

The first step to any AngularJS project, is actually adding AngularJS to the page. This lesson will show you adding the Angular script, initializing the app with ng-app, and simple two way binding with ng-model. This is a beginner level lesson.

Lukas Ruebbelke: [00:00] Hello. This is Lukas Ruebbelke. In this video, I'm going to show you how to actually add in AngularJS to your webpage. What I have here is a completely blank page that doesn't have a lot going on in it.

[00:17] The first thing that we need to do is to actually include the AngularJS JavaScript file. If you go to angularjs.org and you click on this "Download" button, you can choose the version that you want to actually include in your page.

[00:32] Let's just grab the latest. We will just copy the CDN link here, and then we'll hop back into our code. We'll just add this at the bottom. I'm just going to paste this in.

[00:52] From here, we are ready to actually instantiate an AngularJS application. On the HTML tag, I'm going to just put "ng-app" to say, "I want this entire HTML page to be an AngularJS application."

[01:07] Then, in the body tag, I'm going to create a big, bold H1 tag. I'm going to just bind this to a property called "hello." Then I'm going to create an input field, and I'm going to set this to "ng-model = "hello"."

[01:31] The idea is when I change "hello" in the input field, it will change the value in the H1 tag. I'm doing this to show that the AngularJS application is indeed initializing and spinning up.

[01:46] Let's jump into the page. Let's refresh this. There's nothing in the input field now, so we are not seeing the H1 tag. As I start to type, you can see that it is updating in real-time. This is how you know the AngularJS application is indeed working.

[02:07] Just to summarize, we have added in the AngularJS file, to our page, using the script tag. Then we instantiated the AngularJS application using ng-app.

[02:20] Then we bound to a simple value using ng-model and the {{ binding syntax. You can see this living in the page. This is how you get AngularJS into your application.

[02:39] This is the very first step when using AngularJS. Check out the other egghead videos to learn more advanced topics on AngularJS. Catch you next time.

egghead
egghead
~ 31 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today