AngularJS модули

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

⚡ Умно обобщение

Модулите в AngularJS действат като контейнери, които групират контролери, услуги, директиви и филтри зад една логическа граница, така че директивата ng-app зарежда само функционалността, от която една страница действително се нуждае по време на изпълнение.

  • 🔘 Определение: angular.module регистрира и извлича всеки компонент, който приложението използва.
  • ☑️ Създаване: Масивът от зависимости създава модул; пропускането му извлича такъв.
  • ✅ Bootstrapping: ng-app именува модула Ъглови натоварвания за този регион.
  • 🧪 Разделяне: Контролерите с обхват на модули избягват глобални имена и сблъсъци между контролери.
  • 📊 Бележка към версията: Поддръжката на AngularJS приключи през януари 2022 г.; Angular предпочита самостоятелни компоненти.
Прочетете повече

AngularJS модулна групаping контролери, услуги, директиви и филтри под една граница на ng-app

Какво е AngularJS модул?

Модулът дефинира функционалността на приложението, която се прилага към цялата HTML страница, използвайки директивата ng-app. Той дефинира функционалности, като например услуги, директивии филтри, по начин, който улеснява повторната им употреба в различни приложения.

Илюстрацията по-горе обобщава тази граница.

Във всички наши по-ранни уроци, сигурно сте забелязали директивата ng-app, използвана за дефиниране на основното ви Angular приложение. Това е една от ключовите концепции на модулите в AngularJS.

⚠️ Бележка към версията: Поддръжката на AngularJS приключи през януари 2022 г., модерен ъглов използва @NgModule, а самостоятелните компоненти са по подразбиране. Кодът по-долу е исторически.

Как да създадете модул в AngularJS

Преди да започнем с това какво е модул, нека разгледаме един пример за AngularJS приложение без модул и след това да разберете необходимостта от наличието на модули във вашето приложение.

Нека помислим за създаването на файл, наречен „DemoController.js“, и добавянето на кода по-долу към файла

function DemoController($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            }

В горния код създадохме функция, наречена „DemoController“, която ще действа като контролер в нашето приложение.

В този контролер просто извършваме събирането на 2 променливи a и b и присвояваме събирането на тези променливи на нова променлива, c, и я присвояваме обратно на обхват обект.

Сега нека създадем нашия основен Sample.html, който ще бъде основното ни приложение. Нека вмъкнем кодовия фрагмент по-долу в нашата HTML страница.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

В кода по-горе ние включваме нашия DemoController и след това извикваме стойността на променливата $scope.c чрез израз.

Но забележете нашата директива ng-app, тя има празна стойност.

  • Това основно означава, че всички контролери, които се извикват в контекста на директивата ng-app, могат да бъдат достъпни глобално. Няма граница, която да разделя множество контролери един от друг.
  • Сега в съвременното програмиране това е лоша практика контролерите да не са свързани към модули и да ги правят глобално достъпни. Трябва да има някаква логическа граница, дефинирана за контролерите.

И тук идват модулите. Модулите се използват за създаване на това разделяне на граници и подпомагане на разделянето на контролери въз основа на функционалност.

Нека променим кода по-горе, за да реализираме модули и да прикрепим нашия контролер към този модул

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

Нека отбележим основните разлики в кода, написан по-горе

  1. var sampleApp = angular.module('sampleApp',[]);

    Специално създаваме AngularJS модул, наречен „sampleApp“. Това ще формира логическа граница за функционалността, която този модул ще съдържа. Така че в нашия пример по-горе имаме модул, който съдържа контролер, който изпълнява ролята на добавяне на 2 обекта на обхват. Следователно можем да имаме един модул с логическа граница, която казва, че този модул ще изпълнява само функционалността на математическите изчисления за приложението.

  2. sampleApp.controller('DemoController', function($scope)

    Сега прикачваме контролера към нашия AngularJS модул „sampleApp“. Това означава, че ако не цитираме модула „sampleApp“ в основния ни HTML код, няма да можем да цитираме функционалността на нашия контролер.

Сеттер срещу геттер: ъглов.модул създава модул само когато зависимостта масивът се предава; без него повикването извлича съществуващ модул.

Основният ни HTML код сега ще изглежда както е показано по-долу

<body ng-app="sampleApp">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Нека отбележим основните разлики в кода, написан по-горе, и нашия предишен код

<body ng-app="sampleApp">

В нашия етикет за тяло,

  • Вместо да имаме празна директива ng-app, сега извикваме модула sampleApp.
  • Чрез извикване на този приложен модул вече имаме достъп до контролера „DemoController“ и функционалността, присъстваща в демонстрационния контролер.

Модули и контролери в AngularJS

In AngularJS, моделът, използван за разработванеping Съвременните уеб приложения се състоят в създаването на множество модули и контролери, които логически разделят различни нива на функционалност.

Обикновено модулите се съхраняват отделно JavaСценарий файлове, които биха били различни от основния файл на приложението.

Нека да разгледаме пример как може да се постигне това.

В примера по-долу

  • Ще създадем файл, наречен Utilities.js, който ще съдържа 2 модула, единият за изпълнение на функционалността за събиране, а другият за изпълнение на функционалността за подчинение.tracТА.
  • След това ще създадем 2 отделни файла на приложението и ще получим достъп до помощния файл от всеки файл на приложението.
  • В единия файл на приложението ще осъществяваме достъп до модула за добавяне, а в другия - до модула за подчинение.tracТА.

Стъпка 1) Дефинирайте кода за множеството модули и контролери.

var AdditionApp = angular.module('AdditionApp',[]);
AdditionApp.controller('DemoAddController', function($scope) {
       $scope.a=5;
       $scope.b=6;
       $scope.c=$scope.a + $scope.b;
});
var SubractionApp = angular.module('SubtractionApp',[]);
SubractionApp.controller('DemoSubtractController', function($scope) {
       $scope.a=8;
       $scope.b=6;
       $scope.d=$scope.a - $scope.b;
});

Нека отбележим ключовите точки в кода, написан по-горе

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    Създадени са 2 отделни AngularJS модула, единият с името „AdditionApp“, а вторият с името „Sub“.tractionApp'.

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    За всеки модул са дефинирани 2 отделни контролера, единият се нарича DemoAddController, а другият е DemoSub.tractController. Всеки контролер има отделна логика за добавяне и подчиняванеtracция на числата.

Стъпка 2) Създайте вашите основни файлове на приложението. Нека създадем файл с име ApplicationAddition.html и да добавим кода по-долу

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

СВЪРЗАНИ СТАТИИ

Нека отбележим ключовите точки в кода, написан по-горе

  1. <script src="/lib/Utilities.js"></script>

    Ние препращаме към нашия файл Utilities.js в нашия основен файл на приложението. Това ни позволява да препращаме към всички AngularJS модули, дефинирани в този файл.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    Имаме достъп до модула „AdditionApp“ и DemoAddController, като използваме директивата ng-app и ng-контролер съответно.

  3. {{c}}

    Тъй като препращаме към гореспоменатия модул и контролер, можем да препращаме към променливата $scope.c чрез израз. Изразът ще бъде резултат от добавянето на 2 променливи на обхват a и b, което е извършено в контролера „DemoAddController“

    По същия начин ще направим и за подчиненияtracфункция.

Стъпка 3) Създайте основните файлове на приложението си. Нека създадем файл с име „ApplicationSub“traction.html“ и добавете кода по-долу

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

Нека отбележим ключовите точки в кода, написан по-горе

  1. <script src="/lib/Utilities.js"></script>

    Ние препращаме към нашия файл Utilities.js в основния файл на приложението. Това ни позволява да препращаме към всички модули, дефинирани в този файл.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    Достъпваме до „Sub“tracмодулът tionApp и DemoSubtractController, като използвате съответно директивата ng-app и ng-controller.

  3. {{d}}

    Тъй като се позоваваме на гореспоменатия модул и контролер, можем да се обърнем към променливата $scope.d чрез израз. Изразът ще бъде резултат от подчинената функция.tracция на двете променливи на обхвата a и b, която беше извършена в 'DemoSub'tracКонтролер на tController

Въпроси и Отговори

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

Не. AngularJS стартира само първото намерено ng-app; следващите модули се нуждаят от ръчно извикване на angular.bootstrap за техния елемент.

config() се изпълнява, докато доставчиците се регистрират, така че само доставчиците и константите инжектират там. run() се изпълнява, след като инжекторът е готов.

Стойността на ng-app не съответства на регистриран модул. Печатни грешки, кавички или зареждане на модулния файл след AngularJS са причината за това.

Заредете го чрез angular.mock.module, след което разрешете контролерите с inject(). Покритието на ниво браузър вместо това управлява страницата, исторически с професионалистtracTor.

@NgModule пое контрола в Angular 2 и самостоятелните компоненти вече са по подразбиране, декларирайки зависимости чрез собствен масив imports.

Инструментите за машинно обучение четат всяко извикване на angular.module, изграждат график на зависимостите и класират модулите по риск от миграция. Revзрителите проверяват всеки Директива картаping.

Копилот на GitHub и подобни агентни асистенти генерират скелети на модули, контролери и файлове от един ред. Генерираният код се нуждае от преглед.

Обобщете тази публикация с: