Kontrolery AngularJS

Kontrolery AngularJSZarządzaj danymi aplikacji AngularJS.

Kontrolery AngularJS są zwyczajnymi Obiekt JavaScript.

Kontrolery AngularJS

Aplikacja AngularJS jest kontrolowana przez kontrolery.

Instrukcja ng-controller definiuje kontroler aplikacji.

Kontroler jest tworzony za pomocą standardowego konstruktora obiektu JavaScript Obiekt JavaScript.

Przykłady AngularJS

<div ng-app="myApp" ng-controller="myCtrl">  
Imię: <input type="text" ng-model="firstName"><br>  
Nazwisko: <input type="text" ng-model="lastName"><br>  
<br>  
Pełna nazwa: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

Spróbuj sam

Opis aplikacji:

Aplikacja AngularJS jest kontrolowana przez ng-app="myApp" Definicja. Aplikacja działa wewnątrz <div>.

ng-controller="myCtrl" atrybut to instrukcja AngularJS. Definiuje ona kontroler.

myCtrl funkcja to funkcja JavaScript.

AngularJS używa $scope odwołania do kontrolera.

W AngularJS $scope jest obiektem aplikacji (właścicielem wszystkich zmiennych i funkcji aplikacji).

Kontroler w zakresie (firstName i lastNamew funkcji (w której tworzy się dwie zmienne (zmienne)).

ng-model Instrukcje przypisują pola kontrolera (firstName i lastName).

Metody kontrolera

Powyższy przykład pokazuje kontroler obiektu z dwoma atrybutami: lastName i firstName.

Kontrolery mogą również mieć metody (jako zmienne funkcji):

Przykłady AngularJS

<div ng-app="myApp" ng-controller="personCtrl">  
Imię: <input type="text" ng-model="firstName"><br>  
Nazwisko: <input type="text" ng-model="lastName"><br>  
<br>  
Pełna nazwa: {{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>

Spróbuj sam

Kontrolery w plikach zewnętrznych

W większych aplikacjach przechowywanie kontrolerów w zewnętrznych plikach jest bardzo powszechne.

Wystarczy skopiować kod między znacznikami <script> do pliku o nazwie personController.js w zewnętrznym pliku:

Przykłady AngularJS

<div ng-app="myApp" ng-controller="personCtrl">  
Imię: <input type="text" ng-model="firstName"><br>  
Nazwisko: <input type="text" ng-model="lastName"><br>  
<br>  
Pełna nazwa: {{fullName()}}  
</div>  
<script src="personController.js"></script>

Spróbuj sam

Inny przykład

Dla następnego przykładu utworzymy nowy plik kontrolera:

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

Zapisz plik jako namesController.js:

Następnie użyj pliku kontrolera w aplikacji:

Przykłady 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>

Spróbuj sam