کنترل کننده در آنگولار جی

در این بخش با angular js controller – کنترل کننده آنگولار جی اس بصورت مقدماتی و کامل آشنا خواهید شد.

(controller) کنترل کننده های AngularJS اطلاعات مربوط به برنامه های AngularJS را کنترل می کنند.

(controller) کنترل کننده های AngularJS به طور منظم جاوا اسکریپت هستند.

مقالات

کنترل کننده AngularJS

برنامه های AngularJS توسط کنترل کننده ها (controller) کنترل می شوند.

دستورالعمل ng-controller کنترل کننده (controller) برنامه را تعریف می کند.

یک کنترل کننده (controller) یک شیء جاوا اسکریپت است، ایجاد شده توسط یک سازنده شیء استاندارد جاوا اسکریپت.

مثال کنترل کننده آنگولار جی اس:

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}

</div>

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

app.controller('myCtrl', function($scope) {

$scope.firstName = "John";

$scope.lastName = "Doe";

});

</script>

برنامه توضیح داد:

برنامه AngularJS توسط ng-app = “myApp” تعریف شده است. این برنامه در داخل <div> اجرا می شود.

ویژگی ng-controller = “myCtrl” یک دستور AngularJS است. این کنترل کننده را تعریف می کند.

تابع myCtrl یک تابع جاوا اسکریپت است.

AngularJS با استفاده از شی $scope فراخوانی می کند.

در آنگولار جی اس $scope شی برنامه کاربردی (application) است. صاحب متغیر ها و توابع کاربردی

کنترل کننده دو ویژگی (متغیر) را در دامنه (firstName و LastName) ایجاد می کند.

دستور ng-model زمینه های ورودی را به خواص(property) کنترل کننده (firstName و lastName) پیوند می دهد.

Controller Method- متد کنترل کننده / کنترلر انگولار جی اس

مثال بالا یک شی کنترل کننده با دو ویژگی: lastName و firstName را نشان داد.

کنترل کننده همچنین می تواند روش ها (متغیرها را به عنوان توابع) داشته باشد:

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{fullName()}}

</div>

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

app.controller('personCtrl', function($scope) {

$scope.firstName = "John";

$scope.lastName = "Doe";

$scope.fullName = function() {

return $scope.firstName + " " + $scope.lastName;

};

});

</script>

کنترل کننده ها در فایل های خارجی

در برنامه های بزرگتر، کنترلرها در فایل های خارجی رایج هستند.

فقط کد بین تگ <script> را به یک فایل خارجی با نام personController.js کپی کنید:

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script src="personController.js"></script>

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{fullName()}}

</div>

مثالی دیگر

برای مثال بعدی یک فایل کنترل جدید ایجاد خواهیم کرد:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}

];

});

فایل را به عنوان namescontroller.js ذخیره کنید:

و سپس از فایل کنترل کننده در یک برنامه استفاده کنید:

مثال:

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

<ul>

</li>

</ul>

</div>

5/5 - (1 امتیاز)

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

Stevbope گفت:

جولای 27, 2019 در 4:58 ق.ظ

Amoxicillin And Tinitis Viagra Y Diabetes viagra online pharmacy Finasteride 5 Mg Online Cheap Pfizer Viagra Qualityrx Supplier

پاسخ
Stevbope گفت:

جولای 28, 2019 در 4:06 ب.ظ

Order Cialis Online Canada Buy Diflucan Cheap No Prescription viagra Propecia Regrow

پاسخ

کنترل کننده در آنگولار جی – AngularJS Controller

کنترل کننده AngularJS

Controller Method- متد کنترل کننده / کنترلر انگولار جی اس

کنترل کننده ها در فایل های خارجی

مثالی دیگر

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

کنترل کننده AngularJS

Controller Method- متد کنترل کننده / کنترلر انگولار جی اس

کنترل کننده ها در فایل های خارجی

مثالی دیگر

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ