An architecture is basically a software pattern used to develop an application. It consists of three components:
Model: This component consists of a database & is responsible for managing the data & logic of the application. It responds to the request made by the View component & the instruction given by the Controller component, in order to update itself.
View: This component is responsible for displaying the application data to the users. The View is basically the user interface that helps to render the required data to the user, with the help of the AngularJS expressions.
Controller: This component is responsible for communicating & interacting between the Model & the View Component, i.e. its main job is to connect the model and the view component. It helps to validate the input data by implementing some business logic that manipulates the state of the data model.
Normally, when we talk about MVC architecture, we have to split our applications into these three components and then write the code to connect them. However, in AngularJS, all we have to do is split the application into MVC and it does the rest by itself. It saves a lot of time and allows you to finish the job with less code.
The Model
<script> $scope.person = { 'Name': 'XVZ IND', ‘Address’: ‘MG Road,US’ } </script>
It is AngularJS’ most basic architectural level. The data that needs to be shown is stored in this module. It gathers the user’s information into any form’s input areas. It also features functions that are called in response to user actions like clicking a button or changing the model data.
AngularJS provides a robust declarative data binding experience. It follows that view elements may have their values connected to the Model. The value can be modified by the View or in the Model because AngularJS binding is two-way.
The View
<h1> {{ person.Name }} </h1> The user interface for your application is specified in this module. Simply said, data is presented to the user by the architecture’s presentation layer. It contains HTML code for the UI pages. In addition, it has directives and templates that specify how the user interface should appear and function. A view makes requests to the appropriate controller based on how users interact with the program. In response, the controller updates the View in accordance with the server’s answer.The Controller
function address ($scope) { // Model Part is written here }
The processing brain behind both the Model and view modules, this module serves as the connecting element between both. It is in charge of creating or obliterating the View and the Model.
It contains all of the business processes and coding logic. Additionally, the controller queries the server and gets a response. Afterward, based on the response, it modifies the View and Model. In a nutshell, everything is under the controller’s control.
Now, you can look at the final code of all of the above in a single code,
<!doctype html> <html ng-app> <head> <title>Angular MVC </title> <script src="lib/Angular/angular.min.js"></script> </head> <body> <div ng-controller="address"> <h1>{{person.Name}}</h1> </div> <script type="text/javascript"> function address ($scope) { $scope.person = { 'Name': 'XYZ IND', 'Address': 'MG ROAD, US' } } </script> </body> </html>
No comments:
Post a Comment