بخش های اصلی

آموزش AngularJS

آموزش AngularJS – کنترل ها (Controller)

عمدتاً برنامه ی AngularJS برای کنترل جریان داده در برنامه، متکی بر controllerها است. یک controller، با استفاده از دستور ng-controller تعریف میشه. controller، یک شیءِ جاوا اسکریپتِه که حاویِ خصیصه ها/تنظیمات (attributes/properties) و توابعِه.  هر controllerای، $scope را بعنوان پارامتری که به برنامه/ماژولی (application/module) اشاره می کنه که controller، آن را کنترل می کنه، می پذیره.

<div ng-app = "" ng-controller = "studentController">
   ...
</div>

در ادامه controllerای به نام studentController با استفاده از دستورِ ng-controller ایجاد می کنیم. studentController را بصورت زیر تعریف می کنیم:

<script>
   function studentController($scope) {
      $scope.student = {
         firstName: "Hamid",
         lastName: "Tadayoni",
         
         fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
         }
      };
   }
</script>
  • studentController، یک شیءِ جاوا اسکریپتِه که با استفاده از $scope، بعنوان یک آرگومان، تعریف شده.
  • $scope به برنامه ای اشاره داره که شیءِ studentController از آن استفاده می کنه.
  • $scope.student، پراپرتیِ شیءِ studentController است.
  • firstName و lastName، دو پراپرتی از شیءِ $scope.student هستن. مقدارهای پیش فرض را به آن ها پاس داده ایم.
  • fullName، تابعی از شیءِ $scope.student است و وظیفه اش بازگرداندن نام ترکیبیِه.
  • در تابعِ fullName، شیءِ student را می گیریم و بعد نام ترکیبی را برمی گردانیم.
  • بعنوان یک نکته، می توانیم شیءِ controller را در فایلِ JS جداگانه ای هم تعریف کنیم و در صفحه ی html به آن فایل ارجاع بدیم.

اکنون می توانیم با استفاده از ng-model یا عباراتِ زیر، از پراپرتیِ Student از studentController استفاده کنیم.

Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
  •  student.firstName  و student.lastname را به دو جعبه ی ورودی اتصال داده ایم.
  •  student.fullName() را به HTML متصل کرده ایم.
  • حالا، هر زمان که چیزی در جعبه های ورودیِ first name و last name وارد کنین، می بینین که full name بصورت خودکار، به روز رسانی خواهد شد.

مثال

مثال زیر طرز استفاده ی controller را نشان میده.

testAngularJS.htm

<html>
   
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         
         You are entering: {{student.fullName()}}
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Hamid",
               lastName: "Tadayoni",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

خروجی

testAngularJS.htm را در مرورگر باز کنین. خروجی را ببینین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد