Understanding angularjs

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.

A major purpose of MVC is to separate out responsibilities in your JavaScript code to keep it clean and easy to follow. angularjs is one of the best MVC frameworks available because it makes it very easy to implement MVC

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.

Modules

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

angularjs introduces the concept of a scope. A scope is just a JavaScript representation of data used to populate a view presented on a web page. The data can come from any source, such as a database, a remote web service, or the client-side angularjs code, or it can be dynamically generated by the web server.

A great feature of scopes is that they are just plain JavaScript objects, which means you can manipulate them as needed in your angularjs code with ease. Also, you can nest scopes to organize your data to match the context that they are being used in.

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.

Most dynamic web applications use direct JavaScript or a JavaScript-based library such as jQuery to manipulate a DOM object to change the behavior and appearance of the rendered HTML element in the user view.

angularjs introduces a new concept of combining templates that contain directives that extend the HTML tags and attributes directly with JavaScript code in the background to extend the capability of HTML. Directives have two parts. The first part is extra attributes, elements, and CSS classes that are added to an HTML template. The second part is JavaScript code that extends the normal behavior of the DOM.

The advantage of using directives is that the intended logic for visual elements is indicated by the HTML template so that it is easy to follow and is not hidden within a mass of JavaScript code. One of the best features of angularjs is that the built-in angularjs directives handle most of the necessary DOM manipulation functionality that you need to bind the data in the scope directly to the HTML elements in the view.

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.