AngularJS is a JavaScript framework that is used for making rich, extensible web applications. It runs on plain JavaScript and HTML, so you don't need any other dependencies to make it work, and it is CSS-agnostic so you can use whatever CSS framework/methodology you want when designing your Angular application.
The code at the right is an example of a "hello world" Angular app. When run, "Hello World!" is printed onscreen using AngularJS. Don't worry too much about understanding the code just yet. We'll work through this example step-by-step in the next lesson.
Angular applications at their most basic consist of three components.
The template is the HTML portion of the app. Writing a template is exactly like writing a static HTML page, except that templates contain additional syntax which allows data to be injected into them in order to provide a customized user experience. If you have ever written an HTML page using a server-side web framework you'll feel right at home writing templates in Angular. The feature that differentiates Angular templates from server-generated pages, however, is that in Angular data can be injected, modified and removed from templates without ever requiring a page refresh. This feature provides a more fluid experience to the end user and enhances the overall feel of Angular web applications.
The scope is a very important component in Angular applications. The scope is the object that represents the "model" of your application. It contains fields that store data which is presented to the user via the template, as well as functions which can be called when the user performs certain actions such as clicking a button.
The controller plays somewhat of a supporting role in Angular applications. The controller is a function which generally takes an empty scope object as a parameter and adds to it the fields and functions that will be later exposed to the user via the view.
Up until now I have intentionally tried to stay away from making any comparisons between Angular and MVC for the benefit of those who have not worked with the MVC pattern before. If you have worked with MVC, then you probably won't need any help in identifying how closely Angular's architecture resembles that of an MVC-based application. As the two are so closely linked, I may from here on in refer to the template as the "view" and the scope as the "model". If you are unfamiliar with MVC, just be aware that these terms are interchangeable and that I am not talking about anything that you haven't seen before.
The template, the scope, and the controller are the three main building blocks of an Angular web application. While there is much more to Angular than these three components, with an understanding of what they do and how they interact you will already be capable of wiring together a simple Angular application.