AngularJS модули

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

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

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

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

Как да създадете модул в 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 Angular.JS, моделът, използван за разработване на съвременни уеб приложения, е за създаване на множество модули и контролери за логическо разделяне на множество нива на функционалност.

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

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

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

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

Стъпка 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 отделни модула Angular, единият е наречен „AdditionApp“, а вторият е наречен „SubtractionApp“.

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

    Има 2 отделни контролера, дефинирани за всеки модул, единият се нарича DemoAddController, а другият е DemoSubtractController. Всеки контролер има отделна логика за събиране и изваждане на числа.

Стъпка 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“

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

Стъпка 3) Създайте вашите основни файлове на приложението. Нека създадем файл, наречен „ApplicationSubtraction.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 ">

    Имаме достъп до модула SubtractionApp и DemoSubtractController, като използваме съответно директивата ng-app и ng-controller.

  3. {{d}}

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

Oбобщение

  • Без използването на модули AngularJS контролерите започват да имат глобален обхват, което води до лоши практики за програмиране.
  • Модулите се използват за разделяне на бизнес логиката. Могат да бъдат създадени множество модули, които да бъдат логически разделени в тези различни модули.
  • Всеки AngularJS модул може да има свой собствен набор от контролери, дефинирани и присвоени към него.
  • Когато се дефинират модули и контролери, те обикновено се дефинират отделно JavaСценарий файлове. Тези JavaСлед това скриптовите файлове се препращат в основния файл на приложението.