MVC Architecture In AngularJs
- AngularJs uses client-side MVC pattern. That means MVC in the UI part.
- The main purpose of MVC is Seperation of Concerns.
- So AngularJs makes a clear separation of the UI, JavaScript code (controllers) and model (data that comes directly to the controller from a form or using the web API from the database).
- MVC is popular because it isolates the application logic from the user interface layer and supports Seperation of Concerns.
- The controller receives all the requests for the application and then works with the model to prepare any data needed by the view.
- The view then uses the data prepared by the controller to generate a final presentable response.
Before describing the controller we will explain a module.
Module
A module is just like a container inside which we can define controllers, services, directives and so on. We can say it is like a namespace.
How to create a module
A module contains the following 2 parameters:
An AngularJs
controller controls the data of the AngularJs application.Declaring a Controller
- For declaring AngularJs we need a “ng-controller” directive.
- The AngularJs controller is a JavaScript object and is always defined inside <script> tags.
- The controller always contains the business logic.
- The controller takes one parameter that is “$scope” that accepts data that comes from modules/applications.
- Before creating a controller we must create a module.
![]()
We can use the controller in the following 2 ways:
- We can write the code in HTML code itself.
- We can define the controller in a separate JavaScript file and provide a reference to the HTML file.
Example 1
VIEW
- <div ng-app="mymodule" ng-controller="mycontroller">
- <input type="button" value="Click" ng-click="alert()" />
- </div>
Controller
- <head>
- <title>Angular JS Controller</title>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- <script type="text/javascript">
- var mymodule = angular.module("mymodule", []);
- mymodule.controller('mycontroller', function ($scope) {
- $scope.alert = function ()
- {
- alert("Hi Debendra");
- }
- });
- </script>
- </head>
Now when the button is clicked the program produces the following output:
Example 2
VIEW
- <div ng-app="mymodule" ng-controller="mycontroller">
- Enter first No :
- <input type="text" ng-model="no1">
- <br>
- <br>
- Enter Second NO:
- <input type="text" ng-model="no2">
- <br>
- <input type="button" value="Click" ng-click="add()" />
- <br />
- <br />
- </div>
Controller
- <head>
- <title>Angular JS Controller</title>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- <script type="text/javascript">
- var mymodule = angular.module("mymodule", []);
- mymodule.controller('mycontroller', function ($scope) {
- $scope.add = function () {
- var x = parseInt($scope.no1) + parseInt($scope.no2);
- alert(x.toString());
- }
- });
- </script>
- </script>
- </head>
When we click the button the output will be:
Example 3
VIEW
- <h2>AngularJS Sample Application</h2>
- <div ng-app="mymodule" ng-controller="mycontroller">
- Enter first Name:
- <input type="text" ng-model="firstName">
- <br>
- <br>
- Enter Second Name:
- <input type="text" ng-model="lastName">
- <br>
- <br />
- <br />
- <b>{{GetName()}}</b>
- </b>
- </input>
- </div>
Controller
- <head>
- <title>Angular JS Controller</title>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- <script type="text/javascript">
- var mymodule = angular.module("mymodule", []);
- mymodule.controller('mycontroller', function ($scope) {
- $scope.GetName = function ()
- {
- return "Hello Mr." + $scope.firstName + " " + $scope.lastName;
- }
- });
- </script>
- </head>
![]()