Latest web development tutorials

AngularJS Контроллеры

AngularJS AngularJS приложения контроллера данных.

AngularJS контроллер нормальный объект JavaScript.


AngularJS Контроллеры

AngularJS приложение контроллера.

Директива нг-контроллер определяет контроллер приложения.

Контроллер представляет собой объект JavaScript , созданный конструктором стандартных объектов JavaScript.

AngularJS примеры

<Div нг-приложение = "MyApp " нг-контроллер = "myCtrl">

Имя: <входной тип = "текст" нг-модель = "FirstName"> <br>
Фамилия: <входной тип = "текст" нг-модель = "LastName"> <br>
<Br>
Имя: {{FirstName + "" + LastName}}

</ Div>

<Script>
вар приложение = angular.module ( 'MYAPP', []);
app.controller ( 'myCtrl', функция ($ сфера) {
$ Scope.firstName = "Джон";
$ Scope.lastName = "Doe";
});
</ Script>

Попробуйте »

Анализ Применение:

AngularJS приложения , определенные нг-приложения. Приложения, работающие в <DIV> внутри.

нг-контроллер = "myCtrl"? Свойство инструкции AngularJS. Он используется для определения контроллера.

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

AngularJS с помощью объекта $ области действия для вызова контроллера.

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

Контроллер $ Сфера (эквивалент объема, диапазон регулирования) , чтобы сохранить AngularJS Model (модель) объектов.

область видимости контроллера было создано два свойства (имя и фамилия).

нг-модели ввода директивы привязки поля к контроллеру атрибутов (имя и фамилия).


метод контроллера

Приведенный выше пример иллюстрирует объект контроллера и свойство LastName FirstName с ними.

Контроллер также может иметь методы (функции и переменные):

AngularJS примеры

<Div нг-приложение = "MyApp " нг-контроллер = "personCtrl">

Имя: <входной тип = "текст" нг-модель = "FirstName"> <br>
Фамилия: <входной тип = "текст" нг-модель = "LastName"> <br>
<Br>
Имя: {{FullName ()}}

</ Div>

<Script>
вар приложение = angular.module ( 'MYAPP', []);
app.controller ( 'personCtrl', функция ($ сфера) {
$ Scope.firstName = "Джон";
$ Scope.lastName = "Doe";
$ Scope.fullName = функция () {
возврат $ scope.firstName + "" + $ scope.lastName;
}
});
</ Script>

Попробуйте »

Внешний контроллер файла

В больших приложениях, контроллер обычно хранится во внешнем файле.

Проще говоря <сценарий> Тег Скопируйте код с именем personController.js внешний файл может быть:

AngularJS примеры

<Div нг-приложение = "MyApp " нг-контроллер = "personCtrl">

Имя: <входной тип = " текст" нг-модель = "FirstName"> <br>
Фамилия: <входной тип = " текст" нг-модель = "LastName"> <br>
<Br>
Полное имя: {{FirstName + " " + LastName}}

</ Div>

<Script SRC = "personController.js"> </ скрипт>

Попробуйте »

Другие примеры

В следующем примере создается новый файл контроллера:

angular.module ( 'MYAPP', []). Контроллер ( 'namesCtrl', функция ($ сфера) {
$ Scope.names = [
{Name: "Джани", страна: 'Норвегия'},
{Name: 'Хеге', страна: 'Швеция'},
{Name: 'Кай', страна: 'Дания'}
];
});

Сохраните файл под именем namesController.js :

Затем, с помощью контроллера в файле приложения:

AngularJS примеры

<Div нг-приложение = "MyApp " нг-контроллер = "namesCtrl">

<Ul>
<Li нг-повтор = "х в именах">
{{X.name + ',' + x.country}}
</ Li>
</ UL>

</ Div>

<Script SRC = "namesController.js"> </ скрипт>

Попробуйте »