Урок за модул AngularJS с пример

Какво представлява модулът AngularJS?

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

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

В този урок ще научите -

Как да създам модул в AngularJS
Модули и контролери

Как да създам модул в 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 страница.


Глобално събитие на Guru99
{{° С}}

В горния код включваме нашия 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;});

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

```
var sampleApp = angular.module('sampleApp',[]);
```
Ние специално създаваме модул AngularJS, наречен 'sampleApp'. Това ще формира логическа граница за функционалността, която ще съдържа този модул. Така че в горния пример имаме модул, който съдържа контролер, който изпълнява ролята на добавяне на 2 обекта на обхват. Следователно можем да имаме един модул с логическа граница, който казва, че този модул ще изпълнява само функционалността на математическите изчисления за приложението.
```
sampleApp.controller('DemoController', function($scope)
```
Сега прикачваме контролера към нашия модул AngularJS "SampleApp". Това означава, че ако не препращаме към модула „sampleApp“ в основния ни HTML код, няма да можем да препращаме към функционалността на нашия контролер.

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


Guru99 Global Event
{{c}}

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

В нашето тяло,

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

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

В 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;});

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

```
 var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);
```
Създадени са 2 отделни ъглови модула, единият с името „AdditionApp“, а вторият с името „SubtractionApp“.
```
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)
```
За всеки модул има дефинирани 2 отделни контролера, единият се нарича DemoAddController, а другият е DemoSubtractController. Всеки контролер има отделна логика за събиране и изваждане на числа.

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

AdditionAddition :{{c}}

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

Препращаме към нашия файл Utilities.js в основния ни файл на приложението. Това ни позволява да препращаме към всички модули AngularJS, дефинирани в този файл.
Осъществяваме достъп до модула „AdditionApp“ и DemoAddController, като използваме съответно директивата ng-app и ng-controller.
```
{{c}}
```
Тъй като ние се позоваваме на гореспоменатия модул и контролер, ние можем да препращаме към променливата $ scope.c чрез израз. Изразът ще бъде резултат от добавянето на 2 променливи на обхвата a и b, което беше извършено в контролера „DemoAddController“

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

Стъпка 3) Създайте основните си файлове на приложението. Нека създадем файл, наречен "ApplicationSubtraction.html" и добавим кода по-долу

AdditionSubtraction :{{d}}

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

Препращаме към нашия файл Utilities.js в основния ни файл на приложението. Това ни позволява да препращаме към всички модули, дефинирани в този файл.
Имаме достъп до модула „SubtractionApp и DemoSubtractController, като използваме съответно директивата ng-app и ng-controller.
```
{{d}}
```
Тъй като ние се позоваваме на гореспоменатия модул и контролер, ние можем да препращаме към променливата $ scope.d чрез израз. Изразът ще бъде резултат от изваждането на 2 променливи на обхвата a и b, което беше извършено в контролера „DemoSubtractController“

Обобщение

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