AngularJS is MVC based framework. In this tutorial we will see what is Model, View and Controller in general and how this can be related to AngularJS with clear explanation and appropriate example.
View - is presentation of data in a particular format, triggered by the controller's decision to present the data or in simple words, View is what users see. In Angular View is Document Object Model (DOM). To display data from controller you can put angular expression in your view.
Now lets see them in action with an example..
Step 1: Create Controller
The AngularJS application is defined by "myApp". The application runs inside the <div>.
So here we have created our controller named "myCtrl". ($scope will be explained below)
Step 2 : Create Model
As said earlier, Model is primitive type..
In the above code "message" is our model which is a String. Since we want the model available to be accessed by our view, we’re making each model as a property of $scope.
Each controller has its own scope. Scope is like a bridge between controller and view, you need scope every time you create a controller.
Step 3: Create View
Now we have the controller and Model ready, we need View to display to the user
The first thing to do here is point <div> your application using ng-app directive. Then the controller to be used using ng-controller directive. This actually defines the controller.
Now RUN the program to see the output. Immediately after execution below will be the output. We can see whatever that was written in model(there!) is shown as output.
Now Type something and see the same will get appended..
Hope this tutorial helps you to understand the below stuff
- Model in AngularJS
- View in AngularJS
- Controller in AngularJS
- ng-controller directive in AngularJS