ఆంగులార్ జి మాడ్యూల్స్
- ముందు పేజీ ఆంగులార్ జి ఎక్స్ప్రెషన్స్
- తరువాత పేజీ ఆంగులార్ జి ఇన్స్ట్రక్షన్స్
ఆంగులర్ జిఎస్ మాడ్యూల్ ఒక అప్లికేషన్ ని నిర్వచిస్తుంది.
మాడ్యూల్ అప్లికేషన్ వివిధ భాగాలకు కంటైనర్.
మాడ్యూల్ అప్లికేషన్ కంట్రోలర్ కి కంటైనర్.
కంట్రోలర్స్ ఎల్లప్పుడూ కొన్ని మాడ్యూల్కు చెందినవి.
మాడ్యూల్ సృష్టించండి
ఆంగులర్ జిఎస్ ఫంక్షన్స్ ఉపయోగించి,angular.module ఒక మాడ్యూల్ సృష్టించండి:
...<script> var app = angular.module("myApp", []); </script> "myApp" 参数指的是应用程序将在其中运行的 HTML 元素。
现在，您可以在 AngularJS 应用程序中添加控制器、指令、过滤器等。
添加控制器
向您的应用程序添加一个控制器，并使用 ng-controller 指令引用该控制器：
ఉదాహరణ
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
ఈ పాఠ్యక్రమంలో తర్వాత మీరు కంట్రోలర్స్ గురించి మరింత వివరంగా తెలుసుకోగలరు.
నిర్దేశాలు జోడించండి
ఆంగులార్ జిఎస్ కి నిర్దేశాల ఒక జాబితా ఉంది మరియు మీ అప్లికేషన్కు సామర్థ్యాలు జోడించవచ్చు.
పూర్తి పరిశీలన కోసం మా ఆంగులార్ జిఎస్ నిర్దేశాల పరిశీలనకు లింక్ చేయండి.
పదార్థం, మీరు ఆప్లికేషన్కు సొంత నిర్దేశాలు జోడించవచ్చు మాడ్యూల్లు ఉపయోగించడం ద్వారా:
ఉదాహరణ
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
ఈ పాఠ్యక్రమంలో తర్వాత మీరు నిర్దేశాలను మరింత వివరంగా తెలుసుకోగలరు.
ఫైల్లో మాడ్యూల్స్ మరియు కంట్రోలర్స్
ఆంగులార్ జిఎస్ అప్లికేషన్లో మాడ్యూల్స్ మరియు కంట్రోలర్స్ ను జావాస్క్రిప్ట్ ఫైల్స్ లో ఉంచడం చాలా సాధారణం.
ఈ ఉదాహరణలో, "myApp.js" అనేది అప్లికేషన్ మాడ్యూల్ నిర్వచనను కలిగివుంది మరియు "myCtrl.js" అనేది కంట్రోలర్ను కలిగివుంది:
ఉదాహరణ
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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 = "Bill";
$scope.lastName= "Gates";
});
ఫంక్షన్స్ గ్లోబల్ నెమ్‌స్పేస్ ను మురికించవచ్చు
జావాస్క్రిప్ట్‌లో గ్లోబల్ ఫంక్షన్స్ ఉపయోగించాలని నిరోధించాలి. వాటిని ఇతర స్క్రిప్ట్లు సులభంగా అందించవచ్చు లేదా నాశనం చేయవచ్చు.
ఆంగులార్ జిఎస్ మాడ్యూల్స్ మొత్తం ఫంక్షన్స్ ను మాడ్యూల్ లోపల ఉంచడం ద్వారా ఈ సమస్యను తగ్గిస్తాయి.
లైబ్రరీ యొక్క లోడ్ చేయటం ఎప్పుడు జరగాలి
ఇంటర్నెట్ అప్లికేషన్లో స్క్రిప్ట్‌లను ఎక్కడ లోడ్ చేయాలనే ప్రశ్న ఉంది. <body> ఎలిమెంట్ యొక్క ముగింపులో ఉండటం చాలా సాధారణం కానీ, మీరు దానిని ఉపయోగించకుండా ఉండాలని సిఫారసు చేస్తున్నాము. <head> లేదా <body> లో ప్రారంభంలో ఆంగులార్ జిఎస్ లైబ్రరీని లోడ్ చేయండి.
ఇది లోడ్ అయిన తర్వాత మాత్రమే కంపైల్ చేయగలరు అని ఇది ఎందుకంటే. angular.module యొక్క ఉపయోగం.
ఉదాహరణ
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/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 = "Bill";
$scope.lastName = "Gates";
});
</script>
</body>
</html>
- ముందు పేజీ ఆంగులార్ జి ఎక్స్ప్రెషన్స్
- తరువాత పేజీ ఆంగులార్ జి ఇన్స్ట్రక్షన్స్
