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

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

در این مقاله درباره کنترلر ها در 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

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

4087_AngularController and service.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

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

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

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

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید