Контроллеры 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 функция - это функция JavaScript.

AngularJS использует $scope объект вызывается контроллером.

В AngularJS $scope - это объект приложения (владелец всех переменных и функций приложения).

Контроллер в диапазоне (firstName и lastNameвнутри создают два свойства (переменные).

ng-model Инструкции связывают поля ввода с свойствами контроллера (firstName и lastName).

Методы контроллера

Upper example demonstrates a controller object with two properties: lastName and 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>

Попробуйте сами