بخش های اصلی

آموزش AngularJS

آموزش AngularJS – کار با Scopeها

Scope یک شیءِ جاوا اسکریپتِ خاصه که نقش اتصال دهنده ی controller با viewها را بازی می کنه. Scope حاوی ماژولِ داده ست. در controllerها، ماژول داده توسط شیءِ $scope دسترس پذیر میشه.

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
</script>

در ادامه نکات مهمی که در مثال بالا آورده شده اند، آمده.

  • $scope بعنوان اولین آرگومان در تعریف سازنده، به controller پاس داده میشه.
  • $scope.message و $scope.type ، ماژول هایی هستن که در صفحه ی HTML استفاده میشن.
  • مقادیر را در ماژول هایی قرار داده ایم که در ماژول های applicationای که controllerشان، shapeController است، منعکس خواهند شد.
  • می توانیم در $scope ، بخوبی توابع را تعریف کنیم.

وراثتِ Scope

Scopeها، controllerهای خاصی هستن. اگه controllerهای تو در تو تعریف کنیم، controller فرزند، scope مربوط به controller والدش را به ارث میبره.

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
   
   mainApp.controller("circleController", function($scope) {
      $scope.message = "In circle controller";
   });
	
</script>

در ادامه نکاتی که در مثال بالا باید در نظر گرفته بشن آمده.

  • مقادیر را در ماژول هایی به نام ShapeController قرار میدیم.
  • پیام ها را در controller فرزند، به نام circleController، بازنویسی (overridden) می کنیم. وقتی “message” داخل ماژول کنترلرِ circleController استفاده میشه، message بازنویسی شده (overridden) استفاده خواهد شد.

مثال

مثال زیر تمام دستورات بالا را نشان میده.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "shapeController">
         <p>{{message}} <br/> {{type}} </p>
         
         <div ng-controller = "circleController">
            <p>{{message}} <br/> {{type}} </p>
         </div>
         
         <div ng-controller = "squareController">
            <p>{{message}} <br/> {{type}} </p>
         </div>
			
      </div>
		
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller("shapeController", function($scope) {
            $scope.message = "In shape controller";
            $scope.type = "Shape";
         });
         
         mainApp.controller("circleController", function($scope) {
            $scope.message = "In circle controller";
         });
         
         mainApp.controller("squareController", function($scope) {
            $scope.message = "In square controller";
            $scope.type = "Square";
         });
			
      </script>
      
   </body>
</html>

نتیجه

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

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

خبـرنــامه

Newsletters

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

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

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

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

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

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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