a

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

دوره آموزشی 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 :Phone Number
0713 625 1757 :Phone Number