وب گردی
جدیدترین ویدیوها
پربازدیدترین ویدیوها
کانال تلگرام پورتال پادرا

ماژول ها در AngularJS

ماژول ها در AngularJS - آموزش AngularJS


تاریخ : پنجشنبه,۹ دی ۱۳۹۵ تعداد بازدید :230

در  AngularJS ماژول ها در برنامه تعریف می شوند.

ماژول در بخش های مختلف یک برنامه می توان استفاده کرد.

همچنین ماژول ها برای کنترل نرم افزارها از آن ها استفاده می شود.

کنترل ها همیشه به یک ماژول تعلق دارند.

ساختن ماژول

یک ماژول در AngularJS با استفاده از تابع angular.module ایجاد می شوند.

مثال :

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

 

"myApp" یک پارامتر است که یک عنصر html در نرم افزار اجرا می کند.

حالا شما می توانید کنترل، بخشنامه ها، فیلترها بیشتری به برنامه AngularJS خود اضافه کنید.

اضافه کردن Controller

یک کنترلر در 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 = "John";
    $scope.lastName = "Doe";
});
</script>

استفاده ماژول و کنترلر در یک فایل

در AngularJS برنامه های مشترک کاربردی برای قرار دادن ماژول و کنترل در فایل های جاوا اسکریپت وجود دارد.

در این مثال، "myApp.js" برای تعریف ماژول نرم افزار، در حالی که "myCtrl.js" شامل کنترل برنامه است.

مثال :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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";
});

 

چگونگی بارگذاری کتابخانه

به جای بارگذاری وقرار دادن اسکریپت کتابخانه AngularJS بعد از تگ BODY آن را در قسمت HEAD یا ابتدا BODY تعریف نمایید.

دلیل آن این است دلیل angular.module باید بعد از کتابخانه استفاده شود.

مثال :

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>

 

 


منبع: پورتال پادرا

برچسب ها :





این مقاله را دوست داشتید؟ آنرا به اشتراک بگذارید




دیدگاه




در ارتباط با همین مطلب بخوانید