AngularJS. Controller as синтаксис


AngularJS. Controller as синтаксис

Прежде чем перейти к освоению основ AngularJS, сразу обозначим общую структуру приложения. Создадим в корневом каталоге веб-сервера (в качестве веб-сервера можно выбрать, например, NodeJS или Apache) папку app , в которой будут следующие подкаталоги:

Папка css будет содержать используемые стили, img — изображения, js — скрипты. В папке js создадим два каталога: controllers — для контроллеров и lib, в который поместим собственно библиотеку angular.min.js и в который в дальнейшем будем класть и другие сопроводительные скрипты.

Также в папке app у нас будет находиться веб-страничка index.html — само представление.

Для создания контроллера используется метод controller(name, constructor) , который определен у объекта Module. Первый параметр передает имя контроллера, а второй — функцию, которая выполняет настройку контроллера. Эту функцию еще называют конструктором:

AngularJS предоставляет ряд встроенных сервисов, название которых начинается с символа $. В функции контроллера в качестве параметра передается сервис $scope, через который контроллер передает данные в представление.

Теперь создадим и применим контроллер. Для этого перейдем к веб-странице index.html. Изменим ее код следующим образом:

Здесь в контроллере через объект $scope передается некоторый объект phone, который содержит обычный javascript-объект с информацией о смартфоне.

Чтобы применить контроллер к определенному участку разметки html, надо использовать директиву ng-controller. После этого данный кусок разметки html будет обозначать представление контроллера.

Запустим в веб-браузере страницу:

С помощью пары двойных фигурных скобок мы создаем выражения . Выражения в AngularJS представляют вкрапления кода javascript в разметку html. В выражении не обязательно обращаться к свойствам переданного через $scope объекта. Например, мы можем передать математическое выражение:

. И вместо данного выражения браузер выведет нам его результат.

Теперь отделим контроллер от преставления. Для этого в ранее созданную папку controllers добавим следующий файл phonesController.js:

Обратите внимание, что здесь мы не создаем, а получаем ранее созданный модуль ( angular.module(‘myApp’) ), так как метод module использует только один параметр.

И также изменим файл index.html:

При этом мы можем использовать несколько представлений для одного контроллера в разных местах html-страницы:

Хотя тут используется один контроллер, но для каждого представления, используюего директиву ng-controller, будет создаваться свой отдельный объект контроллера и соответственно свой объект $scope.

Наследование контроллеров

Для наследования контроллеров нам надо вложить один элемент с директивой ng-controller в другой, который также имеет подобную директиву:

Контроллеры без использования $scope

Нам не обязательно использовать объект $scope для передачи данных из контроллера в представления. Важно понимать, что контроллер — это также javascript-объект, который работает также как и другие js-объекты:

Определение свойств внутри контроллера также, как и в любом js-объекте, можно произвести с помощью ключевого слова this :

Затем при применении контроллера надо указать переменную, через которую мы будем взаимодействовать с контроллером:

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

Синтаксис AngularJs «контроллер как» — уточнение?

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

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

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

Но

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

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

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

Вопрос

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

Синтаксис AngularJs «контроллер как» — уточнение?

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

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

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

Но

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

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

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

Вопрос

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

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

6 ответов

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

Некоторым людям не нравится синтаксис $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. Контекстное разделение здесь не очень понятно. Но используя контроллер как синтаксис, мы можем работать с вложенными контроллерами более элегантным способом. Допустим, у нас есть контроллеры, как показано в листинге ниже:

Топ-пост этого месяца:  WhatsApp Business что такое бизнес-аккаунт и как его сделать

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

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

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

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

November 2020

65.3k раз

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

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

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

Но

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

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

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

Вопрос

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

Я буду рад видеть, что я упускаю.

6 ответы

Я считаю основным преимуществом является более интуитивным апи поскольку методы / свойства связаны с экземпляром контроллера непосредственно, а не объект сферу. В принципе, со старым подходом, контроллер становится просто украсьте для создания объекта области видимости.

Из того, что я прочитал, $ масштабы будут удалены в угловых 2,0, или, по крайней мере, как мы рассматриваем использование $ объема. Это может быть хорошо, чтобы начать использовать контроллер как по мере выхода 2,0 приближается.

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

Разница между Создание контроллера с использованием $scope object и использование “controller as” синтаксиса и В.М.

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

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

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

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

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

Pass поведения от контроллера к представлению

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

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

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

Использование «контроллер в качестве» синтаксиса и В.М.

Мы можем переписать выше контроллер с помощью контроллера в качестве синтаксиса и переменную Vm, как показано в листинге ниже:

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

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

Вот некоторые шаги, чтобы использовать контроллер как синтаксис:

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

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

Приложить данные и поведение переменной Vm.

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

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

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

Вложенные контроллеры в $ области видимости объектного подхода

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

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

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

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

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

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

Experimental «Controller as» Syntax

The «controller as» syntax was added to AngularJS 1.2. This syntax abstracts the use of $scope in controllers, simplifying the syntax of your controllers.

You must be a Member to view code

Access all courses and lessons, track your progress, gain confidence and expertise.

Discuss

Transcript

John Lindquist: If you look closely in the 1.1.5 release of Angular, you’ll notice in the change log support for «controller as» syntax. Now it’s a very minor, short sentence right there which can have actually a major impact on the way that you think about Angular. So let’s start working with the «controller as» syntax.

It’s worth noting that this is an experimental feature and it may be removed at later times. But I personally hope they keep it in. That’s just my opinion.

So if we add a controller and we’ll just say «room controller as room.» Then we’ll set up a room controller. So that controller, room controller, and then we can say this open door as a function. We’ll expose this to the html and this alert creak.

Now that we are using room controller as room, we can actually access the controller just by typing room. So if we have a button and we just say ng-click, we say «room» meaning the room controller, we can say «open door.» When you click this, inaudible 01:25 text will open. So if I come over here and click this, the room will creak. That’s because it’s calling this open door off of the room controller.

Now, the most important thing is to notice what is not there. You do not see a scope injected into the room controller. That means that even if you are going to expose something like a button title, I’m a button, and we hop back over to index file and we do «room.button title,» you can see that we updated a button title to I’m a button.

Again, we’ve never used a scope to communicate that over the html. So anything you communicate to the html can potentially be put on the controller itself which helps a lot with languages like coffee script and type script and inaudible 02:32 six where you can define classes and expose functions and things like that and use those as your controllers. So this syntax right here basically changes the entire way you think about providing things to the html.

Now, the scope is still insanely useful, of course, for things like watchers and dollar apply and all the other things that scope manages, scope inheritance included. It’s just that using this syntax «as room» you are now accepting this paradigm where you are exposing things to html through the controller.

Now, the other thing to mention is that this was achievable before. I think I even did the video. I’m 99 percent sure I did a video about it where an alternative way of returning the controller where you would inject a scope and you would say room equals this. That’s basically what it would look like. It’s just that now, this is kind of a built-in feature into Angular and version 1.1.5 which may stick around.

The last benefit I want to mention as you start getting nested controllers. We’ll kind of mock up an example here. We’ll say ng-controller and other controller as other. Let’s capitalize that. As we start getting nested controllers, it’s very easy to see where the inheritance is coming from.

Топ-пост этого месяца:  25 советов и описание HTML5


If I say «room foo» and «other foo» you know where foo is coming from, whether it’s coming from the other or from the room. There is that definite separation. Whereas, if we’re using scopes, the scope inheritance, you wouldn’t know exactly what’s going on. Similarly, this paradigm or this way of thinking about it forces that dot which I’ve talked about in other videos.

So you have to use the dot to access this. You are never going to be using a single primitive value inside of here which would be overwritten and ng-repeat other examples we’ve talked about.

Anyway, so that’s what this controller as syntax is and how it can potentially change the way you interact between Angular and your html. Definitely give the Angular team feedback through whatever venue you can contact them through, whether mailing lists or meet ups or Twitter or whatever. I think it’s a very promising change. But if you run into issues, definitely let them know.

Digging into Angulars Controller as syntax

Great! Please confirm your email.

Once confirmed, our best free recourses will be heading your way!

AngularJS Controllers have recently gone under some changes (version 1.2 to be precise). What this means for scopes, Controllers and Angular development is some very subtle but powerful changes. One of those changes I believe is improved architecture, clearer scoping and smarter Controllers.

Controllers as we know them are class-like Objects that drive Model and View changes, but they all seem to revolve around this mystical $scope Object. Angular Controllers have been pushed to change the way $scope is declared, with many developers suggesting using the this keyword instead of $scope .

Pre v1.2.0 Controllers looked similar to this:

Here, the concept of the Controller is separate from the $scope itself, as we have to dependency inject it. Some argued this would’ve been better:

We didn’t quite get there, but we got something pretty awesome in return.

Once you’ve finished reading this post, do you want to learn even more?

Master AngularJS with our online courses

Award winning courses trusted by thousands, there’s no better place to learn

Table of Contents

Controllers as Classes

If you instantiate a “class” in JavaScript, you might do this:

We can then use the myInstance instance to access myClass methods and properties. In Angular, we get the feel of proper instantiation with the new Controller as syntax. Here’s a quick look at declaring and binding:

This is more of a class based setup, and when instantiating a Controller in the DOM we get to instantiate against a variable:

To reflect this.title in the DOM, we need to ride off our instance:

Namespacing the scopes is a great move I think, it cleans up Angular massively. I’ve always disliked the “floating variables” such as << title >> , I much prefer hitting the instance with << main.title >> .

Nested scopes

Nested scopes is where we see great return from the Controller as syntax, often we’ve had to use the current scope’s $parent property to scale back up scopes to get where we need.

Take this for example:

Firstly, we’re going to get interpolation issues as << title >> will be very confusing to use and most likely one scope will take precedence over another. We also don’t know which one that might be. Whereas if we did this things are far clearer and variables can be accessed properly across scopes:

I can also access parent scopes without doing this:

And make things more logical:

No hacky $parent calls. If a Controller’s position in the DOM/stack were to change, the position in sequential $parent.$parent.$parent.$parent may change! Accessing the scope lexically makes perfect sense.

$watchers/$scope methods

The first time I used the Controller as syntax I was like “yeah, awesome!”, but then to use scope watchers or methods (such as $watch , $broadcast , $on etc.) we need to dependency inject $scope . Gargh, this is what we tried so hard to get away from. But then I realised this was awesome.

The way the Controller as syntax works, is by binding the Controller to the current $scope rather than it being all one $scope -like class-like Object. For me, the key is the separation between the class and special Angular features.

This means I can have my pretty class-like Controller:

When I need something above and beyond generic bindings, I introduce the magnificent $scope dependency to do something special, rather than ordinary.

Those special things include all the $scope methods, let’s look at an example:

Ironing a quirk

Interestingly enough, whilst writing this I wanted to provide a $scope.$watch() example. Doing this usually is very simple, but using the Controller as syntax doesn’t work quite as expected:

Uh oh! So what do we do? Interestingly enough I was reading the other day, and you can actually pass in a function as the first argument of a $watch() :

Which means we can return our this.title reference:

Let’s change some execution context using angular.bind() :

Declaring in $routeProvider /Directives/elsewhere

Controllers can by dynamically assigned, we don’t need to always bind them via attributes. Inside Directives, we get a controllerAs: property, this is easily assigned:

The same inside $routeProvider :

Testing controllerAs syntax

There’s a subtle difference when testing controllerAs , and thankfully we no longer need to dependency inject $scope . This means we also don’t need to have a reference property when testing the Controller (such as vm.prop ), we can simply use the variable name we assign $controller to.

You can alternatively use the controllerAs syntax in the $controller instantiation but you will need to inject a $scope instance into the Object that is passed into $controller . The alias (for instance scope.main ) for the Controller will be added to this $scope (like it is in our actual Angular apps), however this is a less elegant solution.

About the author

Todd Motto

Google Developer Expert

Todd is the Founder of Ultimate Courses. With a passion for Angular, TypeScript and JavaScript, Todd leads the online courses creation and has written hundreds of articles on front-end web development and beyond. He specialises in breaking down complex topics and understands the critical mission of learning new technology fast, comprehensively and the right way.

Love the post? Share it!

Lots of time and effort go into all our blogs, resources and demos,
we’d love it if you’d spare a moment to share them!

Why You Should Use AngularJS’s «Controller as» Syntax

AngularJS has become a popular front-end framework, which is why you’ve probably heard the term «controller as» thrown around a bit. This syntax is a way for us to access properties and methods of a controller declared on the controller via this . The support for this was introduced in AngularJS version 1.1.5.

Here are a few very good reasons:

  • When using nested scopes, it becomes completely clear where a method or property reference belongs to.
  • By not using $parent to access the properties of a parent controller, if things get moved, we can still be sure we are referencing the correct controller.
  • Because we are using dot notation, it becomes impossible to two-way bind to a primitive.

By not using the «Controller as» syntax, we can see things get complicated pretty quickly (imagine this in a very large application):

To use our «Controller as» syntax, first, we declare all of our properties and methods on the this property of our controller:

Then things become a lot more visibile in the view. We can see where each bit of data is coming from:

AngularJs – “controller as” Syntax

Get 100$ FREE credit & hosting at scale

I’m quite a bit late with this post about “controller as” syntax in AngularJs, but I’ve always wanted to use this model in all my previous articles.
However I thought it would not be appropriate to use that method unless I explain to my readers how to use it an how is it more advantageous over the standard $scope model.

What is it ?

When using “controller as” syntax you declare your controller in your view with an alias, and then use the alias to refer to the controller.

And inside your controller you would declare functions and variables on the “this” keyword instead of binding them to the $scope.

This gives you a feel of proper instantiation and a class like declaration with the “this” key word.

Why use “controller as” Syntax

Using controller as syntax resembles class like declaration of javascript.
Using it makes your views more readable and clean.
A huge advantage can be seen when nesting controllers, it avoids the usual reference to parent controllers using $parent

Топ-пост этого месяца:  Изучаем PHP определение массива и быстро по домам!

Here the name refers to the one declared on the respective controllers.

It promotes the binding to the dotted object, which is more easier to read and avoids reference issues as you can see above.

“controller as” syntax is really great but we cannot undermine or eliminate the use of $scope.
$scope is useful with $watch, $apply and broadcasting and listening to events using $broadcast, $on, $emit.

AngularJS. Controller as синтаксис


Прежде чем перейти к освоению основ AngularJS, сразу обозначим общую структуру приложения. Создадим в корневом каталоге веб-сервера (в качестве веб-сервера можно выбрать, например, NodeJS или Apache) папку app , в которой будут следующие подкаталоги:

Папка css будет содержать используемые стили, img — изображения, js — скрипты. В папке js создадим два каталога: controllers — для контроллеров и lib, в который поместим собственно библиотеку angular.min.js и в который в дальнейшем будем класть и другие сопроводительные скрипты.

Также в папке app у нас будет находиться веб-страничка index.html — само представление.

Для создания контроллера используется метод controller(name, constructor) , который определен у объекта Module. Первый параметр передает имя контроллера, а второй — функцию, которая выполняет настройку контроллера. Эту функцию еще называют конструктором:

AngularJS предоставляет ряд встроенных сервисов, название которых начинается с символа $. В функции контроллера в качестве параметра передается сервис $scope, через который контроллер передает данные в представление.

Теперь создадим и применим контроллер. Для этого перейдем к веб-странице index.html. Изменим ее код следующим образом:

Здесь в контроллере через объект $scope передается некоторый объект phone, который содержит обычный javascript-объект с информацией о смартфоне.

Чтобы применить контроллер к определенному участку разметки html, надо использовать директиву ng-controller. После этого данный кусок разметки html будет обозначать представление контроллера.

Запустим в веб-браузере страницу:

С помощью пары двойных фигурных скобок мы создаем выражения . Выражения в AngularJS представляют вкрапления кода javascript в разметку html. В выражении не обязательно обращаться к свойствам переданного через $scope объекта. Например, мы можем передать математическое выражение:

. И вместо данного выражения браузер выведет нам его результат.

Теперь отделим контроллер от преставления. Для этого в ранее созданную папку controllers добавим следующий файл phonesController.js:

Обратите внимание, что здесь мы не создаем, а получаем ранее созданный модуль ( angular.module(‘myApp’) ), так как метод module использует только один параметр.

И также изменим файл index.html:

При этом мы можем использовать несколько представлений для одного контроллера в разных местах html-страницы:

Хотя тут используется один контроллер, но для каждого представления, используюего директиву ng-controller, будет создаваться свой отдельный объект контроллера и соответственно свой объект $scope.

Наследование контроллеров

Для наследования контроллеров нам надо вложить один элемент с директивой ng-controller в другой, который также имеет подобную директиву:

Контроллеры без использования $scope

Нам не обязательно использовать объект $scope для передачи данных из контроллера в представления. Важно понимать, что контроллер — это также javascript-объект, который работает также как и другие js-объекты:

Определение свойств внутри контроллера также, как и в любом js-объекте, можно произвести с помощью ключевого слова this :

Затем при применении контроллера надо указать переменную, через которую мы будем взаимодействовать с контроллером:

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

AngularJs Controllers

Controllers

controllerAs View Syntax

[Style Y030]
  • Use the controllerAs syntax over the classic controller with $scope syntax.

Why?: Controllers are constructed, “newed” up, and provide a single new instance, and the controllerAs syntax is closer to that of a JavaScript constructor than the classic $scope syntax .

Why?: It promotes the use of binding to a “dotted” object in the View (e.g. customer.name instead of name ), which is more contextual, easier to read, and avoids any reference issues that may occur without “dotting”.

Why?: Helps avoid using $parent calls in Views with nested controllers.

controllerAs Controller Syntax

[Style Y031]

Use the controllerAs syntax over the classic controller with $scope syntax.

The controllerAs syntax uses this inside controllers which gets bound to $scope

Why?: controllerAs is syntactic sugar over $scope . You can still bind to the View and still access $scope methods.

Why?: Helps avoid the temptation of using $scope methods inside a controller when it may otherwise be better to avoid them or move them to a factory. Consider using $scope in a factory, or if in a controller just when needed. For example when publishing and subscribing events using $emit , $broadcast , or $on consider moving these uses to a factory and invoke from the controller.

controllerAs with vm

[Style Y032]
  • Use a capture variable for this when using the controllerAs syntax. Choose a consistent variable name such as vm , which stands for ViewModel.

Why?: The this keyword is contextual and when used within a function inside a controller may change its context. Capturing the context of this avoids encountering this problem.

Note: You can avoid any jshint warnings by placing the comment below above the line of code. However it is not needed when the function is named using UpperCasing, as this convention means it is a constructor function, which is what a controller is in Angular.

Note: When creating watches in a controller using controller as , you can watch the vm.* member using the following syntax. (Create watches with caution as they add more load to the digest cycle.)

Bindable Members Up Top

[Style Y033]

Place bindable members at the top of the controller, alphabetized, and not spread through the controller code.

Why?: Placing bindable members at the top makes it easy to read and helps you instantly identify which members of the controller can be bound and used in the View.

Why?: Setting anonymous functions in-line can be easy, but when those functions are more than 1 line of code they can reduce the readability. Defining the functions below the bindable members (the functions will be hoisted) moves the implementation details down, keeps the bindable members up top, and makes it easier to read.

Note: If the function is a 1 liner consider keeping it right up top, as long as readability is not affected.

Function Declarations to Hide Implementation Details

[Style Y034]

Use function declarations to hide implementation details. Keep your bindable members up top. When you need to bind a function in a controller, point it to a function declaration that appears later in the file. This is tied directly to the section Bindable Members Up Top. For more details see this post.

Why?: Placing bindable members at the top makes it easy to read and helps you instantly identify which members of the controller can be bound and used in the View. (Same as above.)

Why?: Placing the implementation details of a function later in the file moves that complexity out of view so you can see the important stuff up top.

Why?: Function declaration are hoisted so there are no concerns over using a function before it is defined (as there would be with function expressions).

Why?: You never have to worry with function declarations that moving var a before var b will break your code because a depends on b .

Why?: Order is critical with function expressions

Notice that the important stuff is scattered in the preceding example. In the example below, notice that the important stuff is up top. For example, the members bound to the controller such as vm.avengers and vm.title . The implementation details are down below. This is just easier to read.

Defer Controller Logic

[Style Y035]

Defer logic in a controller by delegating to services and factories.

Why?: Logic may be reused by multiple controllers when placed within a service and exposed via a function.

Why?: Logic in a service can more easily be isolated in a unit test, while the calling logic in the controller can be easily mocked.

Why?: Removes dependencies and hides implementation details from the controller.

Keep Controllers Focused

[Style Y037]

Define a controller for a view, and try not to reuse the controller for other views. Instead, move reusable logic to factories and keep the controller simple and focused on its view.

Why?: Reusing controllers with several views is brittle and good end to end (e2e) test coverage is required to ensure stability across large applications.

Assigning Controllers

[Style Y038]

When a controller must be paired with a view and either component may be re-used by other controllers or views, define controllers along with their routes.

Note: If a View is loaded via another means besides a route, then use the ng-controller=»Avengers as vm» syntax.

Why?: Pairing the controller in the route allows different routes to invoke different pairs of controllers and views. When controllers are assigned in the view using ng-controller , that view is always associated with the same controller.

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