What is AngularJS MVC Architecture?: The benefit of MVC architecture is that it separates the application logic from the user interface and compartmentalizes concerns. The controller obtains application requests and helps the model prepare data needed for the view.
Thus it separates the business logic, presentation logic, and navigation logic. The view, in turn, uses the data delivered by the controller to render a client presentation.
MVC Architecture Graphical Representation
The model
The model manages the application data by responding to requests from view and controller to update itself.
The view
This is a rendered presentation of data for the client/user. The view is activated by the controller’s instructions to present data. Many script-based systems such as JSP, ASP, PHP and relatively simple to integrate with AJAX (Asynchronous JavaScript and XML) technology.
The controller
The controller operates in response to user input. It receives user requests, builds the model object, and passes that object to the view.
AngularJS MVC Architecture
AngularJS Model
A model in Angularjs can be a string, number, boolean or any JavaScript object. The model exists inside of the controller.
AngularJS View
The view is what the client sees within an HTML element. With AngularJS the view is an object in the Document Object Model (DOM) that displays data from the controller.
AngularJS uses two-way data binding (discussed later in this book), wherein the view updates automatically when there are model changes in the model. You do not have to write special code to handle this process; the controller takes care of it automatically.
AngularJS Controller
The controller is where we place our application logic. In AngularJS, a controller is formed by javascript classes. Controllers allow us to call for components to work with. The data model is placed inside of the controller.
AngularJS Controller Example
function ExampleCtrl($scope) {
// controller code here
}
This creates a JavaScript class that is our controller. The argument with the dollar sign ($) is called a scope, and one is needed for every controller that we create. The purpose of the scope is to bind together the controller and view.
AngularJS Model Creation
The model is also a regular JavaScript object that lives inside of the controller. The model is available to the view because it is bound by the control scope ($scope) as explained earlier.
AngularJS Model Example
function ExampleCtrl($scope) {
// model called 'welcome' which is a string
$scope.welcome "Hello, AngularJS Students!";
var users = [
{Name: "Micky"point: 45},
{Name:"Tim"point: 85},
{Name: "Susy", point: 55}
];
//model called 'students' which is an array of objects
$scope.students = students;
}
In the above code, we create our first model called ‘welcome which is a string and a model called ‘students, which is an object array. Because we want the model data to be synchronized with our view, we make each model as a property of $scope.
AngularJS View Creation
Now that we have set up our controller and defined the models, we must create a view to display the data to the user. Because the view is the Document Object Model (DOM), we write the view just as if we were writing normal HTML, and we will add an expression.
AngularJS View Example
<!DOCTYPE html>
<html ng-app>
<head>
<title> Welcome to AngularJS</title>
</head>
<body>
<div ng-controller="ExampleCtrl">
<h1>{{welcome}}</h1>
<ol>
<ling-repeat="students
in students">{{student.name}} - {{student.
point}}</li>
</ol>
</div>
<script src="https://ajax.googleapis.com/ajax/
libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function ExampleCtr|($scope) {
// model called 'welcome' which is a string
$scope.welcome "Hello, Angular is awesome!";
var users = [
{Name: "Micky", point: 45},
{Name "Team, point: 85},
{Name: "Suzy", point: 55},
];
// model called 'student' which is an array of objects
$scope.users = students;
}
</script>
</body>
</html>
We now have our MVC model with our data, client presentation, and mechanism for keeping both automatically synced. This is the first step to completing a functional AngularJS application. Next, we will learn the basic components, their purposes, their specific responsibilities, and the ways in which they interact together. We will now examine the conceptual components of an AngularJS application.