آموزش AngularJS قسمت چهارم کار با Controller ها در AngularJS
0 0

آموزش AngularJS قسمت چهارم کار با Controller ها در AngularJS


آموزش AngularJS قسمت چهارم کار با Controller ها در AngularJS

در قسمت قبلی نحوه استفاده از Directive ها در AngularJs توضیح دادیم. در این قسمت به مبحث Controller ها در AngularJs می پردازیم.

کنترلر ها در AngularJS

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

دایرکتیو ng-controller

این دایرکتو بیانگر یک کنترلر است و یک نام تابع جاوا اسکریپت را به عنوان ورودی دریافت می کند. و این تابع جاوا اسکریپت به محض لود شدن صفحه اجرا می شود.

$scope

با استفاده از $scope می توانیم به متغیرهای که توسط AngularJS تعریف شده دسترسی پیدا کرد.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">

        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{firstName + " " + lastName}}

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        });
    </script>
</body>
</html>

در مثال زیر که همانند مثال قبلی است با این تفاوت که یک تابع نوشتم که fullName را بر می گرداند.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="personCtrl">

        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{fullName()}}

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function ($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
            $scope.fullName = function () {
                return $scope.firstName + " " + $scope.lastName;
            }
        });
    </script>
</body>
</html>

در مثال زیر که همانند مثل قبلی با این تفاوت که به جای تعریف تابع، یک متغیر به نام fullName تعریف کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="personCtrl">

        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{fullName}}

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function ($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
            $scope.fullName =$scope.firstName + " " + $scope.lastName;
            
        });
    </script>
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب AngularJS
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۶ مرداد ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم