გადმოწერა


1. რა არის AngularJS ?
AngularJS არის JavaScript-ის ფრეიმვორკი ანუ JavaScript-ში დაწერული ბიბლიოთეკა, მისი ჩართვა HTML გვერდზე შესაძლებელია <script> ტეგით. ფრეიმვორკი HTML-ს ამდიდრებს მეტი ატრიბუტებით, იგი შესანიშნავი ხელსაწყოა ერთგვერდიან აპლიკაციებთან სამუშაოდ (SPA - Single Page Applications). მანამ სანამ Angular-ის შესწავლას დავიწყებთ, საბაზისო დონეზე მაინც უნდა ვიცოდეთ HTML, CSS და JavaScript.

2009 წელს Google-ს თანამშრომელმა Miško Hevery-მ დაიწყო AngularJS-ზე მუშაობა, 2012 წელს კი მოხდა ბიბლიოთეკის 1.0 ვერსიის რეალიზება.

AngularJS-ის გავრცელება ხდება JavaScript ფაილის სახით, საკმარისია შემდეგი ტეგი დავამატოთ ჩვენს HTML დოკუმენტში <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> AngularJS ახდენს HTML-ის განვრცობას დირექტივების, ინსტრუქციების საშუალებით, (ng-directive). ng-app დირექტივა განსაზღვრავს AngularJS აპლიკაციას, ng-model დირექტივა HTML ელემენტების (input, select, textarea) მნიშვნელობებს აკავშირებს აპლიკაციასთან, ng-bind დირექტივა კი აპლიკაციის მონაცემებს აკავშირებს უშუალოდ HTML დოკუმენტთან. <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
   <p>email: <input type="text" ng-model="email"></p>
   <p ng-bind="email"></p>
</div>

</body>
</html>
ავხსნათ ეს სკრიპტი:

AngularJS მუშაობას იწყებს ავტომატურად როდესაც გვერდი ჩაიტვირთება.

ng-app დირექტივა AngularJS-ს ეუბნება რომ <div> ელემენტი არის AngularJS აპლიკაციის "მფლობელი".

ng-model დირექტივა input ელემენტის მნიშვნელობას აკავშირებს აპლიკაციის ცვლადთან (email).

ng-bind დირექტივა კი <p> ელემენტის შიგთავსს ანუ innerHTM-ს აკავშირებს აპლიკაციის ცვლად email-თან. ამ ყველაფრის შედეგი იქნება

email:

როგორც ვხედავთ AngularJS დირექტივა არის ჩვეულებრივი HTML ატრიბუტი წინსართით - ng.

ng-init დირექტივა ახდენს ცვლადთა ინიციალიზაციას <div data-ng-app="" ng-init="firstName='John'">
   <p>The name is <span ng-bind="firstName"></span></p>
</div>
"ng-"-ის ნაცვლად შეგვიძლია გამოვიყენოთ "data-ng-", თუ გვსურს რომ გვერდი იყოს კორექტული HTML სინტაქსის თვალსაზრისით.
2. Angular გამოსახულება
HTML ელემენტებში მონაცემთა ჩასმა ხდება AngularJS გამოსახულებების საშუალებით. გამოსახულება უნდა ჩაიწეროს ორმაგ ფიგურულ ბრჭყალებში {{ expression } }, გამოსახულება შესაძლებელია ჩაიწეროს დირექტივაშიც ng-bind="expression". გამოსახულება შეიძლება შეიცავდეს ლიტერალებს, ცვლადებს და ოპერატორებს, მაგ: {{ 5 + 5 } } ან {{ firstName + " " + lastName } }. <div ng-app="">
  <p>ჩემი პირველი გამოსახულება: {{ 5 + 5 } }</p>
</div>
შედეგი იქნება

ჩემი პირველი გამოსახულება: {{ 5 + 5 }}

გამოსახულების დაწერა შეგვიძლია ნებისმიერ ადგილას სადაც მოვისურვებთ, AngularJS გამოთვლის მას და დააბრუნებს შედეგს, მაგალითისათვის input ელემენტის CSS თვისებები შევცვალოთ გამოსახულების საშუალებით <div ng-init="myCol='lightblue'">
  <input style="background-color:{{myCol} }" ng-model="myCol" value="{{myCol} }">
</div>
შედეგი იქნება

AngularJS რიცხვები

<div ng-app="" ng-init="quantity=1;cost=5">
  <p>Total in dollar: {{ quantity * cost } }</p>
</div>
შედეგი

Total in dollar: {{ quantity * cost }}

იგივე მაგალითი ng-bind დირექტივის გამოყენებით <div ng-app="" ng-init="quantity=1;cost=5">
  <p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>

AngularJS სტრიქონები

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
  <p>The name is {{ firstName + " " + lastName } }</p>
</div>
შედეგი

The name is {{ firstName + " " + lastName }}

იგივე მაგალითი ng-bind დირექტივის გამოყენებით <div ng-app="" ng-init="quantity=1;cost=5">
  <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

AngularJS ობიექტები

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  <p>The name is {{ person.lastName } }</p>
</div>
შედეგი

The name is {{ person.lastName }}

იგივე მაგალითი ng-bind დირექტივის გამოყენებით <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
  <p>The name is <span ng-bind="person.lastName"></span></p>
</div>

AngularJS მასივები

<div ng-app="" ng-init="points=[1,15,19,2,40]">
  <p>The third result is {{ points[2] } }</p>
</div>
შედეგი

The third result is {{ points[2] }}

იგივე მაგალითი ng-bind დირექტივის გამოყენებით <div ng-app="" ng-init="points=[1,15,19,2,40]">
  <p>The third result is <span ng-bind="points[2]"></span></p>
</div>

AngularJS გამოსახულებები vs JavaScript გამოსახულებები

JavaScript გამოსახულებების მსგავსად AngularJS გამოსახულებებიც შეიძლება შეიცავდნენ ლიტერალებს, ოპერატორებს და ცვლადებს.

JavaScript გამოსახულებებისაგან განსხვავებით AngularJS გამოსახულებები შეიძლება ჩაიწეროს HTML-ში.

AngularJS გამოსახულებები არ შეიძლება შეიცავდნენ ციკლებს და გამონაკლისებს (try..catch).
3. Angular მოდული
მოდული არის კონტეინერი, განყოფილება აპლიკაციის სხვადასხვა ნაწილებისათვის, მასში მოთავსებულია კონტროლერები, კონტროლერი ყოველთვის ეკუთვნის რომელიმე მოდულს. მოდულის შექმნა ხდება AngularJS ფუნქციით - angular.module. <div ng-app="myApp">...</div>
<script>
  var app = angular.module("myApp", []);
</script>
"myApp" პარამეტრი განსაზღვრავს თუ აპლიკაციის რომელ ნაწილშია აღწერილი <div> ელემენტის შესაბამისი ქმედებები, კონტროლერები და ფუქციები. აპლიკაციას დავამატოთ კონტროლერი <div ng-app="myApp" ng-controller="myCtrl">
  {{ firstName + " " + lastName } }
</div>

<script>

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

  app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
  });

</script>
კონტროლერებზე ვისაუბრებთ ოდნავ მოგვიანებით
4. Angular დირექტივები
AngularJS საშუალებას გვაძლევს გავამდიდროთ HTML ახალი ატრიბუტებით ანუ დირექტივებით. AngularJS-ს აქვს ჩაშენებული დირექტივების ნაკრები რომელიც გვთავაზობს მრავალფეროვან ფუნქციონალიტეტს ჩვენი აპლიკაციისათვის, აგრეთვე შესაძლებელია ჩვენი საკუთარი დირექტივების შექმნა.

<div ng-app="" ng-init="firstName='John'">

  <p>Name: <input type="text" ng-model="firstName">

  <p>You wrote: {{ firstName } }</p>

</div>
შედეგი

Name:

You wrote: {{ firstName }}

მონაცემთა დაკავშირება, მიმაგრება

ზედა მაგალითში მოყვანილი გამოსახულება {{ firstName } } არის AngularJS მონაცემის დამაკავშირებელი გამოსახულება. {{ firstName } } დაკავშირებულია ng-model="firstName" - თან.

ng-repeat დირექტივა

ng-repeat დირექტივის მეშვეობით ხდება HTML ელემენტების გამეორება. <div ng-init="names=['Jani','Hege','Kai']">
  <ul>
   <li ng-repeat="x in names">
    {{ x } }
   </li>
  </ul>
</div>
შედეგი იქნება
  • {{ x }}
ng-repeat დირექტივა კოლექციის თითოეული ელემენტისათვის ქმნის ახალ HTML ელემენტს, ამ შემთხვევაში </li> ელემენტს, კოლექციაში კი იგულისხმება "names" მასივი.

ng-app დირექტივა

ng-app დირექტივა განსაზღვრავს AngularJS აპლიკაციის ძირ ელემენტს. თუ ამ დირექტივას მივუთითებთ რომელიმე <div> ელემენტს, მაშინ AngularJS-ით მართვადი გახდება ყველა მისი შვილობილი ელემენტი და თავად ისიც, მის გარეთ კი AngularJS-ს ვერ გამოვიყენებთ.

ng-bind დირექტივა

ng-bind - HTML ელემენტის ტექსტს ავტომატურად ანიჭებს გადაცემულ მნიშვნელობას.

ng-model დირექტივა

ng-model დირექტივა ng-bind დირექტივის ანალოგიურია, იმ განსხვავებით, რომ ელემენტსა და მოდელის მნიშვნელობებს შორის მყარდება ორმხრივი კავშირი-შესაბამისობა.

ng-show და ng-hide დირექტივები

ამ დირექტივებს ლოგიკურ გამოსახულებაზე დაყრდნობით ეკრანზე გამოჰყავთ ელემენტი ან მალავენ მას. <div ng-app="">

   <p ng-show="true">ხილვადი.</p>

   <p ng-show="false">უხილავი.</p>

</div>

ng-switch დირექტივა

მოქმედებს დაპროგრამებაში კარგად ცნობილი switch გადამრთველის ანალოგიურად;

ng-click დირექტივა

ng-click დირექტივა AngularJS-ს ეუბნება თუ რა უნდა მოხდეს როდესაც HTML ელემენტს დააწვებიან მაუსით <element ng-click="expression"></element> მაგალითისათვის ელემენტზე მაუსის დაჭერისას გამოვიძახოთ რაიმე ფუნქცია <div ng-controller="myCtrl">
   <button ng-click="myFunc()">OK</button>
   <p>ღილაკს მაუსი დაეჭირა {{count} } - ჯერ.</p>
</div>

<script>
   angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope) {
     $scope.count = 0;
     $scope.myFunc = function() {
       $scope.count++;
     };
   }]);
</script>

ng-if დირექტივა

ng-if დირექტივა შლის HTML ელემენტს თუ განსაზღვრული პირობა არის მცდარი. ng-if განსხვავდება ng-hide დირექტივისაგან, რომელიც უბრალოდ მალავს ელემენტს, ng-if დირექტივა კი საერთოდ შლის მას DOM-იდან. გამოჩნდეს HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
   <h1>Welcome</h1>
   <p>Welcome to my home.</p>
   <hr>
</div>
შედეგი იქნება გამოჩნდეს HTML:

Welcome

Welcome to my home.


ng-disabled დირექტივა

ng-disabled დირექტივა აკავშირებს AngularJS აპლიკაციის მონაცემებს HTML ელემენტის disabled ატრიბუტთან. <div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
{{ mySwitch } }
</p>
</div>
შედეგი იქნება

Button

{{ mySwitch }}

განვმარტოთ ეს კოდი:

ng-disabled დირექტივა აპლიკაციის მონაცემ mySwitch-ს აკავშირებს HTML button ელემენტის disabled ატრიბუტთან.

ng-model დირექტივა HTML checkbox ელემენტის მნიშვნელობას აკავშირებს mySwitch ცვლადთან.

თუ mySwitch ცვლადის მნიშვნელობა არის true, მაშინ ღილაკი ხელმისაწვდომია
5. Angular მონაცემთა დაკავშირება
AngularJS აპლიკაციებს, როგორც წესი, აქვთ ინფორმაციის მოდელები, ინფორმაციის მოდელი არის ინფორმაციის ნაკრები, რომელიც ხელმისაწვდომია აპლიკაციისათვის var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.lastname = "Doe";
});

HTML წარმოდგენა

HTML კონტეინერს სადაც მოთავსებულია AngularJS აპლიკაცია, ეწოდება წარმოდგენა, პრეზენტაცია (View). პრეზენტაციას წვდომა აქვს ინფორმაციის მოდელთან. არსებობს პრეზენტაციაში მონაცემთა მოდელიდან ამოღებული ინფორმაციის გამოჩენის რამოდენიმე ვარიანტი. შეგვიძლია გამოვიყენოთ ng-bind დირექტივა, HTML ელემენტის ტექსტს ავტომატურად ანიჭებს გადაცემულ მნიშვნელობას <p ng-bind="firstname"></p> შეგვიძლია გამოვიყენოთ აგრეთვე ორმაგი ფიგურული ფრჩხილები <p>First name: {{firstname} }</p> აგრეთვე შესაძლებელია ng-model დირექტივის გამოყენებაც, რომელიც რომ ელემენტსა და მოდელის მნიშვნელობებს შორის ამყარებს ორმხრივ კავშირ-შესაბამისობას. <input ng-model="firstname">

ორმხრივი კავშირ-შესაბამისობა

როდესაც მოდელში იცვლება ინფორმაცია, HTML წარმოდგენაც იცვლება და პირიქით. ეს ხდება დაუყოვნებლივ, ავტომატურად, რაც გარანტიაა იმისა რომ მოდელი და ხედი ერთდროულად განიცდიან განახლებას. <div ng-app="myApp" ng-controller="myCtrl">
   Name: <input ng-model="firstname">
   <h1>{{firstname} }</h1>
</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
     $scope.firstname = "John";
     $scope.lastname = "Doe";
   });
</script>
6. Angular კონტროლერი
კონტროლერი ორმხრივ კავშირს ამყარებს წარმოდგენასა და მოდელს შორის - ცვლილებები ერთ მათგანში აისახება მეორეშიც. ამრიგად, კონტროლერი წარმოდგენასა და მოდელს შორის შუამავალია - იგი იღებს მოთხოვნას მომხმარებლისაგან, აანალიზებს მას და შემდგომი დამუშავებისათვის გადასცემს სისტემის შესაბამის რგოლს, რითაც ხორციელება ერთმანეთისაგან განცალკევებული ბიზნესლოგიკისა და წარმოდგენის (პრეზენტაციის) ლოგიკის შეთანხმებული მუშაობა. <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>
ავხსნათ კოდი : AngularJS აპლიკაცია განისაზღვრა ng-app="myApp" დირექტივით. ანუ აპლიკაცია გაეშვება <div> ელემენტში.

ng-controller="myCtrl" ატრიბუტი არის AngularJS დირექტივა. მან განსაზღვრა კონტროლერი.

myCtrl არის ჩვეულებრივი JavaScript ფუნქცია.

AngularJS გამოიძახებს კონტროლერს $scope ობიექტის მეშვეობით.

AngularJS-ში, $scope არის აპლიკაციის ობიექტი (მასშია მოთავსებული აპლიკაციის ცვლადები და ფუნქციები, ანუ ობიექტების ენაზე მეთოდები და თვისებები).

კონტროლერი აკეთებს ორ თვისებას (ცვლადს) $scope ობიექტში (firstName და lastName).

ng-model დირექტივა აკავშირებს input ელემენტს კონტროლერის ცვლადებთან, თვისებებთან (firstName და lastName).

ზემოთ მოყვანილ მაგალითში კონტროლერის ობიექტს ქონდა ორი თვისება lastName და firstName. კონტროლერს შეიძლება გააჩნდეს მეთოდებიც <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>
ამ შემთხვევაში პრეზენტაციაში შედეგს დავაბრუნებდით ასე: {{fullName()} } დიდ აპლიკაციებში, როგორც წესი, კონტროლერები მოთავსებულია ცალკე ფაილებში, ჩვენი მაგალითისათვის უბრალოდ დავაკოპიროთ <script> ტეგში მოქცეული ინსტრუქციები და შევინახოთ ცალკე ფაილში ვთქვათ სახელად personController.js: <script src="personController.js"></script>
7. Angular $scope
ინგლ: Scope - თვალსაწიერი, თვალთახედვა.

მართლაც - $scope განიხილება DOM-ში არსებულ მონაცემთა და JavaScript-ის სცენარს შორის გადებულ ავტომატურ ხიდად. იგი არის HTML წარმოდგენისა და JavaScript სცენარის (controller) დამაკავშირებელი ობიექტი, რომლის მეთოდები და თვისებებიც ხელმისაწვდომია როგორც წარმოდგენიდან ასევე კონტროლერიდან. როდესაც ვქმნით AngularJS კონტროლერს, $scope-ს ვუთითებთ აm კონტროლერის ანუ ფუნქციის არგუმენტად app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
როდესაც $scope ობიექტს ვამატებთ თვისებებს, ეს თვისებები ავტომატურად ხელმისაწვდომი ხდება წარმოდგენაშიც, უბრალოდ უნდა შევქმნათ თვისებასთან დამაკავშირებელი ჩანაწერი, მაგ: {{carname} }.

თუ AngularJS აპლიკაციას განვიხილავთ როგორც სისტემას რომელიც შედგება შემდეგი ნაწილებისაგან
  • წარმოდგენა ანუ HTML.
  • მოდელი ანუ მიმდინარე წარმოდგენისათვის ხელმისაწვდომი მონაცემების ნაკრები
  • კონტროოლერი ანუ JavaScript ფუნქცია რომელიც ქმნის/ცვლის/შლის/აკონტროლებს ინფორმაციას.
მაშინ შეიძლება ვთქვათ რომ $scope არის მოდელი.
8. Angular ფილტრები
AngularJS ფილტრები გამოიყენება მონაცემთა ფორმატირებისათვის.
  • currency - რიცხვის გადაყვანა ვალუტის ფორმატში.
  • date - თარიღის გადაყვანა განსაზღვრულ ფორმატში.
  • filter - მასივიდან ქვესიმრავლის ამორჩევა.
  • json - ობიექტის დაფორმატება JSON სტრიქონად.
  • limitTo - Limits an array/string, into a specified number of elements/characters.
  • lowercase - სტრიქონის ჩაწერა პატარა ასოებით.
  • number - რიცხვის დაფორმატება სტრიქონად.
  • orderBy - მასივის დალაგება ინსტრუქციის მიხედვით.
  • uppercase - სტრიქონის ჩაწერა დიდი ასოებით.
გამოსახულებებში ფილტრების დამატება შესაძლებელია "|" სიმბოლოს გამოყენებით. <div ng-app="" ng-init="city='tbilisi'">
  <p>{{ city | uppercase } }</p>
</div>
შედეგი

{{ city | uppercase }}

ანალოგიურად მუშაობს lowercase ფილტრი.

დავამატოთ ფილტრი დირექტივაში <div ng-app="myApp" ng-controller="namesCtrl">

   <ul>
     <li ng-repeat="x in names | orderBy:'country'">
       {{ x.name + ', ' + x.country } }
     </li>
   </ul>

</div>

<script>
   angular.module('myApp', []).controller('namesCtrl', function($scope) {
     $scope.names = [
       {name:'Jani',country:'Norway'},
       {name:'Carl',country:'Sweden'},
       {name:'Margareth',country:'England'},
       {name:'Hege',country:'Norway'},
       {name:'Joe',country:'Denmark'},
       {name:'Gustav',country:'Sweden'},
       {name:'Birgit',country:'Denmark'},
       {name:'Mary',country:'England'},
       {name:'Kai',country:'Norway'}
     ];
   });
</script>

currency ფილტრი

<div ng-app="" ng-init="number='50'">
  <p>{{ number| currency } }</p>
</div>
შედეგი

{{ number | currency }}

filter ფილტრი

filter ფილტრის გამოყენება შესაძლებელია მხოლოდ მასივებთან მუშაობისას, ფილტრი აბრუნებს ძირითადი მასივის შემცველ ახალ მასივს რომელიც შეიცავს ძირითადი მასივის მხოლოდ იმ ელემენტებს რომლებიც აკმაყოფილებენ განსაზღვრულ მითითებებს. მაგალითად შემდეგი კოდი მასივიდან ამოარჩევს მხოლოდ იმ ელემენტებს, რომლებიც შეიცავენ "i" ასოს <div ng-app="myApp" ng-controller="namesCtrl">

   <ul>
     <li ng-repeat="x in names | filter : 'i'">
       {{ x } }
     </li>
   </ul>

</div>

<script>
   angular.module('myApp', []).controller('namesCtrl', function($scope) {
     $scope.names = [
       'Jani',
       'Carl',
       'Margareth',
       'Hege',
       'Joe',
       'Gustav',
       'Birgit',
       'Mary',
       'Kai'
     ];
   });
</script>
input ელემენტზე ng-model დირექტივის მითითებით შესაძლებელია ამ ელემენტის მნიშვნელობების ფილტრად გამოყენება <div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

   <ul>
     <li ng-repeat="x in names | filter:test">
       {{ x }}
     </li>
   </ul>

</div>

<script>
   angular.module('myApp', []).controller('namesCtrl', function($scope) {
     $scope.names = [
       'Jani',
       'Carl',
       'Margareth',
       'Hege',
       'Joe',
       'Gustav',
       'Birgit',
       'Mary',
       'Kai'
     ];
   });
</script>
9. Angular სერვისები
AngularJS-ში სერვისი არის ფუნქცია ან ობიექტი, რომელიც ხელმისაწვდომია AngularJS აპლიკაციაში. AngularJS-ს აქვს 30-მდე ჩაშენებული სერვისი. ერთ-ერთი მათგანი არის $location. $location სერვისს აქვს მეთოდები რომლებიც აბრუნებენ ინფორმაციას მიმდინარე გვერდის შესახებ <div ng-app="myApp" ng-controller="myCtrl">
   <p>მიმდინარე გვერდის URL არის:</p>
   <h3>{{myUrl} }</h3>
</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope, $location) {
     $scope.myUrl = $location.absUrl();
   });
</script>
შევნიშნოთ რომ $location სერვისი გადაცემულია როგორც კონტროლერის არგუმენტი. იმისათვის რათა კონტროლერში გამოვიყენოთ სერვისი, ეს უკანასკნელი უნდა აღიწეროს როგორც ერთგვარი დამოკიდებულება.

$http სერვისი

ერთ-ერთი ყველაზე ხშირად გამოყენებადი სერვისი არის $http სერვისი, იგი აგზავნის მოთხოვნას სერვერზე და აპლიკაციას აწვდისიქიდან მიღებულ პასუხს. <div ng-app="myApp" ng-controller="myCtrl">

   <h1>{{myWelcome} }</h1>

</div>

<p>$http სერვისი მიმართავს სერვერზე არსებულ ფაილს, პასუხი კი ინახება "myWelcome" ცვლადში</p>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope, $http) {
     $http.get("welcome.htm").then(function (response) {
       $scope.myWelcome = response.data;
     });
   });
</script>

$timeout სერვისი

$timeout სერვისი არის Javascript window.setTimeout ფუნქციის AngularJS-ისეული ვერსია. მაგალითისათვის გამოვიტანოთ ახალი შეტყობინება 2 წამში <div ng-app="myApp" ng-controller="myCtrl">

   <p>ეს სათაური შეიცვლება 2 წამში</p>

   <h1>{{myHeader} }</h1>

</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope, $timeout) {
     $scope.myHeader = "Hello World!";
     $timeout(function () {
       $scope.myHeader = "How are you today?";
     }, 2000);
   });
</script>

$interval სერვისი

$interval სერვისი არის Javascript window.setInterval ფუნქციის AngularJS-ისეული ვერსია. მაგალითისათვის გამოვიტანოთ მიმდინარე დრო ყოველ წამში <div ng-app="myApp" ng-controller="myCtrl">

   <h1>{{theTime} }</h1>

</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope, $interval) {
     $scope.theTime = new Date().toLocaleTimeString();
     $interval(function () {
       $scope.theTime = new Date().toLocaleTimeString();
     }, 1000);
   });
</script>
10. Angular AJAX - $http
$http სერვისი გამოიყენება სერვერზე არსებული ინფორმაციის წასაკითხად, იგი აგზავნის მოთხოვნას სერვერზე და იქიდან ღებულობს პასუხს <div ng-app="myApp" ng-controller="myCtrl">

   <h1>{{myWelcome} }</h1>

</div>

<p>$http სერვისი მიმართავს სერვერზე არსებულ ფაილს, პასუხი კი ინახება "myWelcome" ცვლადში</p>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope, $http) {
     $http.get("welcome.htm").then(function (response) {
       $scope.myWelcome = response.data;
     });
   });
</script>
ზემოთ მოყვანილ მაგალითში გამოყენებულია $http სერვისის .get მეთოდი. ამას გარდა ამ სერვისს აქვს შემდეგი მეთოდები
  • .delete()
  • .get()
  • .head()
  • .jsonp()
  • .patch()
  • .post()
  • .put()
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http({
    method : "GET",
    url : "welcome.htm"
  }).then(function mySuccess(response) {
    $scope.myWelcome = response.data;
  }, function myError(response) {
    $scope.myWelcome = response.statusText;
  });
});
სერვერიდან მოსული პასუხი არის ობიექტი, რომელსაც გააჩნია შემდეგი თვისებები
  • .config - ობიექტი იყენებს პასუხის გენერირებისათვის.
  • .data - სტრიქონი ან ობიექტი, რომელიც შეიცავს პასუხს.
  • .headers - ფუნქცია რომელიც გამოიყენება header ინფორმაციის მისაღებად.
  • .status - რიცხვი რომელიც განსაზღვრავს HTTP-ს სტატუსს.
  • .statusText - რიცხვი რომელიც განსაზღვრავს HTTP-ს სტატუსის ტექსტს.
იმისათვის რათა მოხდეს შეცდომების დამუშავება უნდა გამოვიყენოთ .then მეთოდი <script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope, $http) {
     $http.get("wrongfilename.htm")
       .then(function(response) {
         $scope.content = response.data;
       }, function(response) {
         $scope.content = "Something went wrong";
     });
   });
</script>
11. Angular ცხრილები
ინფორმაციის ცხრილში განთავსების ყველაზე კარგი საშუალებაა ng-repeat დირექტივა. <div ng-app="myApp" ng-controller="customersCtrl">

   <table>
     <tr ng-repeat="x in names">
       <td>{{ x.Name } }</td>
       <td>{{ x.Country } }</td>
     </tr>
   <table>

</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('customersCtrl', function($scope, $http) {
     $http.get("customers.php")
       .then(function (response) {$scope.names = response.data.records;});
   });
</script>
ცხრილის გადანომვრისათვის უნდა გამოვიყენოთ $index თვისება <table>
   <tr ng-repeat="x in names">
     <td>{{ $index + 1 } }</td>
     <td>{{ x.Name } }</td>
     <td>{{ x.Country }}</td>
   </tr>
</table>
ახლა კი ng-if დირექტივის დახმარებით ცხრილს მივცეთ ე.წ ზებრა სტილი <table>
   <tr ng-repeat="x in names">
     <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name } }
     <td ng-if="$even">{{ x.Name } }
     <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country } }
     <td ng-if="$even">{{ x.Country } }
   </tr>
</table>
12. Angular და HTML <select> ელემენტი
თუ გვსურს AngularJS-ში გავაკეთოთ მასივზე ან ობიექტზე დაფუძნებული ჩამოშლადი სია, უნდა გამოვიყენოთ ng-options დირექტივა <div ng-app="myApp" ng-controller="myCtrl">

   <select ng-model="selectedName" ng-options="x for x in names">
   </select>

</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
     $scope.names = ["Emil", "Tobias", "Linus"];
   });
</script>

ng-options vs ng-repeat

იგივე შედეგის მისაღებად შეგვეძლო გამოგვეყენებინა ng-repeat დირექტივაც <select>
  <option ng-repeat="x in names">{{x}}</option>
<select>
ng-options დირექტივით შექმნილი ჩამოშლადი სიის ელემენტები შეიძლება განხილულ იქნეს როგორც ობიექტები, ng-repeat დირექტივით შექმნილი ჩამოშლადი სიის ელემენტები კი სტრიქონებია.

ვთქვათ გვაქვს ობიექტების მასივი $scope.cars = [
   {model : "Ford Mustang", color : "red"},
   {model : "Fiat 500", color : "white"},
   {model : "Volvo XC90", color : "black"}
];
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
ვთქვათ ახლა გვაქვს ობიექტი გასაღები-მნიშვნელობა წყვილებით $scope.cars = {
   car01 : "Ford",
   car02 : "Fiat",
   car03 : "Volvo"
};
<div ng-app="myApp" ng-controller="myCtrl">

   <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
   </select>

   <h1>არჩეული მანქანა: {{selectedCar} }</h1>

</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('myCtrl', function($scope) {
     $scope.cars = {
       car01 : "Ford",
       car02 : "Fiat",
       car03 : "Volvo"
     }
   });
</script>
13. Angular და SQL
AngularJS შესანიშნავი ხელსაწყოა ბაზიდან ამორებული ინფორმაციის გამოსატანად. უბრალოდ დარწმუნებული უნდა ვიყოთ, რომ ეს ინფორმაცია JSON ფორმატშია. <div ng-app="myApp" ng-controller="customersCtrl">

   <table>
     <tr ng-repeat="x in names">
       <td>{{ x.Name } }</td>
       <td>{{ x.Country } }</td>
     </tr>
   </table>

</div>

<script>
   var app = angular.module('myApp', []);
   app.controller('customersCtrl', function($scope, $http) {
     $http.get("customers_mysql.php")
       .then(function (response) {$scope.names = response.data.records;});
   });
</script>
მიმდინარე სერვერისაგან განსხვავებული სერვერიდან მონაცემთა მოთხოვნას ეწოდება cross-site HTTP მოთხოვნა ანუ საიტთაშორისი მოთხოვნა. შემდეგი ჩანაწერი სწორედ ასეთ მოთხოვნებზე წვდომის საშუალებას მოგვცემს header("Access-Control-Allow-Origin: *"); ახლა კი მოვიყვანოთ ზემოთ მოყვანილი AngularJS აპლიკაციის შესაბამისი customers_mysql.php ფაილის სკრიპტი <?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
     if ($outp != "") {$outp .= ",";}
     $outp .= '{"Name":"' . $rs["CompanyName"] . '",';
     $outp .= '"City":"' . $rs["City"] . '",';
     $outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();

echo($outp);
?>
14. Angular მოვლენები
HTML ელემნტებზე AngularJS მოვლენათა დამმუშავებლების დამატება შესაძლებელია შემდეგი დირექტივების დახმარებით:
  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste
15. Angular ანიმაციები
AngularJS-ის დახმარებით შესაძლებელია HTML ელემენტთა ანიმაციური გარდაქმნა (CSS-ის დახმარებით). ანიმაცია არის ელემენტის გარდასახვის პროცესი, რომლის დროსაც ჩნდება ილუზია თითქოს HTML ელემენტი მოძრაობს. აპლიკაციაში ანიმაციების ჩასართავად უნდა გამოვიყენოთ AngularJS-ის შესაბამისი ბიბლიოთეკა <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script> შემდეგ ngAnimate მოდულის მეშვეობით უნდა განვსაზღვროთ კონტეინერი რომელშიც გვსურს ანიმაციების მოთავსება <body ng-app="ngAnimate"> ხოლო თუ აოლიკაციას სახელი უკვე აქვს მაშინ ngAnimate მოდული, უკვე არსებულ მოდულში უნდა გამოვიყენოთ როგორც დამოკიდებულება <script>
   var app = angular.module('myApp', ['ngAnimate']);
</script>
ngAnimate მოდული უშლის ან ამატებს კლასებს HTML ელემენტებს. ეს მოდული არ ახდენს ელემენტთა ანიმირებას ავტომატურად მაგრამ როდესაც ის შეამჩნევს, რომ ელემენტთან მიმაგრებულია ისეთი მოვლენები როგორებიცაა მაგალითად hide ან show, ელემენტი მიიღებს წინასწარ განსაზღვრულ კლასებს, რომლებიც გამოიყენება ანიმაციის ეფექტის შესამნელად. კლასთა წაშლას და დამატება ახდენენ შემდეგი დირექტივები
  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch
ng-show და ng-hide დირექტივები ამატებენ ან შლიან ng-hide კლასის მნიშვნელობას. მოვიყვანოთ ანიმაციის მაგალითი <!DOCTYPE html>
<html>
<style>
   div {
     transition: all linear 0.5s;
     background-color: lightblue;
     height: 100px;
     width: 100%;
     position: relative;
     top: 0;
     left: 0;
   }

   .ng-hide {
     height: 0;
     width: 0;
     background-color: transparent;
     top:-200px;
     left: 200px;
   }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>

<body ng-app="myApp">

<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
  var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>
შედეგი იქნება

Hide the DIV:

16. Angular მარშრუტები
თუ აპლიკაციაში გვჭირდება სხვა გვერდებზე გადასვლა მაგრამ გვინდა რომ აპლოკაცია იყოს ერთგვერდიანი, სადაც არ ხდება გვერდის დარეფრეშება, უნდა გამოვიყენოთ ngRoute დირექტივა. ngRoute დირექტივის საშუალებით ჩვენი აპლიკაცია გარდაიქმნება ერთგვერდიან აპლიკაციად (Single Page Application). ამ დირექტივის საშუალებით ხდება მარშრუტების გაწერა სხვა გვერდებისაგან, ამასთანავე მიმდინარე გვერდი არ რეფრეშდება. პირველ რიგში გვერდში უნდა ჩავრთოთ AngularJS-ის Route მოდული <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> შემდეგ აპლიკაციის მოდულს განვუსაზღვროთ დამოკიდებულება ngRoute var app = angular.module("myApp", ["ngRoute"]); მარშრუტების განსაზღვრისათვის გამოვიყენოთ $routeProvider. $routeProvider განსაზღვრავს თუ რა გვერდი უნდა გამოჩნდეს როდესაც მომხმარებელი დააწვება ბმულს. შემდეგ საჭიროა კონტეინერი სადაც მოთავსდება მარშრუტირების შედეგად მიღებული ინფორმაცია. ამ კონტეინერს განსაზღვრავს ng-view დირექტივა. <div ng-view> </div> საერთო ჯამში გვექნება <body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>

<div ng-view></div>

<script>
   var app = angular.module("myApp", ["ngRoute"]);
   app.config(function($routeProvider) {
       $routeProvider
       .when("/", {
         templateUrl : "main.htm"
       })
       .when("/red", {
         templateUrl : "red.htm"
       })
       .when("/green", {
         templateUrl : "green.htm"
       })
       .when("/blue", {
         templateUrl : "blue.htm"
       });
     });
</script>
</body>
17. Angular აპლიკაცია

ბიჯი 1: დასაწყისი

დავიწყოთ აპლიკაციის შექმნა და დავარქვათ მას სახელი - myShoppingList, შემდეგ მას დავამატოთ კონტროლერი სახელად - myCtrl.

კონტროლერი მიმდინარე $scope ობიექტს ამატებს მასივს სახელად - products

HTML-ში კი ng-repeat დირექტივის საშუალებით შევქმნათ სია სადაც იქნება შეტანილი ამ მასივის ელემენტები.

ბიჯი 2: ჩანაწერთა დამატება

HTML-ში დავამატოთ ტექსტური ველი და დავაკავშიროთ აპლიკაციასთან ng-model დირექტივის საშუალებით.

კონტროლერში გავაკეთოთ ფუნქცია სახელად - addItem რომელიც addMe input ველის მნიშვნელობებს დაამატებს მასივში.

შევქმნათ button ელემენტი და მივუთითოთ მას ng-click დირექტივა რომელიც მოახდენს addItem ფუნქციის გაშვებას როდესაც დააწვებიან ღილაკს.

ბიჯი 3: ჩანაწერთა წაშლა

კონტროლერში შევქმნათ ფუნქცია სახელად removeItem, რომელსაც პარამეტრად გადაეცემა წასაშლელი ჩანაწერის ინდექსი.

HTML-ში შევქმნათ <span> ელემენტი სიის თითოეული ჩანაწერისათვის, და მივუთითოთ ამ ელემენტს ng-click დირექტივა რომელიც გამოიძახებს removeItem ფუნქციას მიმდინარე ჩანაწერის ინდექსით - $index.

ბიჯი 4: შეცდომათა დამუშავება

აპლიკაციაში შეიძლება მოხდეს შეცდომა, მაგალითად დავამატოთ ისეთი ჩანაწერი სიაში, რომელიც უკვე დამატებულია, აგრეთვე გასათვალისწინებელია რომ აპლიკაციამ არ დაამატოც ცარიელი ჩანაწერები. ასე რომ ახალი ჩანაწერის დამატებამდე უნდა მოხდეს მისი გადამოწმება. HTML-ში დავამატოთ შეცდომათა კონტეინერი სადაც გამოჩნდება შესაბამისი ტექსტი შეცდომის დაფიქსირებისას.

ბიჯი 5: დიზაინი

აპლიკაცია გამართულად მუშაობს მაგრამ საჭიროა მისი ვიზუალის დახვეწა ამისათვის გამოვიყენოთ CSS სტილი რომელიც განთავსებულია შემდეგ მისამართზე <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> ამ ყველაფრის შედეგი იქნება