Anatomy of an AngularJS application

It is important to know the various components of the angularjs before implementing the angularjs application. Every agularjs application has following internal components,

1. Model
2. View
3. Controller
4. Scope
5. Directive
6. Expression
7. Template

Followings are the details of the above components,

1. Model :

• Model represents the data which is used to display on the HTML pages/templates.
• Model data are nothing but simple POJOs ( i.e Plain Old JavaScript Objects ).
•  For example empName, password, empId, and empSal are the various data/models of an employee of an organization. So employee is a POJO which contains the data/properties as follows,

    employee = {
         empName: 'Jhon',
         password: 'jhon@123',
         empId: 10022,
         empSal: 26500
    }

2. View :

• This is a HTML page or a piece of HTML code for displaying the data/model.

3. Controller :

• It is the place where we write the business logics for driving the angularjs application.
• Here the business logic is the piece of code to manipulate the data/model.
• Every controller has a $scope which extends to $rootScope.

4. Scope :

• It is a context which holds data models and function to operate the data models.
• A controller sets these data models and functions in the scope.

5. Directive :

• It is the new attribute/element to give more additional features/functionalities for our existing HTML elements.
• For example ng-if, ng-repeat are built-in directive and <my-clock></my-clock>, my-clock are the custom directives implemented by us.

6. Expression :

• Expressions are represented by {{}} in the HTML. They are useful for accessing scope models and functions.
• For example <div> {{ 4 + 6 }} </div> which will display 10 on our view.

7. Template :

• HTML with additional markup in the form of directives (<my-clock/>) and expressions {{}}.