Прежде чем говорить о модуле AngularJS, давайте сначала представим некоторые знания о угловых:
AngularJS - это чистая клиентская технология, написанная полностью в JavaScript. Он использует традиционные технологии веб -разработки (HTML, CSS, JavaScript), чтобы сделать разработку веб -приложений быстрее и проще.
AngularJS упрощает разработку приложений, чтобы упаковать некоторые общие низкоуровневые операции разработки, чтобы предоставить их разработчикам. AngularJS автоматически обрабатывает эти низкоуровневые операции. Они включают в себя:
1. Операция
2. Настройте прослушивание событий
3. Проверка ввода, поскольку AngularJS будет обрабатывать большинство этих операций, разработчики могут больше сосредоточиться на бизнес-логике приложения и писать менее повторяющийся, подверженные ошибкам и низкоуровневый код.
В то время как AngularJS упрощает разработку, это также привносит некоторые изысканные технологии для клиента, в том числе:
1. Разделение данных, бизнес -логики и представлений
2. Автоматическая связка данных и представлений
3. Общие службы
4. Инъекция зависимостей (в основном используется для служб агрегации)
5. Расширяемый HTML -компилятор (полностью написан JavaScript)
6. Легко тестировать
7. Спрос клиента на эти технологии фактически существует в течение длительного времени.
В то же время вы также можете использовать AngularJ для разработки одностраничных или многостраничных приложений, но в основном используется для разработки одностраничных приложений. AngularJS поддерживает исторические операции браузера, кнопки вперед и назад и любимые операции в одностраничных приложениях.
Далее, давайте подробно объясним модуль Angularjs.
Большинство приложений имеют основной метод создания, организации и запуска приложений. Приложения AngularJS не имеют основного метода, но используйте модули, чтобы объявить, как следует запустить приложение. Этот метод имеет следующие преимущества:
1. Процесс запуска является декларативным, поэтому его легче понять.
2. В модульном тестировании нет необходимости загружать все модули, поэтому этот метод помогает записать модульные тесты.
3. Дополнительные модули могут быть добавлены к тестам в определенных ситуациях. Эти модули могут изменить конфигурации и могут помочь с сквозным тестированием.
4. Сторонний код может быть упакован в многоразовые модули.
5. Модули могут быть загружены в любом порядке последовательности или параллелизма (поскольку выполнение самого модуля задерживается).
Например:
<! Doctype html> <html ng-app = "myApp"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script> var myAppmodule = angular.module ('myApp', []); // Настройка модуля. // В этом примере мы создадим поздравительный фильтр myAppmodule.filter ('regret', function () {return function (name) {return 'hello,' + name + '!';};}); </script> </head> <body> <div> {{'world' | приветствовать}} </div> </body> </html>В приведенном выше примере мы используем модуль MyApp, чтобы запустить приложение, указав его в <html ng-app = "myApp">.
Приведенный выше пример очень прост в написании, но он не подходит для написания больших приложений таким же образом. Наша рекомендация - разделить ваше приложение на следующие модули:
1. Сервисный модуль, используемый для объявлений об обслуживании.
2. Модуль инструкций, используемый для объявлений инструкций.
3. Модуль фильтра, используемый для объявлений фильтров.
4. Модуль уровня приложения, который опирается на приведенные выше модули, который содержит код инициализации.
Например:
<! Doctype html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script src = "script.js"> </script> </head> <broad> ng-controller = "xmplcontroller"> {{приветствие}}! </div> </body> </html> [/code] script.js: [code] angular.module ('xmpl.service', []). // Значение модуля обслуживания ('Greeter', {// Custom Greeter объект приветствует: 'Привет', локализация: function (локализация) {this.salute = локализация.salute;}, приветствие: function (name) {return this.salute + '' + name + '!';}}). value ('user', {// пользовательский объект пользователя загрузка: function (name) {this.name = name;}}); Angular.Module ('xmpl.directive', []); // модуль инструкции angular.module ('xmpl.filter', []); // модуль фильтра angular.module ('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']). // Модуль XMPL зависит от run модуля (функция (Greeter, пользователь) в массиве {// инициализируя код. Когда начинается приложение, Greeter.localize ({Salutation: 'Bonjour'}); user.load ('world');} // controller для вашего Appvar xmplontroller = function ($ recope) Greeter.greet (user.name);}Причиной этого разделения является то, что вам часто нужно игнорировать код инициализации в ваших тестах, потому что эти коды сложнее протестировать. Разделив его, его можно легко игнорировать при тестировании. Тест также может быть более конкретным, загружая только модули, связанные с текущим тестом. Выше приведено только предложение, вы можете быть уверены, что настроить его в соответствии с вашей конкретной ситуацией.
Модуль представляет собой набор серии конфигураций и кодовых блоков, которые прикреплены к приложению на стадии запуска. Самый простой модуль состоит из двух наборов кодовых блоков:
Блок кода конфигурации - выполнять во время фазы впрыска и конфигурации поставщика впрыска. Только поставщик инъекций и константы могут быть введены в блок конфигурации. Это должно предотвратить инициализированную службу заранее, прежде чем она будет настроена.
Запустите кодовый блок - выполнить после создания инжектора и используется для запуска приложения. Только экземпляры и константы могут быть введены в блок прогона. Это необходимо предотвратить возникновение конфигурации системы после работы.
Реализация кода:
Angular.Module ('MyModule', []). config (function (injectables) {// Block Config Config Block // Это пример блока конфигурации. // Вы можете иметь столько из них, сколько хотите. // Вы можете вводить только провайдеров (не экземпляры) // в блоки конфигурации.}). run (function (injectables) {// Блок конфигурации инъектора экземпляра // Это пример блока проночного блока. // Вы можете иметь столько из них, сколько хотите. // Вы можете вводить только экземпляры (не поставщики) // в блоки выполнения});Модули также имеют несколько простых способов настройки, и использование их эквивалентно использованию кодовых блоков. Например:
Angular.Module ('MyModule', []). Значение ('A', 123). Factory ('a', function () {return 123;}). Директива ('DiMiMeviename', ...). Filter ('file Entername', ...); // - такая же acangular.module ('mymodule', []). config (function ($ предоставление, $ compileprovider, $ filterprovider) {$ предоставление.Блоки конфигурации будут применяться в Ордене регистрации в $ предоставления, $ compleprovider, $ filterprovider и $ filterprovider. Единственным исключением является определение констант, которое всегда следует размещать в начале блока конфигурации.
Бегущие блоки наиболее похожи на основной метод в AngularJS. Блок запуска - это кусок кода, используемый для запуска приложения. Он выполняется после того, как все сервисы настроены и создаются все форсунки. Запуск блоков обычно содержит некоторый код с трудом для тестирования, поэтому их следует записать в отдельных модулях, чтобы их можно было игнорировать во время модульного тестирования.
Модуль может перечислять другие модули в качестве его зависимостей. «Зависит от определенного модуля» означает, что зависимый модуль должен быть загружен перед модулем. Другими словами, блок конфигурации зависимого модуля будет выполнен до блока конфигурации этого модуля. То же самое касается бега блоков. Любой модуль может быть загружен только один раз, даже если он зависит от нескольких модулей.
Модуль - это метод, используемый для управления конфигурацией инжектора $, и не имеет ничего общего с загрузкой сценария. В Интернете есть много библиотек для загрузки модулей управления, которые можно использовать с AngularJS. Поскольку модули ничего не делают во время загрузки, они могут быть загружены в любом порядке или параллельно