Приложение AngularJS в основном полагается на контроллеры для управления потоком данных в приложении. Контроллер определяется с помощью директивы ng-controller. Контроллер - это объект JavaScript, содержащий атрибуты / свойства и функции. Каждый контроллер принимает $scope в качестве параметра, который относится к приложению / модулю, который контроллер должен контролировать.
Внимание!!!
Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!
Opera
![]()
Google Chrome
![]()
Mozilla Firefox
![]()
Yandex
![]()
Здесь мы объявили контроллер studentController, используя директиву ng-controller. В качестве следующего шага мы определим studentController следующим образом:
- StudentController определяется как объект JavaScript с аргументом $scope в качестве аргумента.
- $Scope относится к приложению, которое должно использовать объект studentController.
- $Scope.student - свойство объекта studentController.
- FirstName и lastName - это два свойства объекта $scope.student. Мы передали им значения по умолчанию.
- FullName - это функция объекта $scope.student, задачей которого является возвращение комбинированного имени.
- В функции fullName мы получаем объект-ученик, а затем возвращаем комбинированное имя.
- В качестве примечания мы также можем определить объект контроллера в отдельном JS-файле и ссылаться на этот файл на странице html.
Теперь мы можем использовать свойство studentController для учащихся с использованием ng-модели или используя выражения следующим образом.
- Мы ограничили student.firstName и student.lastname двумя полями ввода.
- Мы ограничили student.fullName () в HTML.
- Теперь, когда вы вводите что-либо в поля ввода имени и фамилии, вы можете увидеть, как полное имя автоматически обновляется.
Пример
В следующем примере рассмотрено использование контроллера.
Enter last name:
You are entering: {{student.fullName()}}
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- AngularJS - Службы - 21/07/2018 20:07
- AngularJS - Интернализация - 20/07/2018 17:18
- AngularJS - Пользовательские директивы - 20/07/2018 17:17
- AngularJS - инъекция зависимостей - 20/07/2018 17:14
- AngularJS - Области - 20/07/2018 17:13
- AngularJS - View - 20/07/2018 17:09
- AngularJS - Ajax - 20/07/2018 17:08
- AngularJS - Подключение вебстраниц - 20/07/2018 17:06
- AngularJS - Формы - 20/07/2018 17:02
- AngularJS - Модули - 20/07/2018 16:34
- AngularJS - HTML DOM - 20/07/2018 16:30
- AngularJS - Таблицы - 20/07/2018 16:26
- AngularJS - Фильтры - 20/07/2018 16:13