Угловое определение контроллера

Question

Я начал работать с Angular.js 2 дня назад, и я изучаю очень медленно, поэтому я могу получить знания о том, как это работает очень хорошо, а не просто общая концепция об угловом, t быть настолько грубым для меня, если вопрос новичок :)

В основном я путешествую по Сети (учебники, книги, видео), чтобы узнать Угловое, и начал с Code Academy сегодня, поэтому я помню основные понятия , Дело в том, что, когда я начал изучать, как определить контроллер, он меня смущает.

это как контроллер определяется на код Академии

app.controller('MainController',['$scope',function($scope){ 
    $scope.title='to your own string'; 
    $scope.promo='new promo here' 
}]); 

контроллер, определенный в книге, которую я прочитал

app.controller('FirstController', function($scope) { 
    $scope.counter = 0; 
    $scope.add = function(amount) { $scope.counter += amount; }; 
    $scope.subtract = function(amount) { $scope.counter -= amount; }; 
}); 

Я не могу понять разницу между этими , Может кто-нибудь объяснить это мне? Или это просто код из разных версий углового, и второй код прав?

Answer 1

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

Разница в том, что первый пример определяет массив значений при вызове app.controller. Зачем передавать $scope в виде строкового значения?

минификация

Что делать, если вы создаете приложение, которое должно быть как можно более эффективным, чтобы пользователи не должны ждать каких-либо дополнительных миллисекунды его загрузки. Вы хотите его минимизировать.

Мини-процесс - это процесс, при котором код Javascript сделан как можно меньше.Возможно, что 500 тыс. Javascript будут уменьшены до 50 тыс. Или 100 тыс. Это делается путем удаления посторонней информации, комментариев, пробелов и т. Д.

Но в этом конкретном случае минимизация обычно также изменяет имена параметров на что-то меньшее.

Например, минификация может изменить:

Test("This is a test."); 

function Test(myLongParameterNameHere) { 
    console.log(myLongParameterNameHere.length) 
} 

к этому:

a("This is a test"); 

function a(b) { 
    console.log(b.length); 
} 

Посмотрите, как много меньше, что это?

Однако Angular анализирует точные названия параметров. Когда он видит параметр с именем «$ scope», он знает, как добавить к этому параметру соответствующую информацию о $ scope. Когда минералист меняет это на что-то другое, Угловая путается.

Таким образом, вы можете дать ANGULAR подсказку, указывая массив строк в том же порядке в списке параметров, например:

app.controller('MainController',['$scope', '$timeout', '$rootScope', function($scope, $timeout, $rootScope) { 
    $scope.title ='to your own string'; 
    $timeout(function() { console.log("Timout fired") }, 500); 
    $rootScope.test = "Hello World"; 
}]); 

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

app.controller('MainController',['$scope', '$timeout', '$rootScope', function(a, b, c) { 
    a.title ='to your own string'; 
    b(function() { console.log("Timout fired") }, 500); 
    c.test = "Hello World"; 
}]); 

Миниатюры не изменят название строк.

Вы указали Угловой параметр, который относится к его конкретному угловому аналогу. Даже после майнинга Угловая имеет информацию, необходимую ему для инъекции зависимости.

TL; DR

Добавление имен параметров в виде строк в массиве не обязателен, но это необходимо, если вы планируете делать какие-либо минификация на вашем JavaScript.

Answer 2

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

Answer 3

Разница заключается в том, что, если у вас есть миниатюрный файл javascript, второй может не работать. Вот почему первый подход является предпочтительным.

Представьте, что вы минимизировали файл.

Первый подход:

app.controller('MainController', ['$scope',function(a){ 

Второй подход:

app.controller('MainController', function(a){ 

Как бы это знать, что такое 'а' после того, как минификация? В первом подходе он знает, что, поскольку вы передаете строку «$ scope», он знает, что «a» - это $ scope.

Answer 4

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

Посмотрите на этот ответ для получения дополнительной информации: Angularjs minify best practice