AngularJS – MVC Architecture or structure

AngularJS – MVC Architecture or structure

Model View Controller or MVC as it is sturcture of web developement. A Model View Controller pattern is made up of the three parts:

  • Model – It is the lowest level of the pattern responsible for maintaining data,its used for management of data.
  • View – In this part the actual design are display.It is responsible for displaying all or a portion of the data to the user.
  • Controller – It is a software Code that controls the interactions between the Model and View,concept of data.

Basic installation Example

<!doctype html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   </head>
   <body ng-app="myapp">
      <div ng-controller="FirstController" >
         <h2>Welcome {{Pramod.title}} to the Angularjs Tutorial!</h2>
      </div>
      <script>
         angular.module("myapp", [])
         .controller("FirstController", function($scope) {
            $scope.Pramod = {};
            $scope.Pramod.title = "Phpcodehub";
         });
      </script>
   </body>
</html>

This is angular js libary file or framwork File

<head>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

Point to AngularJS app

IN this line we tell what part of the HTML contains the Angular app. This done by adding the ng-app attribute or directive to the root HTML element of the AngularJS app.

     <body ng-app="myapp">
    </body>

View

ng-controller tells AngularJS what controller to use with this view. Pramod.title tells AngularJS to write the “model” value named Pramod.title to the HTML at this location.

    <div ng-controller="FirstController" >
            <h2>Welcome {{pramod.title}} to the Angularjs Tutorial!</h2>
    </div>

Controller

ng-controller tells AngularJS what controller to use with this view. Pramod.title tells AngularJS to write the “model” value named Pramod.title to the HTML at this location.

<script>
    angular.module("myapp", [])
    .controller("FirstController", function($scope) {
    $scope.pramod = {};
    $scope.pramod.title = "Phpcodehub";
    });
</script>

This code registers a controller function named FirstController in the angular module named myapp. The controller function is registered in angular via the angular.module(…).controller(…) function call.

The $scope parameter passed to the controller function is the model. The controller function adds a pramod JavaScript object, and in that object it adds a title field.
Execution

OUTPUT

Welcome Phpcodehub to the Angularjs Tutorial!

AngularJS - MVC Architecture or structure

AngularJS – MVC Architecture or structure

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates