Контроллер 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 = "John";
    $scope.lastName = "Doe";
});
</script>

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

Анализ приложения:

Приложение AngularJS определяется с помощьюng-app. Приложение выполняется внутри <div>.

ng-controller="myCtrl"Этот атрибут является директивой AngularJS. Он используется для определения контроллера.

myCtrlЭта функция является функцией JavaScript.

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

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

The controller's$scopeконтроллера (эквивалент области видимости, диапазона управления) — это объект, используемый для хранения Model в AngularJS.

Контроллер создаёт два свойства в области видимости: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 = "John";
    $scope.lastName = "Doe";
    $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>
Полное имя: {{firstName + " " + lastName}}

</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>

Попробуйте сами »
Другие расширения