دوره آموزشی 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>
بالاخره فهمیدم چی به چی شد .
ممنونم از شما .