a

ABLY مقالات و مطالب مجموعه

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

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

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "<>

 

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

 

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

دوره آموزش AngularJS

بخش چهارم

 

 

AngularJS Controllers


AngularJS از معماری MVC استفاده می کند و AngularJS  برای کنترل برنامه از controller ها استفاده می کند.
رهنمود ng-controller برای تعریف controller ها درAngularJS  به کار می رود.
کدهای درون controller ها پس از لود شدن کامل صفحه اجرا می شوند.
یک controller یک JavaScript Object است که به وسیله  object constructor استاندارد ایجاد شده است. 

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

در AngularJS، شی scope$ شی برنامه می باشد و در واقع مالک اشیا و توابع برنامه های AngularJS می باشد.

 

مثال

 

 <div ng-app="" ng-controller="personController">

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>
function personController($scope) {
    $scope.firstName="John",
    $scope.lastName="Doe"
}
</script> 

 

برنامه AngularJS به وسیله ng-app تعریف می شود و برنامه درون <div> اجرا می شود.
رهنمود ng-controller نام controller  را مشخص میکند.

تابع personController یک تابع سازنده استاندارد JavaScript است. Controller ما یک property با نام person دارد ($scope.person) و خود شی Person دو property با نام های firstName و lastName دارد.
رهنمود ng-model کنترلهای input را با controller properties ما (firstName و lastName) مقید می کند.

 

Controller Methods

Controller مثال قبل یک نمونه از یک Controller  بود که تنها دو پراپرتی داشت. یک Controller می تواند همچنین توابعی داشته باشد.
مثال

 

 <div ng-app="" ng-controller="personController">

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

</div>

<script>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
}
</script> 

 

 

Controllers In External Files

در برنامه های بزرگ طبیعتا شما نمی توانید کدهای منطق برنامه خود را در صفحات بنویسید و برای جلوگیری از تکرار باید آنها در یک فایل جدا بنویسید.
کد مثال قبل را از شروع تگ <script> تا انتهای آن در یک فایل جدید با نام personController.js کپی کنید:

 

 <div ng-app="" ng-controller="personController">

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 src="personController.js"></script> 

 

مثال دیگر

برای مثال بعدی ما یک فایل Controller ایجاد کردیم.

 

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


حالا باید از فایل Controller خود در صفحه استفاده کنیم.
 

 <div ng-app="" ng-controller="namesController">

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

</div>

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

مثال دیگر


<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
   
    <title>Index</title>

</head>
<body>
    <div ng-controller="ClickController">
        <input type="button" value="Click Me!" ng-click="ClickMe()" />
    </div>
</body>

<script>

function ClickController($scope) {
    $scope.ClickMe = function () {
        alert('Hello World!');
    }
}
</script>

</html>

 

ما با استفاده از رهنمود ng-click تعیین می کنیم وقتی کاربر بر روی این المان کلیک کرد تابع ClickMe در کنترلر اجرا شود.

 

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

نظرات

  • Hannah Martinez
    حسین
    دو شنبه 11 دی 1278 0:00

    یک دونه
    {
    قبل از

    </script>

    جا افتاده
    با سپاس فراوان

    • Judith Bell
      پاسخ
      حسینبهزادی
      دو شنبه 11 دی 1278 0:00

       با عرض سلام

      از راهنمایی و دقت شما بسیار سپاسگذارم

      باتشکر

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

0912 097 5516 :Phone Number
0713 625 1757 :Phone Number