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

AngularJS Sample Application

  
     

{{message}}
{{type}}

     
        

{{message}}
{{type}}

     
     
        

{{message}}
{{type}}

     
  
        کد بالا را ذخیره و اجرا کنید.     مشاهده تمامی آموزش های دوره AngularJS ", "image": "/landingpages/images/blog-image-one.jpg", "author": { "@type": "", "name": "اسماعیل شیدایی", "url": "" }, "publisher": { "@type": "Organization", "name": "شرکت توسعه و مدیریت پارسیان زرین | Ably ابلای", "logo": { "@type": "ImageObject", "url": "https://ably.ir/" } }, "datePublished": "1393/8/12 5:47:00", "dateModified": "" }
دوره آموزشی AngularJS به زبان فارسی - بخش هجدهم

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

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

 

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

 

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

آموزش AngularJS

بخش هجدهم

 

AngularJS Scopes

بخش دوم AngularJS Scopes


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

 


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

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک 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

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

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس