различные способы определения углового модуля

Question

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

var app = angular.module('myApp',[]); 
app.controller('myCtrl',function($scope){ 
//some code 
}) 

или даже как этот

angular.module('myApp',[]) 
    .controller('myCtrl',function($scope){ 
    //some code 
    }) 

, но сегодня я узнал, есть еще один способ определения угловой модуль

(function(app){ 

})(angular.module('myApp',[])) 

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

Answer 1

Первые & Вторые объявления не имеют существенного отличия. Рекомендуется третий вариант.

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

2. Вместо использования глобальной переменной для хранения ссылки на модуль мы непосредственно объявляем контроллер по возвращаемому значению. Этот режим называется «цепной метод»

3. Здесь мы используем синтаксис гейтера углов, который вернет ссылку на модуль. Синтаксис Getter вместе с выведенным из строя выражением функции (IIFE) гарантирует, что вы не загрязняете глобальное пространство имен. И это предпочтительный способ написания контроллеров, услуг и т.д.

Для достижения наилучших практик в угловатый, имеют взгляд на стиль руководства Джона папиной для AngularJS

Answer 2

Разница в следующем:

var app = angular.module('myApp',[]); 
app.controller('myCtrl',function($scope){ 
//some code 
}) 

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

Этот код также хорош. У вас нет глобальных переменных. Здесь вам нужно создать компоненты модуля в одной строке кода. Поэтому, если вам нужно иметь доступ к вашему модулю, вам нужно получить его с помощью angular.module('myApp') . Это хороший вариант, но не лучший.

angular.module('myApp',[]) 
    .controller('myCtrl',function($scope){ 
    //some code 
    }) 

За последний

(function(app){ 

})(angular.module('myApp',[])) 

Это самый лучший вариант. Вы создаете IIFE, то есть - вы создаете функцию и вызываете ее немедленно и передаете module в качестве параметра . app теперь виден только в функции, и вы не загрязняете глобальное пространство.

Что в производительности - последний пример вызовет дополнительную функцию, но сначала 2 не будет, BUT здесь вызов одной функции не повлияет на производительность.

Ответить на комментарий:
Да, конечно.

В другом файле вы можете использовать как этот

(function(app){ 

    })(angular.module('myApp')) 

Если вы звоните angular.module('myApp') без второго параметра, он идет и пытается найти модуль с заданным именем и если находит, возвращает модуль.

Answer 3

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

(function(app){ 
    function TestContorller() { 
    } 

})(angular.module('myApp',[])) 

Answer 4

«лучший» способ объявить модуль

Как угловой на самой глобальной области видимости и модули сохраняются в его переменном можно получить доступ через модули angular.module («MyMod»):

// one file 
// NOTE: the immediately invoked function expression 
// is used to exemplify different files and is not required 
(function(){ 
    // declaring the module in one file/anonymous function 
    // (only pass a second parameter THIS ONE TIME as a redecleration creates bugs 
    // which are very hard to dedect) 
    angular.module('mymod', []); 
})(); 


// another file and/or another anonymous function 
(function(){ 
// using the function form of use-strict... 
"use strict"; 
    // accessing the module in another. 
    // this can be done by calling angular.module without the []-brackets 
    angular.module('mymod') 
    .controller('myctrl', ['dep1', function(dep1){ 
     //.. 
    }]) 

    // appending another service/controller/filter etc to the same module-call inside the same file 
    .service('myservice', ['dep2', function(dep2){ 
    //... 
    }]); 

    // you can of course use angular.module('mymod') here as well 
    angular.module('mymod').controller('anothermyctrl', ['dep1', function(dep1){ 
     //.. 
    }]) 
})(); 

Других глобальных переменных не требуется.

Конечно, это зависит все от предпочтений, но я думаю, что это своего род лучшей практики, как

вы не должны загрязнять глобальный масштаб вы можете получить доступ к модулям везде и сортировать их и их функции в разные файлы по желанию вы можете использовать функциональную форму «use strict»; порядок загрузки файлов не имеет значения Опции для сортировки ваших модулей и файлов

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

/******** sorting by route **********/  
angular.module('home')... 
angular.module('another-route')... 
angular.module('shared')... 

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

/******** modularizing feature-sets **********/ 
/controllers 
/directives 
/filters 
/services 
/my-map-sub-module 
/my-map-sub-module/controllers 
/my-map-sub-module/services 
app.js 
... 

angular.module('app', [ 
    'app.directives', 
    'app.filters', 
    'app.controllers', 
    'app.services', 
    'myMapSubModule' 
]); 

angular.module('myMapSubModule',[ 
    'myMapSubModule.controllers', 
    'myMapSubModule.services', 
    // only if they are specific to the module 
    'myMapSubModule.directives', 
    'myMapSubModule.filters' 
]); 

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

EDIT: Просто потому, что это связано, и я снова столкнулся с этим совсем недавно: будьте осторожны, создав модуль только один раз (добавив второй параметр в функцию углового.module). Это испортит ваше приложение и может быть очень сложно обнаружить.

2015 EDIT на модулях сортировки. Спустя полтора года с угловым опытом я могу добавить, что преимущества использования именованных модулей в вашем приложении несколько ограничены, так как AMD по-прежнему не очень хорошо работает с Angular и сервисами , директивы и фильтры в глобальном масштабе доступны внутри углового контекста (как показано на примере здесь). По-прежнему существует семантическое и структурное преимущество, хотя, возможно, было бы полезно включить/исключить модуль с одной строкой кода, прокомментированной или отсутствующей.

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