Учебное пособие по контроллеру AngularJS с примером

Содержание:

Anonim

Что такое контроллер в AngularJs?

Контроллеры в AngularJs берут данные из представления, обрабатывают данные, а затем отправляют эти данные в представление, которое отображается для конечного пользователя. Контроллер будет иметь вашу основную бизнес-логику.

Контроллер будет использовать модель данных, выполнять необходимую обработку, а затем передавать вывод в представление, которое, в свою очередь, отображается для конечного пользователя.

В этом руководстве вы узнаете:

  • Что делает контроллер с точки зрения Angular
  • Как собрать базовый контроллер
  • Как определить методы в контроллере
  • Использование ng-controller во внешних файлах

    • Что делает контроллер с точки зрения Angular

    Ниже приводится простое определение работы Angular JS Controller.

    • Основная ответственность контроллера - контролировать данные, которые передаются в представление. Область видимости и вид имеют двустороннюю связь.
    • Свойства представления могут вызывать «функции» в области видимости. Более того, события в представлении могут вызывать «методы» в области видимости. Приведенный ниже фрагмент кода дает простой пример функции.
      • Функция ($ scope), которая определяется при определении контроллера и внутренней функции, которая используется для возврата конкатенации $ scope.firstName и $ scope.lastName.
      • В AngularJS, когда вы определяете функцию как переменную, она называется методом.
    • Таким образом, данные передаются от контроллера в область видимости, а затем данные передаются из области видимости в представление и обратно.
    • Область видимости используется, чтобы представить модель представлению. Модель может быть изменена с помощью методов, определенных в области видимости, которые могут запускаться через события из представления. Мы можем определить двустороннюю привязку модели от области видимости к модели.
    • В идеале контроллеры не следует использовать для управления DOM. Это должно быть сделано с помощью директив, которые мы увидим позже.
    • Лучшая практика - иметь контроллер в зависимости от функциональности. Например, если у вас есть форма для ввода и для этого вам нужен контроллер, создайте контроллер под названием «контроллер формы».

    Как собрать базовый контроллер

    Прежде чем мы начнем с создания контроллера, нам нужно сначала настроить нашу базовую HTML-страницу.

    Приведенный ниже фрагмент кода представляет собой простую HTML-страницу с заголовком «Регистрация событий» и ссылки на важные библиотеки, такие как Bootstrap, jquery и Angular.

    1. Мы добавляем ссылки на таблицы стилей начальной загрузки CSS, которые будут использоваться вместе с библиотеками начальной загрузки.
    2. Мы добавляем ссылки на библиотеки angularjs. Итак, теперь все, что мы делаем с angular.js в будущем, будет ссылаться на эту библиотеку.
    3. Мы добавляем ссылки на библиотеку начальной загрузки, чтобы сделать нашу веб-страницу более отзывчивой для определенных элементов управления.
    4. Мы добавили ссылки на библиотеки jquery, которые будут использоваться для манипуляций с DOM. Это требуется для Angular, потому что некоторые функции Angular зависят от этой библиотеки.

    По умолчанию приведенный выше фрагмент кода будет присутствовать во всех наших примерах, так что мы можем показать только конкретный код angularJS в следующих разделах.

    Во-вторых, давайте посмотрим на наши файлы и файловую структуру, с которой мы начнем на протяжении всего курса.

    1. Сначала мы разделяем наши файлы на 2 папки, как это делается с любым обычным веб-приложением. У нас есть папка «CSS». Он будет содержать все наши файлы каскадных таблиц стилей, а затем у нас будет наша папка «lib», в которой будут все наши файлы JavaScript.
    2. Файл bootstrap.css помещается в папку CSS и используется для улучшения внешнего вида нашего веб-сайта.
    3. Angular.js - это наш основной файл, который был загружен с сайта angularJS и хранится в нашей папке lib.
    4. Файл app.js будет содержать наш код для контроллеров.
    5. Файл bootstrap.js используется в качестве дополнения к файлу bootstrap.cs для добавления функциональности начальной загрузки в наше веб-приложение.
    6. Файл jquery будет использоваться для добавления на наш сайт функции управления DOM.

    Давайте посмотрим на пример использования angular.js,

    Здесь мы хотим просто отображать слова «AngularJS» как в текстовом формате, так и в текстовом поле, когда страница просматривается в браузере.

    


    Guru99 Global Event
    

    Tutorial Name : 
    This tutorial is {{tutorialName}}

    Пояснение к коду:

    1. Нг-приложение ключевое слово используется для обозначения того, что данное приложение следует рассматривать в качестве углового применения. Все, что начинается с префикса «ng», называется директивой. «DemoApp» - это имя, данное нашему приложению Angular.JS.
    2. Мы создали тег div, и в этот тег мы добавили директиву ng-controller вместе с именем нашего контроллера «DemoController». Это в основном дает нашему тегу div возможность доступа к содержимому Demo Controller. Вам необходимо указать имя контроллера в директиве, чтобы убедиться, что вы можете получить доступ к функциям, определенным в контроллере.
    3. Мы создаем привязку модели с помощью директивы ng-model. Что это значит, так это то, что он привязывает текстовое поле для Tutorial Name к переменной-члену «tutorialName».
    4. Мы создаем переменную-член с именем «tutorialName», которая будет использоваться для отображения информации, которую пользователь вводит в текстовое поле для Tutorial Name.
    5. Мы создаем модуль, который будет прикреплен к нашему приложению DemoApp. Итак, этот модуль теперь становится частью нашего приложения.
    6. В модуле мы определяем функцию, которая присваивает значение по умолчанию "AngularJS" нашей переменной tutorialName.

    Если команда выполнена успешно, при запуске кода в браузере будет показан следующий результат.

    Выход:

    Поскольку мы присвоили переменной tutorialName значение «Angular JS», оно отображается в текстовом поле и в строке обычного текста.

    Как определить методы в контроллере

    Обычно нужно определить несколько методов в контроллере для разделения бизнес-логики.

    Например, предположим, что если вы хотите, чтобы ваш контроллер выполнял 2 основных действия,

    1. Выполните сложение 2-х чисел
    2. Выполните вычитание 2 чисел

    Тогда в идеале вы должны создать 2 метода внутри вашего контроллера, один для выполнения сложения, а другой для выполнения вычитания.

    Давайте посмотрим на простой пример того, как вы можете определять собственные методы в контроллере Angular.JS. Контроллер просто вернет строку.

    Event Registration


    Guru99 Global Event
    

    Tutorial Name :

    This tutorial is {{tutorialName}}

    Пояснение к коду:

    1. Здесь мы просто определяем функцию, которая возвращает строку «AngularJS». Функция прикрепляется к объекту области видимости через переменную-член с именем tutorialName.
    2. Если команда выполнена успешно, при запуске кода в браузере будет показан следующий результат.

    Выход:

    Использование ng-controller во внешних файлах

    Давайте посмотрим на пример «HelloWorld», где все функциональные возможности были помещены в один файл. Пришло время разместить код контроллера в отдельных файлах.

    Для этого выполните следующие действия.

    Шаг 1) В файле app.js добавьте следующий код для вашего контроллера.

    angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});

    Приведенный выше код выполняет следующие действия:

    1. Определите модуль под названием «приложение», который будет содержать контроллер вместе с функциями контроллера.
    2. Создайте контроллер с именем «HelloWorldCtrl». Этот контроллер будет использоваться для отображения сообщения «Hello World».
    3. Объект области используется для передачи информации от контроллера в представление. Таким образом, в нашем случае объект области видимости будет использоваться для хранения переменной с именем «сообщение».
    4. Мы определяем переменную message и присваиваем ей значение «Hello World».

    Шаг 2) Теперь в вашем файле Sample.html добавьте класс div, который будет содержать директиву ng-controller, а затем добавьте ссылку на переменную-член «message».

    Также не забудьте добавить ссылку на файл сценария app.js, в котором есть исходный код вашего контроллера.

    Event Registration


    Guru99 Global Event
    

    {{message}}

    Если приведенный выше код введен правильно, при запуске кода в браузере будет показан следующий результат.

    Выход:

    Резюме

    • Основная ответственность контроллера - создать объект области, который, в свою очередь, передается в представление.
    • Как создать простой контроллер с помощью директив ng-app, ng-controller и ng-model
    • Как добавить пользовательские методы к контроллеру, которые можно использовать для разделения различных функций в модуле angularjs.
    • Контроллеры могут быть определены во внешних файлах, чтобы отделить этот слой от слоя просмотра. Обычно это лучший способ создания веб-приложений.