انگولار جی ایس ماڈول
- پچھلے پیج انگولار جی ایس ایکسپریشن
- پائیدار پیج انگولار جی ایس آئرڈیکٹ
AngularJS ਮੌਡੂਲ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ。
ਮੌਡੂਲ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਦਾ ਕੰਟੇਨਰ ਹੈ。
ਮੌਡੂਲ ਐਪਲੀਕੇਸ਼ਨ ਕੰਟਰੋਲਰ ਦਾ ਕੰਟੇਨਰ ਹੈ。
ਕੰਟਰੋਲਰ ਹਮੇਸ਼ਾ ਕਿਸੇ ਮੌਡੂਲ ਦਾ ਹਿੱਸਾ ਹੁੰਦਾ ਹੈ。
ਮੌਡੂਲ ਬਣਾਓ
AngularJS ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲangular.module ਇੱਕ ਮੌਡੂਲ ਬਣਾਓ:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" ਪੈਰਾਮੀਟਰ ਇਹ ਦਿਸ਼ਾ ਵਿੱਚ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਕਿਸ ਹੀ ਐਲੀਮੈਂਟ ਵਿੱਚ ਚਲੇਗਾ。
ਹੁਣ ਤੁਸੀਂ 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>
ਤੁਸੀਂ ਇਸ ਟਿੂਟੋਰੀਅਲ ਦੇ ਪਿੱਛਲੇ ਹਿੱਸੇ ਵਿੱਚ ਕੰਟਰੋਲਰ ਬਾਰੇ ਵਿਸਤਾਰ ਪ੍ਰਾਪਤ ਕਰਨਗੇ。
ਨਿਰਦੇਸ਼ਾਂ ਜੋੜਨਾ
AngularJS ਇੱਕ ਸੈਟ ਬਿਨਾਂ ਨਿਰਦੇਸ਼ਾਂ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਆਪਣੇ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ ਕਿਉਂਕਿ
ਪੂਰੀ ਸੂਚਨਾ ਲਈ ਸਾਡੀ AngularJS ਨਿਰਦੇਸ਼ਾਂ ਜਾਣਕਾਰੀ ਪ੍ਰਵੇਸ਼ ਸਥਾਨ
ਇਲਾਵਾ, ਤੁਸੀਂ ਆਪਣੇ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਆਪਣੀਆਂ ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ ਕਿਉਂਕਿ
ਇੱਕ
<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>
ਤੁਸੀਂ ਇਸ ਟਿੂਟੋਰੀਅਲ ਦੇ ਪਿੱਛਲੇ ਹਿੱਸੇ ਵਿੱਚ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਵਿਸਤਾਰ ਪ੍ਰਾਪਤ ਕਰਨਗੇ。
ਫਾਇਲ ਵਿੱਚ ਮਾਡਿਊਲ ਅਤੇ ਕੰਟਰੋਲਰ
AngularJS ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਮਾਡਿਊਲ ਅਤੇ ਕੰਟਰੋਲਰਸ ਜੈਵਾਸਕ੍ਰਿਪਟ ਫਾਇਲ ਵਿੱਚ ਰੱਖਣਾ ਬਹੁਤ ਆਮ ਹੈ。
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, "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";
});
ਫੰਕਸ਼ਨ ਗਲੋਬਲ ਨੇਮਸਪੇਸ ਨੂੰ ਪ੍ਰਦੂਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹਨ
ਜੈਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਗਲੋਬਲ ਫੰਕਸ਼ਨਸ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਨਹੀਂ ਚਾਹੀਦਾ। ਉਹਨਾਂ ਨੂੰ ਹੋਰ ਸਕ੍ਰਿਪਟਸ ਦੁਆਰਾ ਓਵਰਰਾਇਟ ਕਰ ਸਕਦੇ ਹਨ ਜਾਂ ਨੁਕਸਾਨ ਪਹੁੰਚਾ ਸਕਦੇ ਹਨ。
AngularJS ਮਾਡਿਊਲ ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਘੱਟ ਕਰਨ ਲਈ ਸਾਰੇ ਫੰਕਸ਼ਨਸ ਨੂੰ ਮਾਡਿਊਲ ਲੋਕਲ ਵਿੱਚ ਰੱਖਦਾ ਹੈ。
ਲਾਇਬ੍ਰੇਰੀ ਕਿਉਂਕਿ ਲੋਡ ਕਰਨ ਦਾ ਸਮਾਂ ਹੈ
ਹੈਲਥ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸਕ੍ਰਿਪਟ ਰੱਖਣਾ <body> ਐਲੀਮੈਂਟ ਦੇ ਅੰਤ ਵਿੱਚ ਇਹ ਬਹੁਤ ਆਮ ਹੈ ਲੇਕਿਨ ਸਿਫਾਰਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਉਸ ਨੂੰ <head> ਜਾਂ <body> ਕੋਡ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ AngularJS ਲਾਇਬ੍ਰੇਰੀ ਲੋਡ ਕਰੋ。
ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਕੇਵਲ ਲਾਇਬ੍ਰੇਰੀ ਲੋਡ ਕਰਨ ਤੋਂ ਬਾਅਦ ਹੀ ਉਸ ਦਾ ਕੋਡ ਕੰਪਾਇਲ ਹੋ ਸਕਦਾ ਹੈ。 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>
- پچھلے پیج انگولار جی ایس ایکسپریشن
- پائیدار پیج انگولار جی ایس آئرڈیکٹ
