AngularJS state nedir? nasıl oluşturulur? nasıl yönetilir?

“state” İngilizcede durum, belirtme, bildirme vs. anlamlarına gelmektedir. AngularJS te ise kazandığı anlamı “durum” olarak görebilirsiniz.

“state” AngularJS in bir servisidir, “ui-router” modulü altında yer almaktadır.
AngularJS “state” uygulamamızda arayüz açısından bir yere ve yönlendirmeye karşılık gelmektedir. Şöyleki web sayfanız bir AngularJS “state” i içerisinde tanımlanmışsa ve siz bu “state” i çağırdığınızda ilgili “state” in özellikleriyle birlikte sayfanız yüklenecektir. Özellik olarak ise en basit örnek olarak ilgili sayfanının hangi “controller” ı gösterilmiş ise o “controller” ile birlikte yüklenir.

AngularJS’de “state” kavramını bir ekran veya ekranlar hiyerarşisi olarakta düşünebilirsiniz. Şöyleki “state” in içeriğini tanımlarken girilen değerleri farklı “state” lerde de kullanabilirsiniz mesela “Kullanıcı Bilgisi” ekranı sabit tek bir ekrandır ancak farklı menülerde son kullanıcıya gösterilecek ekran değerlerini diğer menü altındakinden farklı gösterme ihtiyacı olduğunda tek bir web sayfası hazırlayarak farklı “controller” lar ile bu sayfanın içeriğini yöneterek farklı bilgiler ile doldurabilmeniz mümkündür.
Biraz daha açık olması açısından şöyle bir örnek verebiliriz, sisteminize şu anda giriş yapmış olan bir kullanıcı kendi bilgilerini görmek istediğinde sabit olan üst menüden kendi adına tıkladığında bu kullanıcının bilgilerini “user.html” de getirdiğimizi varsayalım, “Kullanıcılar” menüsündeki listeden ise farklı bir kullanıcının bilgilerini görmek için o kayıtlı kullanıcı bilgisine tıkladığımızda yine “user.html” sayfası gelmesine rağmen iki farklı işlemde iki farklı “controller” kullanmak mümkündür, yani bir web sayfanızı farklı “state” lerden çağırarak içeriğini farklı şekillerde doldurabilirsiniz.

Üst (parent) “state” in “controller” ında tanımlanan değişkenler alt(child) “state” in ilgili “controller” ına çekilip burda kullanılırlar olarak düşünebilirsiniz, her defasında üst(parent) “state” in “controller” ındaki değerlere ulaşmaya çalışmazlar, kendilerinde mevcut olarak varsayarlar.

AngularJS “state” nasıl oluşturulur ve yönetilir.
“state” in içeriğini aşağıdaki gibi doldurabilirsiniz.

abstract

abstract: true

=> söz konusu “state” in soyut olduğunu gösterir, yani son kullanıcıya gösterilecek bir web sayfasının olmadığı, eğer alt “state” leri mevcut ise bu alt “state” lere kendi “controller” ında tanımlı değerleri ast(child) “state” lere sunabilir ve böylelikle birden çok “controller” dan aynı değere ulaşabilirsiniz.

parent

parent: "stateName"

=> bu state in başka bir “state” e bağlı alt bir “state” olduğunu belirtir, bağlı bulunulan “state” in adı “stateName” dir. aynı zamanda kendiside başka “state” lere üstlük(parent) yapabilir.

url

url: "/users"

=> bu “state” çağırıldığında tarayıcının adres satırındaki değerin ne olacağını belirtir. Bu adres satırındaki değer çağırıldığında içinde bulunulan “state” aktif olur.

url

url: "/users/:operation?userName"

=> bu yazım şekli ise ilgili “state” çağırılırken bu “state” e iz/yol(path) parametresi ve sorgu(query) parametresi geçilmesini ifade eder.

template

template: '<h1>My Contacts</h1>'

=> “template” değeri ile sözkonusu “state” çağırıldığında gösterilecek sayfanın yapısı tanımlanır.

templateUrl

templateUrl: "webapp/view/users.html"

=> “templateUrl” in değerine yazılan web sayfası adresi, sayfa sözkonusu “state” çağırıldığında son kullanıcıya gösterilecek olan sayfasının adresidir.

“state” e ulaşım için “state” çağırma, “URL” e gitme parametre ile “URL” e gitme örneğine buradan ulaşabilirsiniz.

controller

controller: State01Controller

=> “state” çağırıldığında/aktif edildiğinde kullanılacak “controller” ı gösterir. Opsiyoneldir. İlgili “state” in bağlı bulunduğu “root state” var ise bu üst “state” inin “conroller” ını kullanır ayrıca “state” inize “controller” tanımlamayabilirsinizde.

controller

controller: function($scope) {
      $scope.items = ["item01", "item02", "item03"];
}

=>

Temel “state” oluşturma örneği:

$stateProvider.state('customers', {
    template: '<h1>My Custemers</h1>'
})

Gelişmiş “state” oluşturma örnekleri:

$stateProvider.state("users",
	{
		url: "/users",
		parent: "root",
		templateUrl: "webapp/view/users.html",
		controller: UsersController,
		data: {
			pageData01: {
				pd0101: 'page data 0101',
				pd0102: 'page data 0202'
			},
			pageData02: [
				{pd0201: "page data 0201", pd0202: true}
			]
		}
	})
	.state("user",
	{
		url: "/user/:userName",
		parent: "root",
		views: {
			"": {
				templateUrl: "webapp/view/user.html",
				controller: UserController
			},
			"header@": {
				templateUrl: "webapp/view/header/user-header.html"
			}
		},
		data: {
			sample01: [
				{smp01: "01", smp02: "02"},
			]
		}
	})
	.state("user.update",
	{
		url: "/update",
		templateUrl: "webapp/view/user/user-detail.html",
		controller: UserDetailCtrl,
	})
;
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*