controller in Angular JS

What is Controller in Angular JS
AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.
Basically The job of the controller is to build a model for the view. The controller does this by attaching the model to the scope. The scope is not the model, it's the data that you attach to the scope is the model. 

In the following example, 
$scope is not the model. The message property that we have attached to the scope is the model.
myApp.controller("myController", function ($scope) {
    $scope.message = 
"AngularJS Tutorial";
});

What is $scope
$scope is a parameter which is passed to the controller function using the angular framework. Here we add the model to the $scope object, after that it available in the view, then  in the view we can get the data through the $scope.
Add the controller with the model.

Lets Understand Controller in Angular JS with an example
  1.   Go to your visual studio and add a new project then select a empty template.
  2.   Now add a folder to your application and paste angular JS Script. And give the folder name as Scripts.



 3. Add a another script file to the script folder and give it name as “Controller.js” .This file will contain all the custom JavaScript.
In this file create a module and the controller to this Script file, following is the code for this JavaScript file. Before that drag and drop the Angualr JS Script File.
/// <reference path="angular.min.js" />

var app = angular.module('MyModule', []);
app.controller('MyController', function ($scope) {
    $scope.firstName = "Munesh";
    $scope.lastName = "Sharma";
});



      



4. Now add a HTML file to write the Operation which we want to perform or we want to show the output to the end user.
In this file we have to give the reference for the Angular.min.js file and the Controller.JS file.so that this file able to access all the feature and all the function which we have written in Controller.Js file. And hive this HTML file name as “Index.Html” and write the like following
<!DOCTYPE html>

<html ng-app="MyModule">
<head>
 
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Controller.js"></script>
</head>
<body  >
   
   
  <div  ng-controller="MyController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>
   
</body>
</html>


  
4. After writing the code in Index.html file Run your application and see the output as you expected .


5. Another way to use controller in View , by taking a variable and assign value to this variable , like following

Code in Controller class
var MyApp = angular.module("MyModule", []);

MyApp.controller("MyController", function ($scope) {
   
    var student= {

        Name: 'Munesh Sharma',
        Address: 'Jaipur',
        Gender: 'Male'
    };

    $scope.student1 = student;

});

Code in index.html
<html ng-app="MyModule">
<head>
 
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Controller.js"></script>
</head>
<body  >   

    <div ng-controller="MyController">
       
        <div> First Name : {{student1.Name}} </div>
        <div> Address : {{ student1.Address }} </div>
        <div> Gender : {{ student1.Gender }} </div>

    </div>
</body>
</html>

Output will be like following

Sometimes,on some browsers changes doesn’t reflect because there “cache “ is not disabled , so reflecting the changes disabled the cache

Hit F12 in your browser to bring up the Developer Tools. Disable the Cache. Reload your page.



Share this

Related Posts

Previous
Next Post »