Bu yazıda farklı iki kontrol arasında verinin nasıl taşındığını inceleyeceğiz. Öncelikle veriyi bir kontrol içinde tutup diğer kontrolden çağırmak yerine, veriyi tek bir noktada tutmak gerekiyor. Bunun için angular içinde birden fazla yöntem olmasına rağmen ben kendi servisimini yazıp servis içinde tutmayı tercih edeceğim. Servis içinde oluşturduğum bir veri kaynağı ile veriyi istediğim kontrol içine gönderdip gerekli güncellemeleri yapmam mümkün olacak. Daha önce factory servisi ile ilgili bir yazı yazmıştım. http işlemleri için bu servis konusuna bakabilirsiniz. Bu yazıda kendi servisimi yazıp veriyi kontrol içine alacağım.
Bu kadar açıklamadan sonra kodları yazalım ve açıklayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
angular.module("app",[]) .service("kaynakveri",function(){ var veri=this; veri.mesaj="Test Mesajı"; }) .controller("birinciController",function($scope,kaynakveri){ $scope.veri=kaynakveri; }) .controller("ikinciController",function($scope,kaynakveri){ $scope.veri=kaynakveri; }) |
Yukarıda yazdığımız kodları adım adım açıklayacak olursak;
1. Angular modülünü aşağıdaki kod ile oluşturduk.
|
1 2 3 |
angular.module("app",[]) |
2. Veri kaynağı olması için kendi servisimizi (kaynakveri) yazıp içine örnek bir veri ekledik.
|
1 2 3 4 5 6 |
.service("kaynakveri",function(){ var veri=this; veri.mesaj="Test Mesajı"; }) |
3. Sayfada kullanmak için iki tane controller nesnesi oluşturduk. Controller nesnesi oluştururken dikkat etmemiz gereken $scope ve kaynakveri parametrelerinin alındığıdır. kaynakveri servisimizi işaret etmektedir. sersivten gelen tüm veriyi $scope.veri içine ekleyip HTML içinde kullanıyoruz.
|
1 2 3 4 5 6 7 8 |
.controller("birinciController",function($scope,kaynakveri){ $scope.veri=kaynakveri; }) .controller("ikinciController",function($scope,kaynakveri){ $scope.veri=kaynakveri; }) |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div ng-app="app" > <div> <h1>Controller Arası Veri Taşıma</h1> </div> <div ng-controller="birinciController" > <h2>Control 1</h2> <input class="validate" type="text" ng-model="veri.mesaj"> <div> {{veri.mesaj}} </div> </div> <hr> <div ng-controller="ikinciController"> <h2>Control 2</h2> <div > {{veri.mesaj}}<br> </div> </div> </div> |
Uygulamanın son hali;
Yukarıdaki sade kullanımı materialize css ile şekillendirip aşağıdaki gibi tasarımı şekillendirdim.
ang-app.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
angular.module("app",[]) .service("kaynakveri",function(){ var veri=this; veri.mesaj="Test Mesajı"; }) .controller("birinciController",function ($scope,kaynakveri){ $scope.veri=kaynakveri; }) .controller("ikinciController",function ($scope,kaynakveri){ $scope.veri=kaynakveri; }) |
HTML: Angularjs ve materailze kodları cdn olarak internetten çekilmiştir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.css" rel="stylesheet"> <script src="ang-app.js"></script> <style> body{ margin:0; padding:0; } .baslik{ margin:0; color:#fff; padding:30px; } .icerik{ padding:30px; } </style> </head> <body> <div ng-app="app" class="container"> <div class="row blue-grey darken-4 baslik"> <div class="col s12"> <h1>Controller Arası Veri Taşıma</h1> </div> </div> <div ng-controller="birinciController" class="row blue-grey lighten-4 icerik"> <h2>Control 1</h2> <div class="row"> <div class="col s12"> <div class="input-field"> <input class="validate" type="text" ng-model="veri.mesaj"> </div> <div> {{veri.mesaj}} </div> </div> </div> </div> <div ng-controller="ikinciController" class="row blue-grey lighten-4 icerik"> <h2>Control 2</h2> <div class="row"> <div class="col s12"> {{veri.mesaj}}<br> </div> </div> </div> </div> </body> </html> |
Hocam paylaşımlarınız çok yararlı devamını bekliyoruz, umarım anlatımlarınızı Youtube üzerinden de yaparsınız..
[…] AngularJS Controller Arası Veri Taşıma […]