It is an MVC based framework, with the capability to extend the HTML attributes with Directives. There are three primary directives in Angular JS –
- ng-app – Used to define an Angular JS application.
- ng-model – Used to bind HTML controls (textboxes, textareas, checkboxes, etc.) to the application data.
- ng-bind – Almost opposite to what is applicable for ng-model, ng-bind is used to bind application data to the HTML.
AngularJS also provides Dependency Injection that helps the developing the application which is modular, easier to develop, understand, and test. With AngularJS, we can divide the application into number of components and these components get injected into each other at runtime.
Data Binding is another powerful feature provided by AngularJS, that provides automatic synchronization between the model and the view (which can be a pure HTML page).
When we will actually get into code, there is something else you will come across, which is the scope. The scope is an object serving as the model and acts as a glue between controller and the view. Controller is defined using the ng-controller directive and a new controller object gets instantiated along with the new scope object getting injected. Controller has functions bound to the scope and updates this scope accordingly based on the implemented business logic.
In other words, scope keeps the application data intact, with both view and the controller dynamically bound to it. A user action on the browser screen updates the scope object, which in turn invokes the controller with an updated scope object as its parameter. Controller functions might further manipulate the current scope object based on the implemented business logic. The updated scope object then immediately reflects the change in the view because of the data binding feature we talked about. Refer the below diagram which represents the control flow and will probably help you with the understanding:
Let’s check out how the below code snippet complies to what we have discussed so far.
Hopefully, the above diagram will help understanding the very basic structure of an AngularJS application.
We will soon get more familiar to all these when we actually start looking at the sample codes in our subsequent articles.