Приложение 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