7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 angularjs.org

This introductory lesson covers the Angular website, including how to download the framework, itself. Next, we’ll take a run through the first example with a brief explanation, and then a tour around the Angular documentation, and where to get help from real people.

2.1 angularjs.org

The AngularJS website is a great place to start when you're learing Angular. You can find it at angularjs.org. It's a great place to go for documentation and a full API reference and also for links to other places around the web where you can find help with Angular. They also have lots of really useful examples that will show you a few things that can be done with Angular straight away. The first thing you'll notice on this page is the download button. This gives us a popover that lets us configure an Angular download. We'll be using the stable branch and using minified code, because we'll be grabbing it from the Google CDN, and this link here will give you that. You can also download the uncompressed source or the latest unstable branch. The uncompressed source is good for learning a little bit more about Angular by reading its actual source code. So let's move straight on to check out the first example on their page. This little app uses the value of the text box to update the text in this H1. So if I type my name in here, you can see straight away that it updates the H1. This is all the code that's necessary to make that happen. We've got the script tag with that CDN URL in it, and we've got an ng-app attribute on the HTML tag, and we'll go into what that means in a later video. Essentially, it just tells Angular to instantiate itself on the page. The next thing you'll notice is the ngModel attribute. This is the first directive you're going to meet, but all you need to know for now is that it links the data in the text box to a variable in Angular called your name. This is a model and is the first part of the model view controller architecture that we'll come to learn about in Angular. The last thing to notice is the double curly braces and the word your name in the H1. This is a template and the data binding, and all it means is that Angular will replace the contents of the curly braces with the value that's in the text box. It knows they're linked together because the value of the ngModel attribute is your name and your name is in between the curly braces. So, again, if I type a new word in here, you can see that it updates straight away, because I'm changing the value of the your name model and it's been inserted into the H1. There are some other examples down this page and they get progressively more complex as we go on. We'll be building some part of every one of these examples as we go through this course. As I mentioned, the other good thing about the Angular website is the documentation. To get at it, you hit the develop menu and the developer guide. This guide contains articles about almost every part of Angular, and whatever you're having trouble with, just come here, find the article, and it'll give you a great start in learning how it works. If you need to reference documentation, again hit the develop menu and click API reference. This is pretty much everything Angular can do, and if you click on any of these, you will get a page of documentation about it. We will be coming back to this as we learn about Angular, and it's a really useful guide to everything that is possible. The last place that you might like to look is the Angular Google group. So you hit the discuss menu and the mailing list. This will take us to the Angular Google group. And you can post in here and get help directly from the creators of Angular and the whole community. In the next video, we'll set up our very first Angular app and look at data binding and the ngModel attribute.

Back to the top