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


ﺳﻪشنبه 29 آبان
MVC

کنترلر در AngularJs

ﺳﻪشنبه, 08 آبان 1397

تعریف کنترلر در AngularJs :

کنترلر عبارتند است از قسمتی که وظیفه کنترل کردن داده های برنامه را بر عهده دارد. هر برنامه ی AngularJs می تواند چندین کنترلر داشته باشد.

آموزش خود را با انجام دادن یک مثال کاربردی انجام می دهیم تا درک این موضوع قابل فهم تر باشد.

در ابتدا مسئله خود را طرح می کنم

می خواهیم دو عدد تکست باکس در صفحه گذاشته و یک دکمه با عنوان افزودن.

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

 در ابتدا مقدمات کار را برای شروع کار فراهم می کنیم.

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyCtrl">

</div>
<script>
var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope',function($scope) {
  alert(1);
}]);
</script>
</body>
</html>

با بررسی کلی این قطعه کد می بینید که در ابتدا اپلیکیشن خود را تعریف کرده ام. و بعد کنترلر را به اپلیکیشن معرفی کرده ام.اگر توجه کنید در درون این کنترلر یک alert گذاشته ام.این کار برای این است که وقتی که قطعه کد را با پسوند html ذخبره و اجرا کردم .در صورتی که پیغام هشدار را ندیدم یعنی یک مشکلی در برنامه وجود دارد .

 

در ادامه دو input  و یک  button  در صفحه گذاشته و به کمک ng-repeat یک جدول برای نمایش اطلاعات به وجود می اوریم.قطعه کد زیر مرحله ی بعدی ما را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<style>
       table, th , td  {
         border: 1px solid grey;
         border-collapse: collapse;
         padding: 5px;
       }
       table tr:nth-child(odd) {
         background-color: #f1f1f1;
       }
       table tr:nth-child(even) {
         background-color: #ffffff;
       }
    </style>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyCtrl">
<span>Name </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" ng-model="Name" />
<br /><br />
<span>Family </span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" ng-model="Family" />
<button type="button" ng-click="Save()">Save</button>
<br />
<br />

<hr />
<br />
<table>
  <tr>
    <td>#</td>
    <td>Name</td>
    <td>Family</td>
  </tr>
  <tr ng-repeat="item in NameList">
    <td>{{ $index + 1 }}</td>
    <td>{{ item.Name }}</td>
    <td>{{ item.Family }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope',function($scope) {
   $scope.NameList = [];
   
   $scope.Save = function(){
   	$scope.NameList.push({Name : $scope.Name , Family : $scope.Family});
	$scope.Name = "";
	$scope.Family = "";
   }
}]);
</script>
</body>
</html>

در توضیح قطعه کد بالا  اینکه در قسمت html  دو ورودی و یک دکمه گذاشته ایم.

و یک فهرست نفرات ذخیره شده در پایین آن.

و در قسمت کنترلر یک لیست که با نام انتخابی برای ساخت جدول یکی می باشد در نظر می گیریم .

و برای رویداد ng-click تابع آن را می نویسیم.

که مقادیر ورودی ها را گرفته و در لیست ذخیره کند. و در آخر مقدار ورودی ها را  خالی می کنیم.

منتظر نکته نظر های شما عزیزان هستم.

قطعه کد را در گیت هاب می توانید از  این لینک دریافت کنید.

 



نظرات

Drag to order
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

علیعلی

ممنون از مطالب خوبتون.