a

ABLY مقالات و مطالب مجموعه

دوره آموزشی AngularJS به زبان فارسی - بخش یازدهم

دوره آموزشی AngularJS به زبان فارسی - بخش یازدهم

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "

 

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

 

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش یازدهم

 

AngularJS Modules

ماژول ها برنامه را تعریف می کنند و همه Controller های برنامه باید به یک ماژول متعلق باشند. ماژول ها برنامه ها را خوانا تر می کنند و باعث می شوند فضای نامی شما واضح تر باشد و قدرت توسعه شما را افزایش می دهد.

 

مثال AngularJS Module

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

 

 <!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html> 

 

کنترلرها Global Namespace را آلوده می کنند

همه مثالهایی که ما در این آموزش بررسی کردیم، از متغییرها و توابع سراسری استفاده می کردند. در برنامه های کاربردی باید از نوشتن توابع و متغییرهای سراسری اجتناب کنید زیرا کنترل کردن این موارد سراسری بسیار مشکل خواهد بود زیرا آنها می توانند توسط کدهای دیگر بازنویسی یا تغییر داده شوند. استفاده از ماژول ها می تواند این مشکلات حل کند و یا کاهش دهد.
 

یک Controller بدون Module

برنامه زیر نام ندارد و Controller آن سراسری است.
 

 <!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
function myCtrl($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}
</script>

</body>
</html> 

 

یک Controller با Module

برنامه زیر نام دارد (ng-app="myApp") و controller آن یک پراپرتی از یک ماژول است.

 

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<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>

 

چه زمانی فایلها را لود کنیم

نکته: در مثال بالا کتابخانه AngularJS در بخش <head> صفحه لود شده است.
یک نکته که باید در برنامه های HTML مورد نظر واقع شود این است که، بهتر است شما کتابخانه های خود را در انتهای عنصر Body فراخوانی و لود کنید. اما در بیشتر مثالهای AngularJS شما می بینید که در بخش <head> لود می شوند، این کار صحیح است زیرا باید فایل کتابخانه اصلی AngularJS قبل از توابع و ماژول ها لود شود اما می توان برای افزایش سرعت لود برنامه ها به این صورت عملکرد که در انتهای Body ابتدا کتابخانه AngularJS لود شود و سپس بعد از آن خطوط مربوط به کدهای ماژول نوشته شود:

 

 <!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

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

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

</body>
</html> 

 

فایلهای برنامه AngularJS

باتوجه به این مسئله که شما در حال حاضر ماژول ها را می شناسید و می دانید آن ها چطور کار می کنند زمان آن رسیده است تا فایل برنامه خود را ایجاد کنیم.
برنامه شما باید حداقل یک فایل ماژول داشته باشد و یک فایل Controller برای هر  Controller نیز باید ساخته شود.

در ابتدا یک یک فایل ماژول با نام "myApp.js" ایجاد کنید:

 

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


نکته: پارامتر [] در تعریف ماژول می تواند برای تعریف ماژول های وابسته مورد استفاده قرار گیرد.

حال یک فایل Controller با نام "myCtrl.js" ایجاد کنید:

 

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


در نهایت صفحه HTML خود را ویرایش کنید:

 

 <!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html> 

مشاهده تمامی آموزش های دوره AngularJS

نظرات

  • Hannah Martinez
    لیلی
    دو شنبه 11 دی 1278 0:00

    عالی بود
    بالاخره فهمیدم چی به چی شد .
    ممنونم از شما .

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :Phone Number
0713 625 1757 :Phone Number