Before writing code, we will know a little bit about the Module and Controller.
So, now we saw how to write a controller and module to display the view.
For the understanding purpose I have given this image below.
What is Module?
Ans. A module is a container for different parts of your application i.e Controllers, Services, directives, filters, etc.
So, we can think of a module as a Main() method in other types of applications.
What is Controller?
Ans. In angular, a "controller" is a JavaScript function. The job of the controller is to build a model for the view to display.
So, now we will see how to write a controller to build a model to display the view.
First, we will create one Script as the name like "Script.js" .You can give any name.
Script.Js
/// <reference path="angular.js" />
//Create the Module
var myApp = angular.module("myModule", []);
//Creating controller and registering with module
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS Tutorial";
});
After that we will write in html, and also we can write in view page also. So, I have taken in view page.
NewPractice.cshtml
Now, we will see the output.
OutPut:
/// <reference path="angular.js" />
//Create the Module
var myApp = angular.module("myModule", []);
//Creating controller and registering with module
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS Tutorial";
});
After that we will write in html, and also we can write in view page also. So, I have taken in view page.
NewPractice.cshtml
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>NewPractice</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/script.js"></script>
</head>
<body ng-controller="myController">
<div>
{{ message }}
</div>
<br />
<div>
{{ message }}
</div>
</body>
</html>
Now, we will see the output.
OutPut:
For the understanding purpose I have given this image below.
So, now we can understand clearly, how to use and where to use the module as well as a controller.
No comments:
Post a Comment