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

نویسنده اسماعیل شیدایی

یک شنبه 27 مهر 1393 - 7:22

دوره آموزشی 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

AngularJS Controllers ها در AngularJS Directives ها در AngularJS Expressions ها در AngularJS آموزش angularjs آموزش AngularJS به زبان فارسی آموزش رایگان AngularJS به زبان فارسی دوره آموزشی AngularJS به زبان فارسی دوره رایگان آموزشی AngularJS به زبان فارسی معرفی AngularJS

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

صفحه اصلی / ABLY مقالات و مطالب مجموعه / دوره آموزشی AngularJS به زبان فارسی - بخش یازدهم

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

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

آموزش AngularJS

AngularJS Modules

مثال AngularJS Module

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

یک Controller بدون Module

یک Controller با Module

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

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

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

نظرات

لیلی

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

دسترسی سریع

تماس با ما

تماس با ما

0912 097 5516 :شماره تماس

0713 625 1757 :شماره تماس