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

“state” in içeriğini aşağıdaki gibi doldurabilirsiniz. abstract [code language=”javascript”] abstract: true [/code] => 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 [code language=”javascript”] parent: "stateName" [/code] => 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 [code language=”javascript”] url: "/users" [/code] => 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 [code language=”javascript”] url: "/users/:operation?userName" [/code] => 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 [code language=”javascript”] template: ‘<h1>My Contacts</h1>’ [/code] => “template” değeri ile sözkonusu “state” çağırıldığında gösterilecek sayfanın yapısı tanımlanır. templateUrl [code language=”javascript”] templateUrl: "webapp/view/users.html" [/code] => “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 [code language=”javascript”] controller: State01Controller [/code] => “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 [code language=”javascript”] controller: function($scope) { $scope.items = ["item01", "item02", "item03"]; } [/code] => Temel “state” oluşturma örneği: [code language=”javascript”] $stateProvider.state(‘customers’, { template: ‘<h1>My Custemers</h1>’ }) [/code] Gelişmiş “state” oluşturma örnekleri: [code language=”javascript”] $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, }) ; [/code]]]>

Leave a Reply

Your email address will not be published. Required fields are marked *