<\/div>\n

Merhaba,<\/p>\n

Angular, Single Page Application uygulamalar \u00fcretebilmemiz i\u00e7in geli\u015ftirilmi\u015f bir mimaridir. Dolay\u0131s\u0131yla uygulama tasar\u0131m\u0131, Angular mimarisinin yap\u0131s\u0131 gere\u011fi tek bir \u015fablon \u00fczerinden de\u011fi\u015fiklik g\u00f6stermeksizin yay\u0131n\u0131 sa\u011flamakta ve geli\u015ftiriciler a\u00e7\u0131s\u0131ndan da ilgili \u015fablon d\u0131\u015f\u0131na \u00e7\u0131k\u0131lmas\u0131na pekte m\u00fcsade edilmemektedir. Bizler bu i\u00e7eri\u011fimizde, Angular uygulamalar\u0131nda ilgili \u015fablonun d\u0131\u015f\u0131na \u00e7\u0131k\u0131p, Single Page Application yap\u0131s\u0131n\u0131 a\u015farak birden fazla \u015fablon \u00fczerinde Multiple Page Application \u015feklinde nas\u0131l \u00e7al\u0131\u015fma sergilenebilece\u011fini inceleyecek ve pratik olarak \u00f6rneklendirece\u011fiz.<\/p>\n

\u00d6ncelikle \u015fablon teriminin web terminolojisindeki kar\u015f\u0131l\u0131\u011f\u0131 olan “layout” kelimesiyle ili\u015fkili oldu\u011funu hat\u0131rlatarak ba\u015flayal\u0131m. Bu i\u00e7eri\u011fimizdeki temel amac\u0131m\u0131z, single page application olarak tasarlanan Angular mimarisinde multiple layout kullan\u0131m\u0131n\u0131n nas\u0131l oldu\u011funu irdelemek ve de\u011ferlendirmek olaca\u011f\u0131ndan dolay\u0131 bir bootstrap ve jquery mod\u00fcllerinin entegre edildi\u011fi sade bir proje \u00fczerinden basit bir senaryo ile anlat\u0131m sergilememiz yeterli olacakt\u0131r.<\/p>\n

Angular’da multiple layout kullanabilmek i\u00e7in \u00f6ncelikle ilk i\u015f uygulamada kullan\u0131lacak layout’lar\u0131 tasarlamak gerekmektedir.<\/p>\n

\r\nng g c layout1 --spec false\r\nng g c layout2 --spec false\r\n<\/pre>\nBizler \u00f6rneklendirmemizde “layout1” ve “layout2” olmak \u00fczere iki adet layout tasarlayaca\u011f\u0131z.
\nLayout1;<\/p>\n
\r\n<ul class="nav">\r\n  <li class="nav-item">\r\n    <a class="nav-link" routerLink="example1">Example 1<\/a>\r\n  <\/li>\r\n  <li class="nav-item">\r\n    <a class="nav-link" routerLink="example2">Example 2<\/a>\r\n  <\/li>\r\n  <li class="nav-item">\r\n    <a class="nav-link" href="layout2\/example3">Layout 2<\/a>\r\n  <\/li>\r\n<\/ul>\r\n<router-outlet><\/router-outlet>\r\n<\/pre>\nLayout2;<\/p>\n
\r\n<div class="row col-sx-4">\r\n  <ul class="list-group">\r\n    <li class="list-group-item"><a routerLink="example3">Example 3<\/a><\/li>\r\n    <li class="list-group-item"><a routerLink="example4">Example 4<\/a><\/li>\r\n    <li class="list-group-item"><a href="layout1\/example1">Layout 1<\/a><\/li>\r\n  <\/ul>\r\n  <router-outlet><\/router-outlet>\r\n<\/div>\r\n<\/pre>\nYukar\u0131daki yap\u0131lar\u0131 incelerseniz e\u011fer her ikiside farkl\u0131 tasar\u0131ma sahip iki layout olu\u015fturulmu\u015ftur. Uygulama altyap\u0131s\u0131n\u0131 \u00e7oklu layoutlar \u00fczerine kurgulayabilmek i\u00e7in tek dikkat edilmesi gereken nokta route yap\u0131lanmas\u0131d\u0131r. Layout olarak tasarlanan componentleri ana component(parent) olarak d\u00fc\u015f\u00fcn\u00fcrsek e\u011fer o layout alt\u0131nda render edilecek componentleri ise child olarak d\u00fc\u015f\u00fcnmemiz yeterli olacakt\u0131r. \u015e\u00f6yle ki;<\/p>\n
\r\nexport const appRoutes: Route[] = [\r\n  {\r\n    path: "", redirectTo: "\/layout1", pathMatch: "full"\r\n  },\r\n  {\r\n    path: "layout1", component: Layout1Component, children: [\r\n      { path: "example1", component: Example1Component },\r\n      { path: "example2", component: Example2Component }\r\n    ]\r\n  },\r\n  {\r\n    path: "layout2", component: Layout2Component, children: [\r\n      { path: "example3", component: Example3Component },\r\n      { path: "example4", component: Example4Component }\r\n    ]\r\n  }\r\n];\r\n<\/pre>\nYukar\u0131daki route yap\u0131lanmas\u0131na g\u00f6z atarsan\u0131z e\u011fer “Layout1Component” ve “Layout2Component” componentleri ana component olarak bo\u015f path dizisine tan\u0131mlanmakta, bunlar\u0131n childlar\u0131na ise altlar\u0131nda render edilecek olan componentler atanmaktad\u0131r. Bu ayarlamadan sonra uygulaman\u0131n ana componentinin g\u00f6r\u00fcnt\u00fcs\u00fc olan “app.component.html” dosyas\u0131nda sadece a\u015fa\u011f\u0131daki y\u00f6nlendiricinin tan\u0131mlanmas\u0131 yeterli olacakt\u0131r.<\/p>\n
\r\n<router-outlet><\/router-outlet>\r\n<\/pre>\nUygulamay\u0131 serve edersek e\u011fer;
\n<\/a>
\ng\u00f6rselde oldu\u011fu gibi birden fazla layout \u015fablonunu Angular uygulamas\u0131na yedirmi\u015f bulunmakta ve multiple page application olarak uygulamada yola devam edecek \u015fekilde temellendirmede bulunmu\u015f olmaktay\u0131z.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular, Single Page Application uygulamalar \u00fcretebilmemiz i\u00e7in geli\u015ftirilmi\u015f bir mimaridir. Dolay\u0131s\u0131yla uygulama tasar\u0131m\u0131, Angular mimarisinin yap\u0131s\u0131 gere\u011fi tek bir \u015fablon \u00fczerinden de\u011fi\u015fiklik g\u00f6stermeksizin yay\u0131n\u0131 sa\u011flamakta ve geli\u015ftiriciler a\u00e7\u0131s\u0131ndan da ilgili \u015fablon d\u0131\u015f\u0131na \u00e7\u0131k\u0131lmas\u0131na...<\/p>\n","protected":false},"author":1,"featured_media":9823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,2599],"tags":[2600,2689,2688,2687,2686],"class_list":["post-9826","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-6","tag-angular-6","tag-angular-birden-fazla-tasarim","tag-angular-coklu-layout","tag-angular-multiple-layout","tag-multiple-layout-kullanimi"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=9826"}],"version-history":[{"count":21,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9826\/revisions"}],"predecessor-version":[{"id":9849,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/9826\/revisions\/9849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/9823"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=9826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=9826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=9826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}