logo-mini

AngularJS ماژول

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

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

ماژول یک ظرف برای کنترل نرم افزار است.

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


ایجاد یک ماژول

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

<div ng-app=”myApp”>…</div>

<script>

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

</script>

این “از MyApp” پارامتر به یک عنصر HTML است که در آن برنامه اجرا خواهد شد، اشاره دارد.

حالا شما می توانید کنترل، دستورات، فیلتر، و بیشتر به برنامه از 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 دارای مجموعه ای از دستورات ساخته شده است که در آن شما می توانید استفاده کنید برای اضافه کردن قابلیت به درخواست شما.

برای یک مرجع کامل، بازدید ما از AngularJS بخشنامه مرجع .

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

مثال

<div ng-app=”myApp” w3-test-directive></div>

<script>

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

app.directive(“w3TestDirective”, function() {

    return {

        template : “I was made in a directive constructor!”

    };

});

</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 ماژول را کاهش می دهد این مشکل، با نگه داشتن همه توابع محلی به ماژول.


هنگامی که برای بارگذاری کتابخانه

در حالی که آن را در برنامه های کاربردی HTML مشترک به جای اسکریپت در پایان است <body> عنصر، توصیه می شود که شما در کتابخانه AngularJS را بارگذاری یا در <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>

خودت آن را امتحان کن “

 


نظر بدهید