AngularJS ماڈول

AngularJS ماڈول ایک ایپلیکیشن کا تعریف کرتا ہے。

ماڈول، ایپلیکیشن کے مختلف حصوں کا کنٹینر ہوتا ہے。

ماڈول، ایپلیکیشن کنٹرولر کا کنٹینر ہوتا ہے。

کنٹرولر ہمیشہ کسی ماڈول کا حصہ ہوتا ہے。

ماڈول بنائیں

AngularJS فانکشن کا استعمال کرکے،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>

آپ خود بچار کریں

您将在本教程后面了解有关控制器的更多信息。

添加指令

AngularJS 有一组内置指令，您可以使用它们向应用程序添加功能。

如需完整参考，请访问我们的 AngularJS 指令参考。

此外，您可以使用模块向您的应用程序添加自己的指令：

مثال


<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

آپ خود بچار کریں

您将在本教程的后面部分详细了解指令。

文件中的模块和控制器

在 AngularJS 应用程序中，将模块和控制器放在 JavaScript 文件中是很常见的。

在此例中，"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>


</body>
</html>

آپ خود بچار کریں

myApp.js

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

模块定义中的 [] 参数可用于定义依赖模块。

如果没有 [] 参数，则您不是在创建新模块，而是在检索现有模块。

myCtrl.js

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

函数可能会污染全局命名空间

在 JavaScript 中应避免使用全局函数。 它们很容易被其他脚本覆盖或破坏。

انجولار جی ایس ماڈول بغیر کسی کوشش کی انجولار جی ایس کی سبھی فنکشنز کو ماڈول کی اندرون کی محفوظ رکھ کر اس معاملے کو کم کرتا ہے

کی وقت لیبریری لوڈ کریں

بائیں سمت میں اسکریپٹ رکھنا <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>

آپ خود بچار کریں