AngularJS is the most popular JavaScript framework currently being used. The only other JavaScript anything that sees more use is JQuery, but JQuery is more of a library. The fact that Angular is so popular means it’s a desirable skill to have on your resume. Bearing that in mind, let’s take a very high-level look at what makes Angular tick and some cool things you can do it you learn AngularJS.

What is AngularJS?

At its core, Angular is a web application framework. The whole point of a framework is to streamline common tasks to make the whole process go more quickly.

Think of it this way: if you’re building a house (or any building, really), there are certain things you know you’re going to need: a frame, walls, electrical, plumbing. If there were a way to make creating a plumbing infrastructure quicker and easier, every construction company would be lining up to use it for their projects. Application frameworks work similarly. Let’s take a look at each of the major components that streamlines the app-making process in Angular.

Major Components of Angular:

Modules.

The basic building block of an angular application is the module. A module is any collection of smaller angular components that come together to make up the features of a web app. Some simple web applications can be made up of a single module, but it’s generally good practice to try to break up your code into multiple modules so they can be easily reused.

Controllers.

Angular is a sort of subspecies of MVC framework, which stands for Model-view-controller. MVC is a standardized pattern for web applications. As MVC became more popular, it has morphed into a number of variations. Angular is one such mutation. Angular is most commonly referred to as an MV* or MVVM (Model-view-viewmodel). The reason for the confusion has to do with the fact that Angular doesn’t really have the key elements that go into an MVC. It doesn’t really have models. It has controllers, but they operate quite different from traditional controllers in an MVC. Controllers in Angular are all about interacting with the $scope, which is feature that gives Angular part of its special sauce. In brief, $scope is the part of Angular that allows two-way data binding to happen. What is two-way data binding? Big topic, short answer is: it’s what makes this possible.

JS Bin on jsbin.com

The example seems simple enough, but what’s happening under the hood is that the model and the heading are bound so that when one changes so does the other. When you type in the input box, it changes the model. The heading, which is displaying the model, automatically changes also. Magic! A controller’s primary responsibility is to interact with the view.

Services.

Angular services are where the traditional business logic happens. Services are used to interact with external services via AJAX. They are also used for information sharing internal to the application. Controllers cannot share information with one another directly. We can use services as intermediaries. These are often the real workhorses of an Angular application.

Directives.

Directives in Angular are a way to extend the native HTML. By default, Angular has a number of built-in directives. It’s also possible to create custom directives to further extend the language and functionality of HTML. Directives are a very deep topic. In brief, directives are responsible for DOM manipulation and creating more clarity in the markup itself.

Routes.

While not a part of the core Angular framework anymore, routing is a major part of many web applications. Routing is what allows a single-page-application to switch between controllers and views dynamically. The advantages of using routes and single-page application really come down to improving the end-user’s experience.  Angular originally shipped with a routing solution that is still available as an add-on.

Angular is a big framework. There’s a lot going on in it. It can be intimidating to step into. Hopefully this overview will help clarify some of the more important pieces you should focus on when learning to use Angular. You can find out more about each of these components by going through an introductory course on angular like this one from Code School. It’s free and a good introduction to some of the concepts we’ve discussed.  Happy learning!