angularjs provides a very structured framework based on a Model View Controller (MVC) model. This framework enables you to build structured applications that are robust and easily understood and maintained. If you are not familiar with the MVC model, the following paragraph provides a quick synopsis to help you understand the basics. It is by no means complete and is intended only to give you enough reference to see how angularjs applies MVC principles. The Wikipedia website is a great resource if you want additional information about MVC in general.
In MVC, there are three components: the Model is the data source, View is the rendered web page, and the Controller handles the interaction between the two. The idea is that when the model changes, the view is automatically updated with new data. As the user interacts with the view, the controller handles those interactions, which usually ends up in updating the model which then updates the view again.
To get started with angularjs, you first need to understand the various components that you will be implementing and how they interact with each other. The following sections discuss the various components involved in an angularjs application, their purpose, and what each is responsible for.
angularjs introduces the concept of a module representing components in an application. The module provides a namespace that enables you to reference directives, scopes, and other components based on model name. This makes it easier to package and reuse parts of an application.
Each view or web page in angularjs has a single module assigned to it via the
ng-app directive. (Directives are discussed later in this lesson.) However, you can add other modules to the main module as dependencies, which provides a very structured and componentized application. The main angularjs module acts similar to the root namespace in C# and Java.
Scopes and the Data Model
Views with Templates and Directives
HTML web pages are based on a DOM in which each HTML element is represented by a DOM object. A web browser reads the properties of a DOM object and knows how to render the HTML element on the web page, based on the DOM object’s properties.
You can also create your own angularjs directives to implement any necessary custom functionality you need in a web application. In fact, you should use your own custom directives to do any direct DOM manipulation that a web application needs.