logo-mini

AngularJS Controllers

AngularJS بر حسب نوری کنترل داده ها از AngularJS را برنامه های کاربردی.

AngularJS بر حسب نوری اشیاء به طور منظم جاوا اسکریپت هستند.


AngularJS Controllers

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

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

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

AngularJS را به عنوان مثال

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

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

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

این برنامه از AngularJS است NG-app= “از MyApp” تعریف شده است. نرم افزار قابل اجرا در داخل <div> باشد.

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

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

AngularJS را به کنترل با یک شیء $ دامنه احضار کند.

در AngularJS، $ دامنه شی درخواست (صاحب متغیرهای نرم افزار و توابع) است.

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

دستورات NG-مدل اتصال زمینه های ورودی به خواص کنترل (FirstName و LastName).


مواد و روش ها کنترل

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

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

AngularJS را به عنوان مثال

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

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


بر حسب نوری در فایل های خارجی

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

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

AngularJS را به عنوان مثال

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

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


مثالی دیگر

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

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

    $scope.names = [

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

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

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

    ];

});

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

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

AngularJS را به عنوان مثال

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


نظر بدهید