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


Содержание

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

Чтобы воспользоваться документацией AngularJS в автономном режиме, щелкните кнопку ниже. Произойдет обновление текущей страницы и в фоне подгрузятся все необходимые файлы (примерно 3,5 МБ). В следующий раз при загрузке документов браузер возьмет эти файлы из кэша.

Эта особенность поддерживается всеми современными браузерами, за исключением IE9 которой не поддерживает кэш приложений.

Супер-разработка Google, супер-перевод на русский язык tamtakoe, maksimr, vsorlov, altbog, alvas, madhead, DWand, Chiuaua, davetoxa, nikolaifedorov и др. ©2010-2013 ( (offline support enabled) )

Лицензия на исходный код The MIT License. Лицензия на документацию CC BY 3.0.

Как правильно наследовать контроллер в angular?

Суть вопроса. Есть два контроллера:

Код абстрактного контроллера оставим неизменным:

А вот второй контроллер унаследуем двумя способами и вызовем инициализацию:
способ №1:

Разница есть и существенная. После инициализации контроллера унаследованного первым способом у нас будет имя Vova, вторым способом — Petya. Понятно, что ожидаем Петю. И понятно, что данный абстрактный контроллер здесь можно переписать так, что оба раза будет Петя. Но переписывать не годится, тем более, что код является корректным.

AngularJS Controllers

AngularJS controllers control the data of AngularJS applications.

AngularJS controllers are regular JavaScript Objects.

AngularJS Controllers

AngularJS applications are controlled by controllers.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

AngularJS Example

The AngularJS application is defined by ng-app=»myApp». The application runs inside the

The ng-controller=»myCtrl» attribute is an AngularJS directive. It defines a controller.

The myCtrl function is a JavaScript function.

AngularJS will invoke the controller with a $scope object.

In AngularJS, $scope is the application object (the owner of application variables and functions).

The controller creates two properties (variables) in the scope (firstName and lastName).

The ng-model directives bind the input fields to the controller properties (firstName and lastName).

Controller Methods


The example above demonstrated a controller object with two properties: lastName and firstName.

A controller can also have methods (variables as functions):

Изучаем AngularJS на пяти практических примерах

Скачать рабочие материалы к данной статье

Вы, наверное, слышали уже о AngularJS – JS-фреймворке с открытым исходным кодом, разработанном специалистами Google, который реально меняет представление о веб-приложениях. О нем уже много было написано, но до сих пор в Сети очень трудно найти что-то действительно ориентированное на разработчиков.

Где бы лаконично и конкретно, на практических примерах были описаны принципы работы AngularJS. Цель этой статьи – изменить подобное положение вещей. Ниже приводится описание основных составляющих элементов Angular: Модели,Представления, Контроллеры, Сервисы и Фильтры, созданное на основе пяти конкретных примеров.

Если вы предпочитаете редактировать код через ваш любимый редактор, скачайте ZIP-архив по ссылке выше.

Что такое AngularJS?

По большому счету AngularJS является основой, которая связывает HTML-код (который генерируется для просмотра страницы в окне браузера) с JavaScript объектов /моделей. Когда изменяется один из объектов, автоматически обновляется и генерируемая страница. Верно и обратное — модели связаны с текстовым полем (контентом страницы). Когда изменяется контент, это вызывает изменения и в коде сайта.

AngularJS связывает коды в единую систему, и вам не нужно больше обновлять HTML вручную или инспектировать элементы, как в случае, если вы используете JQuery. В самом деле, ни в одном из примеров, приведенных здесь, даже не упоминается JQuery!

Для использования AngularJS вы должны добавить его в код своей страницы. Для этого в тэг нужно прописать соответствующие параметры. Google’s CDN для более быстрой загрузки рекомендую еще такой код:

AngularJS включает в себя большое количество директив , которые позволяют связать HTML-элементы моделей. Они представляют из себя атрибуты, начинающиеся с префикса ng-, их можно добавлять к любому элементу. Самым важным атрибутом, который, если вы хотите использовать Angular, нужно включить во все страницы сайта является ng- приложений:

Атрибут следует добавлять к элементу, который охватывает нужную нам часть страницы: либо все тело страницы, либо ее часть ограниченную тэгами div. Angular ищет его при загрузке страницы и автоматически оценивает все директивы , которые видит, как дочерние элементы.

Но довольно теории. Давайте рассмотрим непосредственно некоторые коды.

Меню навигации

В качестве первого примера мы создадим меню навигации, в котором выделяется активный элемент. В примере задействованы только директивы AngularJS, это самое простейшее приложение, использующее фреймворк.
Код выглядит следующим образом:

В приведенном выше примере, используются директивы Angular для задания и считывания активной переменной. Когда она изменяется, это инициирует изменения HTML-кода элемента. В терминологии Angular эта переменная называется моделью. Она доступна для всех директив текущей области. Ее также могут обрабатывать контроллеры (подробнее об этом в следующем примере).

Если вы использовали шаблоны JavaScript раньше, то вы знакомы с синтаксисом команды <>. Когда фреймворк видит такую строку, он заменяет содержимое переменной. Эта операция повторяется каждый раз, когда изменяется переменная.

Встроенный редактор

Для второго примера, мы создадим простой встроенный редактор – при нажатии пункта меню всплывает небольшое текстовое поле с подсказкой. Мы используем контроллер, который будет инициализировать модели и задавать два разных метода отображения подсказки. Контроллеры являются стандартными функциями JavaScript, которые автоматически выполняются фреймворком Angular. Они связаны с кодом отображения страницы вашего сайта через директивы ng-controller .

Когда функция контроллера запускается на исполнение, для нее в качестве параметра задается специальный объект $scope. Он отвечает за ввод текста в текстовый редактор. Для того, чтобы вывести его на экран, нужно прописать дополнительные свойства и функции, которые описывают отображение его элементов. С помощью NG-моделей осуществляется связь кода сайта с текстом, который вводится в рабочее поле редактора. При вводе текста Angular задает соответствующие изменения переменных.

Форма заказа

В этом примере мы рассмотрим код формы заказы, в которой автоматически выводится общая сумма. Здесь использована еще одна полезная функция AngularJS — фильтры . Фильтры позволяют вносить изменения в модели, а также объединять их с помощью символа «|». В приведенном ниже примере, используется фильтр валюты , чтобы перевести числовое значение в корректный формат цены — с разделением долларов и центов. Когда вы рассмотрите пример № 4, вы сможете с легкостью задавать свои собственные фильтры.

Связка ng-repeat ( описание ) – это еще один полезный элемент Angular. Она позволяет запустить цикл обработки массива элементов, а также задать разметку для каждого из них. Она автоматически обновляет код, если один из элементов был изменен или удален.

Илон Маск рекомендует:  Php и web кэширование

Функция поиска


В этом примере приводится функция, позволяющая фильтровать список элементов по определенному критерию. Это еще одно направление, где с успехом может применяться AngularJS.

Фреймворк является идеальным инструментом для создания пользовательских фильтров. Для этого сперва мы должны сформировать специальный модуль для нашего приложения.

Модули представляют собой форму организации приложений JavaScript в автономные компоненты, которые можно связывать между собою в разных вариантах и последовательностях. Angular также использует этот метод группировки кодов. Потому прежде, чем создавать фильтр, нужно сначала создать модули для разных приложений.

Для того, чтобы создать модуль приложения, нужно выполнить всего два действия:

  1. Использовать функцию angular.module(«name»,[]) при вызове JS. Это установит границы нового модуля;
  2. Задать имя модуля в качестве значения директивы ng-app.

После этого фильтр создается очень просто функцией filter(). Также просто потом вызвать его через обращение к соответствующему модулю angular.module(«name», []).

В создании различных фильтров используется подход, базирующийся на общей философии AngularJS. В соответствии с ней каждая часть кода, который вы пишете, должна быть автономной, легко тестируемой, а также иметь возможность использоваться разными элементами фреймворка. Вы можете применять созданный однажды фильтр для обработки данных в рамках других приложений. И даже объединять его в последовательности с другими фильтрами.

Функция переключения режима вывода элементов на странице

Еще одна популярная функция – переключение по выбору пользователя различных режимов вывода элементов на странице (список или плитка). Через Angular это делается очень просто.

Кроме того, в этом примере описывается еще один важный элемент фреймворка – сервисы. Это объекты, которые могут быть использованы приложениями для взаимодействия с сервером, API или другими источниками данных. В нашем случае, мы напишем сервис, который взаимодействует с Instagram’s API и выводит массив с самыми популярными на текущий момент фотографиями.

Обратите внимание, что для работы этого кода, нам потребуется использовать на странице дополнительный файл Angular.js:

Для оптимизации работы с AJAX API здесь используется модуль ngResource (в коде модуля задействована переменная $resource).

Сервисы – это полностью автономные элементы, что делает возможным написание различных вариантов модулей для реализации процесса, при этом не затрагивая остальную часть кода.

Например, во время тестирования, вы можете предпочесть выводить данные из четко заданного массива фотографий (без фильтров и обработки), что ускорит отладку всей системы.

Дополнительная литература

Если вы все же добрались до конца этой статьи, то у вас уже должно сложиться общее представление о базовых принципах работы с фреймворком AngularJS. Тем не менее, если вы хотите стать настоящим профи в данном вопросе, есть много источников, по которым вы можете изучить эту тему глубже. Вот список ресурсов, которые помогут вам этом:

Сайт AngularJS
Руководство по AngularJS
Официальное пособие по AngularJS
Список сайтов, где представлено еще много информации по теме, видео и учебники

Данная публикация представляет собой перевод статьи « Learn AngularJS With These 5 Practical Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Приложение 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.
  • Теперь, когда вы вводите что-либо в поля ввода имени и фамилии, вы можете увидеть, как полное имя автоматически обновляется.

Пример

В следующем примере рассмотрено использование контроллера.

AngularJS Controller

The controller in AngularJS is a JavaScript function that maintains the application data and behavior using $scope object.

You can attach properties and methods to the $scope object inside a controller function, which in turn will add/update the data and attach behaviours to HTML elements. The $scope object is a glue between the controller and HTML.

The ng-controller directive is used to specify a controller in HTML element, which will add behavior or maintain the data in that HTML element and its child elements.

The following example demonstrates attaching properties to the $scope object inside a controller and then displaying property value in HTML.


In the above example, ng-controller=»myController» directive is applied to the

Now, to create «myController», we need to create an application module. The module defines an application and keeps its parts like controllers, services etc. out of global scope. (You will learn about the module in the next section.) After creating a module, we add a controller function using the controller() method where the first parameter should be the name of the controller and second parameter should be a function for the controller. The controller function includes $scope parameter which will be injected by AngularJS framework.

The following figure illustrates the above example.

Steps to create an AngularJS Controller

Attach Behaviors

You can attach multiple methods to the scope object inside a controller, which can be used as an event handler or for other purposes.

The following example demonstrates handling click event of a button.

In the above example, we have attached showMsg() function to the scope object. The showMsg() method is called on button click. The ng-click directive is used to handle click event in AngularJS application.

Note that the properties and methods attached to the scope object inside a particular controller is only available to the HTML elements and its child elements where ng-controller directive is applied.

In the above example, the «message» property is defined inside myController, so it will only be available to div1 and div2 but not div3 and div4. The same way, message property defined inside anotherController will only be available to div4. The div3 element does not come under any controller, so «message» property will be null or undefined.

Attach Complex object

You can also attach an object to the $scope inside controller and display value of its properties in HTML.

As you can see in the above example, a student object is attached to the $scope and its properties and methods can be accessed using an expression, ng-model, or ng-bind directives with dot notation.

Илон Маск рекомендует:  Что такое код xml_parser_set_option

Nested Controllers

Angular allows nested controllers. The following example demonstrates multiple controllers.

As you can see in the above example, a child controller can access properties and methods attached in parent controller function, whereas parent controller cannot access properties and methods attached in child controller.

Minification Syntax

All the script files in AngularJS application should be minified in the production environment.

The minification process shortens parameter and function names. As mentioned before, AngularJS controller function may include $scope or other parameters. If minification process changes the parameter names then AngularJS application will break because Angular framework needs the same parameter name for built-in objects such as $scope. Use the following syntax so that minification will not change the parameter name.

In the above example, we have given name of the parameter and controller function in the square bracket []. Parameter name will be first and last member will be action controller function in the square brackets. This will tell minifier not to convert $scope name in the minification process.

Урок 5. AngularJS. Controller as синтаксис

Дата публикации: 29-04-2020

От автора: в этом уроке мы познакомимся с новым синтаксисом для работы с контроллерами — это так называемый controller as синтаксис. Использование данного варианта позволяет исключить использование сервиса $scope в работе, а также позволяет сделать сложный код чуть более понятным. Также в уроке мы научимся создавать методы контроллера.

Все уроки курса:

Комментарии (3)


Здравствуйте, Андрей!
Скажите пожалуйста, что означает первая строка в файле scripts.js:
‘use strict’;

Здравствуйте.
Эта строка включает т.н. строгий режим. Здесь можно подробно прочесть о нем. И здесь на простых примерах можно также о нем почитать.

Добавить комментарий Отменить ответ

Для отправки комментария вы должны авторизоваться.

Количество уроков: 28

Продолжительность курса: 10:16:32

Автор: Андрей Кудлай

Меня зовут Андрей Кудлай — один из авторов проекта webformyself и практикующий веб-разработчик. Имею хорошие навыки работы с HTML, CSS, jQuery, PHP, MySQL, Bootstrap, CakePHP, Yii2, WordPress, OpenCart. Являюсь автором нескольких курсов-бестселлеров издательства WebForMySelf.com

Описание курса: Приветствую Вас, друзья, в новом цикле уроков, посвященных знакомству с JS фреймворком AngularJS и изучению основ работы с ним. Собственно, данный цикл будет называться просто — Уроки AngularJS (на русском языке). Для чего нужен данный фреймворк и какова сфера его применения?

Все права защищены © 2020
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

AngularJS — Controllers

AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object that contains attributes/properties, and functions. Each controller accepts $scope as a parameter, which refers to the application/module that the controller needs to handle.

Here, we declare a controller named studentController, using the ng-controller directive. We define it as follows −

The studentController is defined as a JavaScript object with $scope as an argument.

The $scope refers to application which uses the studentController object.

The $scope.student is a property of studentController object.

The firstName and the lastName are two properties of $scope.student object. We pass the default values to them.

The property fullName is the function of $scope.student object, which returns the combined name.

In the fullName function, we get the student object and then return the combined name.

As a note, we can also define the controller object in a separate JS file and refer that file in the HTML page.

Now we can use studentController’s student property using ng-model or using expressions as follows −

We bound student.firstName and student.lastname to two input boxes.

We bound student.fullName() to HTML.

Now whenever you type anything in first name and last name input boxes, you can see the full name getting updated automatically.

Example


The following example shows the use of controller −

Stepan Suvorov Blog

Release 2.0

Передача данных между сущностями AngularJS

Один из самых распространенных вопросов по AngularJS – передача данных от одной сущности другой. На самом деле вариантов не так много. Попробуем их все рассмотреть.

Для начала определимся какими типами сущностей будем оперировать: это будет контроллер, сервис и представление.

Из контроллера в представление

Посредством $scope

либо для нового синтаксиса контроллера через this в контроллере:

а в шаблоне представления получим через переменную:

для нового синтаксиса:

Из представления в контроллер

Для этого мы используем two-way data binding с помощью директив ng-bind и ng-model в представлении:

теперь при изменении значения поля ввода будет изменяться name.first значение в контроллере.

Из представления в представление

Фактически осуществляется посредством контроллера (рассмотрено выше), но переменную-свойство в контроллере можем не создавать: она будет создана автоматически. Итого имеем связь представление – контроллер – представление. Важно, чтобы 2 элемента представления, которые собираемся синхронизировать, находились в рамках одного контроллера.

Из контроллера в сервис

тут все просто: инжектим сервис в контроллер и задаем значение свойству, либо вызываем сеттер-метод (что ИМХО более верно):

Из сервиса в контроллер

Мы не можем изменять данные контроллера в сервисе, но мы можем “залинковать” объект-свойство сервиса на свойство контроллера, тогда в случае изменений внутри этого объекта – данные контроллера также будут обновлены:

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

Из сервиса в представление

Осуществляется посредствам контроллера, то есть сервис – контроллер – представление.

и представление соответственно:

Из представления в сервис


Аналогично предыдущему: представление – контроллер – сервис.

Из сервиса в сервис

Один сервис инжектит другой и там вызывается сеттер-метод:

Из контроллера в контроллер

Самый интересный случай, когда в зависимости от специфики может быть решен различными способами. Возможные варианты:

  • из родительского контроллера в дочерний
  • и дочернего в родительский
  • из контроллера в контроллер, когда оба находятся на одном уровне (либо в разных ветках иерархии)

Рассмотрим каждый отдельно.

Из родительского контроллера в дочерний

тут также могут быть 2 случая:

  • открытый scope дочернего контроллера
  • изолированный scope дочернего контроллера

В случае с открытым – все просто: дочерний контроллер наследует свойства scope родителя по умолчанию:

– как видим nameController является дочерним по отношению к userController, поэтому мы легко можем получить доступ к свойствам родителя:

С случае с изолированным scope(который мы можем получить при создании директивы) нам необходимо “залинковать” необходимые свойства родительского в дочерний. Представление будет выглядеть следующим образом:

а код директивы и контроллера:

В этом месте мы описываем связывание:

– это означает, что name будет взято из атрибута директивы.

Из дочернего контроллера в родительский

Вот этот вариант уже поинтереснее, тут не все так просто, ибо не смотря на то, что мы можем получить доступ к свойствам scope родителя, этот доступ будет только на чтение. При попытке изменить какое-либо свойство родителя, мы лишь получим создание одноименного свойства в дочернем контроллере. Это объясняется прототипной моделью наследования scope.

Возможны 2 решения:

  • изменяя не само свойство, а свойство свойства (знаю, сильно запутано, но на примере не должно быть сложно) То есть, вместо $scope.name, используем $scope.name.first.
  • через специально созданный сеттер-метод в родительском котроллере. Пример. :

Случай с изолированным скоупом полностью аналогичен предыдущему (Из родительского контроллера в дочерний), только линковка будет делаться не односторонняя:

Илон Маск рекомендует:  Что такое код textdomain

Передача данных между контроллерами находящимися на разных ветках


т.е., грубо говоря, когда мы не можем применить к ним характеристику родитель-ребенок. Решение будет заключаться в нахождении общего родительского контроллера( вплоть до $rootScope ), посредством которого и будет осуществлена передача: контроллер А – общий родительский контроллер – контроллер Б.

Передача данных дочернего и родительского контроллера уже рассмотрена выше, поэтому даю просто общий пример связки (контроллерА – родительский контроллер – контроллерБ)

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

Общение контроллеров с помощью событий

Это на столько отдельный случай, что я решил посвятить ему целый пункт.

Сразу оговорюсь: если вы еще только начинаете работать с AngularJS – не используйте этот подход . При неумелом его использовании может получиться такой “салат” из зависимостей, что потом сами не разберетесь.

Передавать события (с данными) можно посредством двух методов $scope.$emit и $scope.$broadcast. Отличие $emit от $broadcast заключается в том, что $emit передает события вверх по цепочке в скоупы всех родительских контроллеров, а $broadcast наоборот – в дочерние:

Чтобы словить событие необходимо использовать метод $scope.$on.

Полный пример работы с событиями.

Общение контроллеров с помощью специального сервиса

Существует еще один способ общения между сервисами, который напомнил Владимир Гомонов ( благодарю за дополнение! ), – это использование специального сервиса, который будет инжектиться в оба контроллера и в итоге получим связку: контроллер А – сервис – контроллер Б. Взаимодействие контроллер – сервис и сервис – контроллер уже рассмотрено выше, поэтому только выложу общий пример.

Вроде бы все возможные варианты передачи данных в рамках AngularJS перечислил, если что-то забыл – пишите – добавим.

AngularJs «контроллер как» синтаксис — разъяснение?

I читает о новом синтаксисе от angularJS относительно controller as xxx

Синтаксис InvoiceController as invoice сообщает Angular о создании экземпляра контроллер и сохранить его в переменной-счете в текущем сфера.

Хорошо, поэтому у меня не будет параметра $scope в моем контроллере, и код будет намного чище в контроллере.

Но

Мне нужно будет указать другой псевдоним в представлении

Итак, до сих пор я мог сделать:

И теперь я могу сделать:

Вопрос

Какова цель этого? удаление из одного места и добавление в другое место?

Я буду рад видеть, что мне не хватает.

В этом есть несколько вещей.

Некоторым людям не нравится синтаксис $scope (не спрашивайте меня почему). Говорят, что они могут просто использовать this . Это была одна из целей.


Четкое объяснение того, откуда приходит свойство, действительно полезно.

Вы можете встраивать контроллеры, и при чтении html это довольно ясно, где все свойства приходят.

Вы также можете избежать некоторых проблем с точкой..

Например, имея два контроллера с одинаковым именем «имя», вы можете сделать это:

Вы можете изменить как родительский, так и дочерний, без проблем. Но вам нужно использовать $parent , чтобы увидеть родительское имя, потому что вы затеняли его в своем дочернем контроллере. В массивном html-коде $parent может быть проблематично, вы не знаете, откуда это имя.

С помощью controller as вы можете сделать:

Тот же пример, но читать его гораздо понятнее.

Основным преимуществом синтаксиса controller as , который я вижу, является то, что вы можете работать с контроллерами как с классами, а не только с некоторыми функциями декодирования области и использовать преимущества наследования. Я часто сталкиваюсь с ситуацией, когда есть функциональность, которая очень похожа на несколько контроллеров, и самое очевидное, что нужно сделать, — создать класс BaseController и наследовать от него.

Несмотря на то, что существует наследование $scope, которое частично решает эту проблему, некоторые люди предпочитают писать код более чем на OOP, что, на мой взгляд, делает код более легким для объяснения и тестирования.

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

Разница между созданием контроллера с помощью $scope object и использованием синтаксиса «controller as» и vm

Создание контроллера с использованием объекта $scope

Обычно мы создаем контроллер, используя объект $scope, как показано в приведенном ниже списке:

Выше мы создаем AddController с тремя переменными и одним поведением, используя контроллер объекта и вид объекта $scope, которые говорят друг с другом. Объект $scope используется для передачи данных и поведения в представление. Он склеивает представление и контроллер вместе.

По существу объект $scope выполняет следующие задачи:

Передача данных с контроллера на представление

Передача поведения с контроллера на представление

Склеивает контроллер и просматривает вместе

Объект $scope изменяется при изменении вида и изменении вида, когда свойства объекта объекта $scope изменяются

Мы добавляем свойства объекту $scope для передачи данных и поведения в представление. Прежде чем использовать объект $scope в контроллере, нам нужно передать его в функции контроллера как зависимости.

Использование синтаксиса «контроллер как» и vm

Мы можем переписать вышеуказанный контроллер, используя контроллер как синтаксис и переменную vm, как показано в приведенном ниже списке:

По существу, мы назначаем это переменной vm, а затем присоединяем к ней свойство и поведение. В представлении мы можем получить доступ к AddVmController, используя контроллер в качестве синтаксиса. Это показано в листинге ниже:

Конечно, мы можем использовать другое имя, чем «vm» в контроллере в качестве синтаксиса. Под капотом AngularJS создает объект $scope и привязывает свойства и поведение. Однако, используя контроллер в качестве синтаксиса, код очень чист в контроллере, и только вид псевдонима виден в представлении.

Вот несколько способов использования контроллера в качестве синтаксиса:

Создайте контроллер без объекта $scope.

Назначьте это локальной переменной. Я предпочел имя переменной как vm, вы можете выбрать любое имя по вашему выбору.

Прикрепите данные и поведение к переменной vm.

В представлении укажите псевдоним контроллера, используя контроллер в качестве синтаксиса.

Вы можете указать имя псевдонима. Я предпочитаю использовать vm, если Im не работает с вложенными контроллерами.

При создании контроллера нет прямых преимуществ или недостатков использования объектного подхода $scope или контроллера в качестве синтаксиса. Это просто вопрос выбора, однако, используя контроллер, поскольку синтаксис делает код JavaScript контроллеров более читабельным и предотвращает любые проблемы, связанные с этим контекстом.

Вложенные контроллеры в объектном подходе $scope

У нас есть два контроллера, как показано в листинге ниже:

Свойство «возраст» находится внутри обоих контроллеров, и в представлении эти два контроллера могут быть вложены, как показано в приведенном ниже списке:

Как вы видите, для доступа к возрастному свойству родительского контроллера мы используем $parent.age. Контекстное разделение здесь не очень понятно. Но используя контроллер как синтаксис, мы можем работать с вложенными контроллерами более элегантным способом. Допустим, у нас есть контроллеры, как показано в листинге ниже:

В представлении эти два контроллера могут быть вложены, как показано в приведенном ниже списке:

В синтаксисе контроллера у нас есть более читаемый код, а родительское свойство можно получить, используя псевдоним родительского контроллера вместо использования синтаксиса $parent.

Я завершу этот пост, сказав, что его чисто ваш выбор, хотите ли вы использовать контроллер как синтаксис или объект $scope. Нет никакого огромного преимущества или недостатка для того, чтобы просто контролировать контроллер как синтаксис, который вы контролируете в контексте, с которым легче работать, учитывая четкое разделение во вложенных контроллерах на представлении.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL