AngularJS Modules

AngularJS தொகுதிகள்

AngularJS தொகுதிகள்

ஒரு AngularJS தொகுதி ஒரு பயன்பாட்டை வரையறுக்கிறது.

தொகுதி என்பது ஒரு பயன்பாட்டின் வெவ்வேறு பகுதிகளுக்கான கொள்கலன் ஆகும்.

தொகுதி என்பது பயன்பாட்டு கட்டுப்பாட்டாளர்களுக்கான கொள்கலன் ஆகும்.

கட்டுப்பாட்டாளர்கள் எப்போதும் ஒரு தொகுதிக்கு சொந்தமானவர்கள்.

தொகுதியை உருவாக்குதல்

AngularJS செயல்பாடான angular.module பயன்படுத்தி ஒரு தொகுதி உருவாக்கப்படுகிறது.

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

"myApp" அளவுரு பயன்பாடு இயங்கும் ஒரு HTML உறுப்பைக் குறிக்கிறது.

இப்போது நீங்கள் கட்டுப்பாட்டாளர்கள், directives, filters, மற்றும் பலவற்றை உங்கள் AngularJS பயன்பாட்டில் சேர்க்கலாம்.

கட்டுப்பாட்டாளரைச் சேர்த்தல்

உங்கள் பயன்பாட்டில் ஒரு கட்டுப்பாட்டாளரைச் சேர்த்து, ng-controller directive மூலம் கட்டுப்பாட்டாளரைக் குறிப்பிடவும்:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});

</script>

கற்றல்:

இந்த டுடோரியலில் பின்னர் நீங்கள் கட்டுப்பாட்டாளர்கள் பற்றி மேலும் பலவற்றைக் கற்றுக்கொள்வீர்கள்.

Directive சேர்த்தல்

AngularJS உங்கள் பயன்பாட்டிற்கு செயல்பாட்டினைச் சேர்க்கப் பயன்படுத்தக்கூடிய உள்ளமைக்கப்பட்ட directives தொகுப்பைக் கொண்டுள்ளது.

முழு குறிப்புக்கு, எங்கள் AngularJS directive குறிப்பைப் பார்வையிடவும்.

கூடுதலாக, உங்கள் பயன்பாடுகளில் உங்கள் சொந்த directives சேர்க்க தொகுதியைப் பயன்படுத்தலாம்:

<div ng-app="myApp" jassif-test-directive></div>

<script>
var app = angular.module("myApp", []);

app.directive("jassifTestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

கற்றல்:

இந்த டுடோரியலில் பின்னர் நீங்கள் directives பற்றி மேலும் பலவற்றைக் கற்றுக்கொள்வீர்கள்.

கோப்புகளில் தொகுதிகள் மற்றும் கட்டுப்பாட்டாளர்கள்

AngularJS பயன்பாடுகளில் தொகுதி மற்றும் கட்டுப்பாட்டாளர்களை JavaScript கோப்புகளில் வைப்பது பொதுவானது.

இந்த எடுத்துக்காட்டில், "myApp.js" ஒரு பயன்பாட்டு தொகுதி வரையறையைக் கொண்டுள்ளது, "myCtrl.js" கட்டுப்பாட்டாளரைக் கொண்டுள்ளது:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

myApp.js

var app = angular.module("myApp", []);

தொகுதி வரையறையில் [] அளவுருவை சார்ந்த தொகுதிகளை வரையறுக்கப் பயன்படுத்தலாம்.

[] அளவுரு இல்லாமல், நீங்கள் புதிய தொகுதியை உருவாக்கவில்லை, ஆனால் ஏற்கனவே உள்ள தொகுதியை மீட்டெடுக்கிறீர்கள்.

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName= "Doe";
});

செயல்பாடுகள் உலகளாவிய பெயர்வெளியை மாசுபடுத்தும்

JavaScript இல் உலகளாவிய செயல்பாடுகள் தவிர்க்கப்பட வேண்டும்.

அவை எளிதாக மற்ற ஸ்கிரிப்ட்களால் மேலெழுதப்படலாம் அல்லது அழிக்கப்படலாம்.

AngularJS தொகுதிகள் அனைத்து செயல்பாடுகளையும் தொகுதிக்கு உள்ளமைவாக வைப்பதன் மூலம் இந்த சிக்கலைக் குறைக்கின்றன.

நூலகத்தை எப்போது ஏற்றுவது

HTML பயன்பாடுகளில் ஸ்கிரிப்ட்களை <body> உறுப்பின் முடிவில் வைப்பது பொதுவானது, ஆனால் AngularJS நூலகத்தை <head> இல் அல்லது <body> இன் தொடக்கத்தில் ஏற்ற பரிந்துரைக்கப்படுகிறது.

இதற்குக் காரணம், angular.module அழைப்புகள் நூலகம் ஏற்றப்பட்ட பிறகே தொகுக்க முடியும்.

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

</body>
</html>

முக்கியமான குறிப்பு:

AngularJS நூலகத்தை HTML கோப்பின் தொடக்கத்தில் ஏற்றுவது நல்ல பயிற்சியாகும். இது angular.module அழைப்புகள் சரியாக வேலை செய்வதை உறுதி செய்கிறது.

AngularJS தொகுதிகள் ஏன் பயனுள்ளவை? (பல தேர்வுகள் சாத்தியம்)

அவை பயன்பாட்டை ஒழுங்கமைக்கின்றன
✓ சரி! தொகுதிகள் பயன்பாட்டை ஒழுங்கமைக்க உதவுகின்றன
உலகளாவிய பெயர்வெளி மாசுபாட்டைக் குறைக்கின்றன
✓ சரி! தொகுதிகள் செயல்பாடுகளை உள்ளூர்மயமாக்குகின்றன
அவை பக்க வேகத்தைக் குறைக்கின்றன
✗ தவறு! தொகுதிகள் பக்க வேகத்தை நேரடியாகக் குறைப்பதில்லை
சார்புகளை நிர்வகிக்க உதவுகின்றன
✓ சரி! தொகுதிகள் சார்ந்த தொகுதிகளை நிர்வகிக்க உதவுகின்றன

சுருக்கம்

அடுத்தது:

அடுத்த டுடோரியலில் AngularJS Directives பற்றி கற்றுக்கொள்ளுங்கள்.