%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

آموزش انگولار-ماژول ها

یک ماژول انگولار، درواقع یک اپلیکیشن را تعریف می کند. 

ماژول درواقع یک ظرف برای نگهداری قسمت های مختلف یک اپلیکیشن است.

همچنین می توان گفت که ماژول، یک ظرف برای کنترلرهای اپلیکیشن است.

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


یک ماژول به همراه یک کنترلر

اپلیکیشن زیر("myApp") دارای یک کنترلر("myCtrl") است:

مثالی از انگولار

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

<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>
خودتان امتحان کنید »

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

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

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

مثالی از انگولار

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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", []);
Note

از پارامتر [] در تعریف ماژول می توان برای تعریف ماژول های وابسته استفاده نمود.

myCtrl.js

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

توابع می توانند فضاهای نام سراسری را آلوده کنند

در جاوااسکریپت باید از تابع های سراسری اجتناب نمود. زیرا آنها می توانند توسط دیگر اسکریپت ها بازنویسی یا خراب شوند. 

ماژول های انگولار، با قرار دادن توابع به صورت محلی درون ماژول مربوطه،  این خطا را کاهش می دهند. 


زمان لود کردن کتابخانه

تا هنگامی که در اپلیکیشن های HTML رسم بر این است که اسکریپت ها در آخر عنصر <body> قرار داده شوند، توصیه می شود که شما فایل کتابخانه ی انگولار را در قسمت <head>  یا در ابتدای تگ <body> قرار دهید. 

این به خاطر این است که فراخوانی angular.module تنها می تواند بعد از اینکه این کتابخانه بارگذاری شد، کامپایل شود. 

مثالی از انگولار

<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>
خودتان امتحان کنید »

دیدگاه‌ها  

0 # E_NR 1396-07-25 08:33
سلام. وقتتون بخیر. خروجی مثال دوم بطور صحیح نمایش داده نمی شه...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-12-09 09:55
سلام وعرض ادب
همان طور که در مثال ها مشاهده می کنید، برای لینک دادن به فایل js از روش CDN استفاده کردیم و ممکنه که بطور صحیح این کار انجام نشه و در نتیجه خروجی مثال بطور صحیح نمایش داده نمی شه ...
لطفا اگر با این مشکل مواجه شدید بجای http از https استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی