AngularJS కంట్రోలర్స్

AngularJS కంట్రోలర్స్控制 AngularJS 應用程序數據。

AngularJS 控制器是常規的 JavaScript 對象。

AngularJS కంట్రోలర్స్

AngularJS 應用程序由控制器控制。

ng-controller 指令定義應用程序控制器。

控制器是由標準的 JavaScript 對象構造器創建的 JavaScript 對象。

AngularJS ఇన్స్టాన్స్

<div ng-app="myApp" ng-controller="myCtrl">  
పేరు: <input type="text" ng-model="firstName"><br>  
కుటుంబనామం: <input type="text" ng-model="lastName"><br>  
<br>  
全名: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

స్వయంగా ప్రయత్నించండి

應用程序說明：

AngularJS 應用程序由 ng-app="myApp" 定義。應用程序在 <div> 內運行。

ng-controller="myCtrl" అంశం అనేది ఒక AngularJS ఇన్స్ట్రక్షన్ ఉంటుంది. ఇది కంట్రోలర్ ని నిర్వచిస్తుంది.

myCtrl ఫంక్షన్ అనేది జావాస్క్రిప్ట్ ఫంక్షన్ ఉంటుంది.

AngularJS ఉపయోగిస్తుంది $scope ఆబ్జెక్ట్ కంట్రోలర్ కాల్ చేస్తుంది.

AngularJS లో, $scope అనేది అప్లికేషన్ ఆబ్జెక్ట్ (అప్లికేషన్ వేరు వేరు వారి మరియు ఫంక్షన్స్ యజమాని).

కంట్రోలర్స్ పరిధిలో ఉన్నాయి.firstName మరియు lastNameలో రెండు అంశాలను (వేరు వేరు వారు) సృష్టించారు.

ng-model ఇన్పుట్ ఫీల్డ్స్ ను కంట్రోలర్ అంశాలకు బంధించే నిర్దేశం (firstName మరియు lastName).

కంట్రోలర్ మందిరికలు

పైని ఉదాహరణ ఒక రెండు అంశాలు కలిగిన కంట్రోలర్ ఆబ్జెక్ట్ ని ప్రదర్శించింది: lastName మరియు firstName

కంట్రోలర్స్ మరొక మందిరికలు కలిగి ఉండవచ్చు (ఫంక్షన్స్ గా వేరు వేరు వారు):

AngularJS ఇన్స్టాన్స్

<div ng-app="myApp" ng-controller="personCtrl">  
పేరు: <input type="text" ng-model="firstName"><br>  
కుటుంబనామం: <input type="text" ng-model="lastName"><br>  
<br>  
పూర్తి పేరు: {{fullName()}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  };  
});  
</script>

స్వయంగా ప్రయత్నించండి

వెలుపలి ఫైల్లో కంట్రోలర్స్

పెద్ద అప్లికేషన్లలో, కంట్రోలర్స్ వెలుపలి ఫైల్లో నిల్వ చేయడం చాలా సాధారణం.

కేవలం <script> టాగ్ మధ్య కోడ్ ను ఒక పేరు తో కలిపి కప్పండి: personController.js వెలుపలి ఫైల్లో:

AngularJS ఇన్స్టాన్స్

<div ng-app="myApp" ng-controller="personCtrl">  
పేరు: <input type="text" ng-model="firstName"><br>  
కుటుంబనామం: <input type="text" ng-model="lastName"><br>  
<br>  
పూర్తి పేరు: {{fullName()}}  
</div>  
<script src="personController.js"></script>

స్వయంగా ప్రయత్నించండి

మరొక ఉదాహరణ

తదుపరి ఉదాహరణ కొరకు, మేము కొత్త కంట్రోలర్ ఫైల్ సృష్టించాము:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

ఫైల్ని కాపీలో ఉంచండి namesController.js:

అప్పుడు అప్లికేషన్లో కంట్రోలర్ ఫైల్స్ వాడండి:

AngularJS ఇన్స్టాన్స్

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="namesController.js"></script>

స్వయంగా ప్రయత్నించండి