بررسی Scope در فریم ورک AngularJS

بررسی Scope در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با بررسی Scope در فریم ورک AngularJS صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در یک برنامه AngularJS به طور ساده شی $scope یک Object است که به صورت Built-in ساخته می شود و شامل داده های مربوط به برنامه و همچنین Method هایی است. شما می توانید برای $scope تعدادی Property تعریف کنید و یا حتی در درون یک Controller Function برای آن یک تابع و یا یک مقدار در نظر بگیرید.

حتی می توان $scope را به عنوان یک پل ارتباطی بین Controller و View که همان فایل HTML است دانست. در این تعریف وظیفه $scope انتقال داده ها از Controller به View و از View به Controller خواهد بود. تصویر زیر این موضوع را نشان می دهد.

همان طور که در درس قبل که در رابطه با Controller ها در برنامه های AngularJS بود صحبت شد ما می توانیم Property ها و Method هایی را به  $scope در درون یک Controller Function اضافه کنیم. پس از این View می تواند به راحتی با استفاده از روش های مختلف داده های درون $scope را نشان بدهد. این روش ها شامل استفاده از یک Expression و یا استفاده از Directive هایی شبیه ng-Model و ng-bind خواهد بود. لطفا به کد زیر نگاه کنید.

<!DOCTYPE html>
<html >
<head>
    <title>AngualrJS $scope object</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myNgApp">
    <div ng-controller="myController">
        Message: <br />
        {{message}}<br />
        <span ng-bind="message"></span> <br />
        <input type="text" ng-model="message" /> 
    </div>
    <script>
        var ngApp = angular.module('myNgApp', []);

        ngApp.controller('myController', function ($scope) {
            $scope.message = "Hello World!";        
        });
    </script>
</body>
</html>

در AngularJS یک شی $scope متفاوت به ازای هر Controller در یک اپلیکیشن ساخته شده و به درون آن Controller تزریق می شود. در رابطه با تزریق وابستگی و یا Dependency Injection توصیه می کنیم که از بسته ی آموزش ویدئویی Inversion of Control و IoC Container ها استفاده کنید. بدین ترتیب داده های مربوط به یک $scope در درون یک Controller نمی توانند از درون یک Controller دیگر مورد دسترسی قرار بگیرند. اگر Controller های تو در تو و یا اصطلاحاً Nested تعریف کنید، Controller های درونی و یا اصطلاحاً Child Controller ها می توانند $scope مربوط به Controller  های پدر و یا اصطلاحاً Parent Controller را ارث بری کنند و به آن دسترسی پیدا کنند.

بدین ترتیب در درون یک Child Controller دسترسی به Property های مربوط به $scope یک Parent Controller وجود دارد. اما از درون یک Parent Controller، طبیعتاً Property های درون $scope مربوط به یک Child Controller قابل دسترسی نیستند.

موضوع مهمی که د رابطه با نقش $scope به عنوان انتقال دهنده داده ها بین یک Controller و View باید بدانید این است که از ng-Model به عنوان یک Directive برای Data Binding های دو طرفه استفاده می شود. به عبارتی داده از Controller به View و سپس از View به Controller قابل انتقال هستند. در حالی که استفاده از یک Expression و یا ng-bind به عنوان یک Directive دیگر، داده ها را می تواند فقط از یک Controller به View منتقل کند و امکان انتقال داده ها از View به Controller در این روش وجود ندارد.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

بررسی $rootScope

در یک برنامه AngularJS یک $rootScope تک به عنوان یک Object تعریف می شود و تمامی $scope ها به عنوان Child Object های مربوط به آن نقش ایفا می کنند. Property ها و Method هایی که در درون $rootScope تعریف می شوند، قابل دسترسی برای تمامی Controller ها خواهند بود.

مثالی که در قسمت زیر مشاهده می فرمایید کاربرد استفاده از $rootScope و $scope را به عنوان دو Object به شما نشان می دهد.

<!DOCTYPE html>
<html>
<head>
    <title>AngualrJS Controller</title>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myNgApp">
    <div ng-controller="parentController">
        Controller Name: {{controllerName}} <br />
        Message: {{message}} <br />
        <div style="margin:10px 0 10px 20px;" ng-controller="childController">
            Controller Name: {{controllerName}} <br />
            Message: {{message}} <br />
        </div>
    </div>
    <div  ng-controller="siblingController">
        Controller Name: {{controllerName}} <br />
        Message: {{message}} <br />
    </div>
    <script>
        var ngApp = angular.module('myNgApp', []);

        ngApp.controller('parentController', function ($scope, $rootScope) {
            $scope.controllerName = "parentController";
            $rootScope.message = "Hello World!";
        });

        ngApp.controller('childController', function ($scope) {
            $scope.controllerName = "childController";
        });

        ngApp.controller('siblingController', function ($scope) {

        });
    </script>
</body>
</html>

خروجی این مثال شبیه به تصویر زیر خواهد بود.

همان طور که در مثال بالا نیز مشاهده کردید، Property های اضافه شده در $rootScope قابل دسترس برای تمام Controller ها می باشند. علاوه بر این $rootScope حاوی Method های متعددی است که در جدول زیر لیست مهم ترین آن ها را برای شما قرارداده ایم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

بررسی $watch

در درون یک برنامه AngularJS به طور خیلی ساده $watch یک رویداد و یا Event است که در درون $scope تعریف شده و زمانی که یک Model Property تغییر می کند، این رویداد و یا Event اصطلاحاً Raise می شود. کدی که در قسمت زیر مشاهده می کنید این موضوع را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myNgApp">
    <div ng-controller="myController">
        Enter Message: <input type="text" ng-model="message" /> <br />
        New Message: {{newMessage}} <br />
        Old Message: {{oldMessage}} 
    </div>
    <script>
        var ngApp = angular.module('myNgApp', []);
    
        ngApp.controller('myController', function ($scope) {
            $scope.message = "Hello World!";

            $scope.$watch('message', function (newValue, oldValue) {
                $scope.newMessage = newValue;
                $scope.oldMessage = oldValue;
            });
        });
    </script>
</body>
</html>

همان طور که در کد بالا دیدید زمانی که یک Property به نام message تغییر می کند، $watch به عنوان یک Event اصطلاحاً Raise می شود. این کار با Register کردن یک Callback تنظیم شده است.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

این Callback زمانی که Model Property مورد نظر که message نام دارد، تغییر می کند، اقدام به اجرا شدن خواهد کرد.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک Angular استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل برنامه نویسی تحت وب با Angular مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت