You should have basic familiarity with three areas:

JavaScript: Obviously. If you’re a total beginner, get through the Codeacademy course on JavaScript or equivalent and you’ll probably know enough to at least work through the Phonecat tutorial. If you’ve worked with JavaScript before and feel comfortable, I would jump right into the tutorials.

HTML: The whole reason to use Angular is that it powerfully extends the functionality of HTML, so you should at least know enough HTML to make a crappy 90’s webpage. (Some headline tags, some divs, an unordered list with some list elements for your favorite foods, maybe a text input.) As with above, the more you know the better off you’ll be, but it’s less important than JavaScript — the tutorials and demos do very basic HTML.

HTTP Requests: If you’re going to use data from an API or other source outside your app, you’ll want to be familiar with the HTTP verbs GET, POST, PUT, DELETE. You don’t need to be able to explain TCP/IP or how a request gets from your computer to a server and back again, but you should know the difference between a GET request and a POST request. If you’ve been successfully making AJAX requests with the help of a library like jQuery, you’re probably all set to handle $http and $resource in Angular.

I honestly wouldn’t overthink this stuff — I love Angular because it’s so easy to quickly prototype your ideas. I was building fairly complex web applications within a month of first encountering Angular. Best of luck!


OP asked in the comments about not understanding data binding, dependency injection, and scopes. Here it goes:

Data Binding

If you build dynamic web apps that take user input and modify some data, or request data and display it to the user, you’ll end up rewriting some of the same boilerplate code over and over. Your JavaScript needs to listen for user-created changes in the DOM and do some magic with it behind the scenes, and it also needs to watch changes to the data behind the scenes and update the user-facing view when it notices them. Most MVC frameworks do this: by separating the data (“Model”) from the user-facing DOM (“View”) you can avoid the bad stuff that happens when you rely on the DOM to store information for you. Angular makes this really slick with two-way data binding: if the user changes information in the View, it gets updated in the Model behind the scenes. If your JavaScript code changes the Model behind the scenes, it gets auto-magically updated in the DOM for the user to see. This is great if you have dynamic data that users can interact with (e.g. a stock price app that lets you sort stocks by price, P/E ratio, dividends, etc. while those values update with new information streaming in from the NYSE).

What a beginner should know: When you change {{stock.price}} in the View, it updates $scope.stock.price for you automatically — you don’t have to write all the code that listens for a change, takes the new value, and updates the corresponding JavaScript object in the background.

Dependency Injection

Angular tries to make code modular so you don’t need to load everything that Angular does for every section of your app. For instance, Angular handles HTTP requests with a bunch of code in the $http service. If I have a controller that doesn’t need to make HTTP requests, I can make it load faster by only loading the modules that I need! (Angular takes this a step further with “lazy loading”, so even if I require $http it doesn’t load until I actually need to use it.)

What a beginner should know: Angular has split up its code into small modules so you don’t need to use all of Angular everywhere you go. If you want to use a certain set of Angular’s features — like HTTP requests — you need to list the module in your controller/service/directive/app’s list of dependencies. In a controller that might be:

  1. angular.controller([‘$scope’, ‘$http’, function($scope, $http){
  2. // your JavaScript code here
  3. }]);

We’re passing an array to this controller creator/manager function, where the first two items are our dependencies and the last item is a function that takes those dependencies as arguments. By passing them into the function, they’re now available for you to use inside your controller code.


Managing the global namespace is a chore in JavaScript, and it also can be tricky to pass a function created in one place to another place where it’s actually used. Angular does some magic by creating $scope objects that you can attach constants, functions, or other objects to, then pass that whole $scope object to another place where it gets used. That’s really nice because I can have a function named $ on one scope, but also create another function called $ in another place that does something different. If I were just using plain JavaScript and the global namespace, those two functions would conflict because they have the same name.

What a beginner should know: All of these $scope objects are in a big hierarchy within your app, but they’re all children of $rootScope. You can have a bunch of $scope objects in your app, but there’s only one $rootScope. This can be kind of confusing when you’re using a tool like Batarang to inspect Angular scopes for the first time. But it shouldn’t be a deterrent: if you create $scope.someValue in your controller, you can display it in your html with something like <div>someValue is {{someValue}}</div> and Angular will insert that value into the DOM for you.