ably ably برای هدایت شدن به سایت جدید اینجا کلیک کنید

آموزش برنامه نویسی

آموزش برنامه نویسی وب، اندروید، ویندوز , اسکیوال و...
Tell: 0912 097 5516
| Email: Hello@EduOnline.ir

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

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

 

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

 

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

آموزش AngularJS

بخش هجدهم

AngularJS Scopes

بخش دوم AngularJS Scopes


Scope  یک شی جاوا اسکریپتی است که وظیفه اتصال مابین View و کنترلرها را بر عهده دارد. Scope شامل مدل داده (model data) است. در کنترلر مدل داده از طریق شی scope$ مورد دسترسی قرار می گیرد.

<script>
      var mainApp = angular.module("mainApp", []);

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

در مثال بالا چندین نکته مهم وجود دارد:
1- در زمان تعریف سازنده کنترلر شی scope$ به عنوان اولین پارامتر انتقال داده می شود.
2-scope.message $ و  $scope.typeمدل هایی هستند که در صفحه HTML مورد استفاده قرار می گیرند.
3- ما در مدل هایی که در ماژول برنامه از کنترلر shapeController استفاده می کنند را مقدار دهی کردیم.
4- ما همچنین می توانیم توابع را در scope$ تعریف کنیم.

ارث بری Scope

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

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



در کد بالا ما message را در کنترلر فرزند (circleController) بازنویسی کردیم. ، باز نویسی ما زمانی مورد استفاده قرار می گیرد که از message در کنترلر circleController استفاده کنیم.


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

<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>

کد بالا را ذخیره و اجرا کنید.

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

نظرات (۰)

هيچ نظري هنوز ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
up
ما را در گوگل محبوب کنید