درک کنترلر ها در AngularJS

شنبه 23 آبان 1394

در این مقاله درباره کنترلر ها در AngularJS صحبت میکنیم . کنترلر ها در AngularJS یک تابع سازنده جاوا اسکریپت است.کنترل کننده ها در AngularJS چیزی جز جاوا اسکریپت سازنده نیست که از Angular scope استفاده میکنند.

درک کنترلر ها در AngularJS

در این مقاله درباره کنترلر ها در AngularJS صحبت میکنیم . کنترلر ها در AngularJS یک تابع سازنده جاوا اسکریپت است.

کنترل کننده ها در AngularJS چیزی جز جاوا اسکریپت سازنده نیست که از Angular scope استفاده میکنند.

همچنین داده های برنامه را کنترل میکند. تابع کنترلر با شی dom متصل شده است.  دستور ng-controller به تعریف کنترلر کمک میکند. زمانی که دستور ng-controller توسط نرم افزار در AngularJS پیدا میشود از ان یک شی کنترلر جدید و یک فرزند Scope ($scope) ایجاد میکند و ان را به عنوان یک پارامتر می سازد. کنترلر قلب AngularJS و به طور عمده شامل منطق کسب و کار است.

ما میتوانیم کنترلر را به 2 روش تعریف کنیم.

تعریف کنترلر به عنوان ماژول نرم افزار

به طور معمول توسعه angular با استفاده از این روش است. در این روش برنامه angular تعریف شده و کنترلر به ان اضافه شده  است .

angular.module("myapp", [])  
.controller("appController", function($scope) {  
   // definition of controller  
} );

تعریف کنترلر به عنوان تابع جاوا اسکریپت

ما همچنین میتوانیم کنترلر را به عنوان تابع جاوا اسکریپت تعریف کنیم ما همچنین میتوانیم وابستگی (dependency)  را  تزریق کنیم.

function controllerAsFunction($scope){  
   $scope.myName = "Tejas Trivedi";  
}  

برای مثال

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>Understanding Controllers and Services In AngularJS</title>  
    <script src="angular.js"></script>  
</head>  
  
<body ng-app="myapp">  
    <h4>Controller Example</h4>  
    <br/>  
    <br/>  
    <div>1) Application.controller</div>  
    <div ng-controller="appController">  
        <div> My Name (app.contrller): {{myName}} </div>  
    </div>  
    <br/>  
    <br/>  
    <div>2) Controller as function</div>  
    <div ng-controller="controllerAsFunction">  
        <div> My Name (controller as function): {{myName}} </div>  
    </div>  
  
    <script>  
        angular.module("myapp", [])  
            .controller("appController", function($scope) {  
                $scope.myName = "Jignesh Trivedi";  
            });  
  
        function controllerAsFunction($scope) {  
            $scope.myName = "Tejas Trivedi";  
        }  
    </script>  
</body>  
  
</html>  

همانطور که قبلا شرح داده شد دستور ng-controller همیشه  یک فرزند scope ایجاد میکند به طوری که ما میتوانیم یک سلسله مراتب از scopeها داشته باشیم  که از یکدیگر ارث بری میکنند .

<!DOCTYPE html>  
<html>  
<head>  
    <title>Understanding Controllers and Services In AngularJS</title>  
    <script src="angular.js"></script>  
</head>  
<body ng-app="myapp">  
    <h4>Scope Inheritance Example</h4>  
    <div>  
        <div ng-controller="ParentController" style="border: solid 2px red; padding: 15px;">  
            <div> Hi, My name is {{name}} </div>  
  
            <div ng-controller="firstChildController" style="border: solid 2px red; padding: 15px;">  
                <div> Hi, My name is {{name}} </div>  
  
                <div ng-controller="secondChildController" style="border: solid 2px red; padding: 15px;">  
                    <div> Hi, My name is {{name}} </div>  
                </div>  
            </div>  
        </div>  
    </div>  
  
    <script>  
        var app = angular.module("myapp", []);  
        app.controller("ParentController", function ($scope) {  
            $scope.name = "Jignesh Trivedi";  
        });  
  
        app.controller("firstChildController", function ($scope) {  
            $scope.name = "Tejas Trivedi";  
        });  
        app.controller("secondChildController", function ($scope) {  
            $scope.name = "Rakesh Trivedi";  
        });  
    </script>  
</body>  
</html>  

در مثال قبل ما 3 دستور ng-controller در قالب تو در تو ایجاد کردیم.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Understanding Controllers and Services In AngularJS</title>  
    <script src="angular.js"></script>  
</head>  
<body ng-app="myapp">  
    <h4>Controller Alias Example</h4>  
    <div>  
        <div ng-controller="TestController as t1">  
            <div> Hi, My name is {{t1.name}} </div>  
        </div>  
    </div>  
    <script>  
        var app = angular.module("myapp", []);  
        app.controller("TestController", function () {  
            this.name = "Jignesh Trivedi";  
        });  
    </script>  
</body>  
</html>  

کنترل کننده ها می توانند داشته باشند  توابع و متدهایی که به طور مستقیم یا غیر مستقیم توسط view فراخوانی میشوند.

<!DOCTYPE html>  

<html>  

<head>  

    <title>Understanding Controllers and Services In AngularJS</title>  

    <script src="angular.js"></script>  

</head>  

<body ng-app="myapp">  

    <h4>Function / Method Example</h4>  

    <div>  

        <div ng-controller="TestController">  

            <div> <button ng-click="clickMe()">Click me</button> </div>  

        </div>  

    </div>  

    <script>  

        var app = angular.module("myapp", []);  

        app.controller("TestController", function ($scope) {  

            $scope.clickMe = function () {  

                alert('Hi, Jignesh!!');  

            };  

        });  

    </script>  

</body>  

</html>  

آموزش angular

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید