Routing 101 -- Polycasts #10 Google Developers English Turkish

Routing 101 -- Polycasts #10YouTube↗ IA↗(long shot)
Science & Technology 29.6K views 367 likes 4 dislikes 23 Feb 2015

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

Herkese merhaba.

Nasıl gidiyor?

It's Rob Dodson.

Ben, Rob Dodson.

Today I'm going to be taking you one step closer to building

Bugün, istemci taraflı bir yönlendiriciyle, URL değişiklikleri ile

your own single page application by showing you

nasıl başa çıkacağınızı göstererek,

how to handle URL changes with a client-side router.

kendi tek-sayfa uygulamanızı geliştirmeye bir adım daha yaklaşacağız.

So let's dive in.

Haydi başlayalım.

So if you've never heard of it before,

Eğer daha önce duymadıysanız,

routing is the process of determining what code to run

yönlendirme, URL istendiğinde, hangi kodun yürütüleceğinin

when a URL is requested.

belirlenmesi sürecidir.

In the world of routing, there's basically two approaches.

Yönlendirme dünyasında, iki ana yaklaşım vardır.

You can do all your routing in JavaScript,

Yönlendirmenizin tümünü JavaScript'te yapabilirsiniz.

and that's what I'll cover today.

Bugünün konusu da bu olacak.

This is called imperative routing.

Buna zorunlu yönlendirme deniyor.

Basically, you listen for a route change.

Temel olarak, bir yön değişimini dinliyorsunuz.

When you hear it, you run a callback function.

Duyduğunuzda, geri çağırma işlevini yürütüyorsunuz.

And inside that callback you can do all sorts of things.

Bu geri çağırma işlevinde, her türlü şeyi yapabilirsiniz.

You could tell core pages to change which item is currently

Çekirdek sayfalara, seçili olan öğeyi değiştirmesini

selected or you could set a bunch of scope variables

ya da bir demet kapsam değişkeni belirleyebilir,

and update your bindings.

ciltlemelerinizi güncelleyebilirsiniz.

And there's also declarative routing,

Diğer bir yönlendirme çeşidi de bildirim yönlendirmesidir.

which I'll cover in the next episode.

Bunu bir sonraki bölümde ele alacağız.

Basically this is doing the same thing,

Bu, temel olarak, aynı şeyi yapar

but using markup instead of JavaScript.

fakat JavaScript yerine biçimlendirmeyi kullanır.

Now the difference between imperative and declarative

Zorunlu ve bildirim yönlendirme arasındaki fark aslında

routing really comes down to style and personal taste.

tarz ve kişisel tercihle ilgili bir meseledir.

Polymer doesn't have an opinion here,

Polymer herhangi birini seçmeniz yönünde tavsiyede bulunmuyor.

so I'm going to start by showing you how to do it imperatively,

Bu bölümde, zorunlu yönlendirmeyi,

next episode we'll do it declaratively,

diğer bölümde ise bildirim yönlendirmesini göstereceğim.

and then you can decide which you prefer.

Hangisini seçeceğinize siz karar verin.

And the first thing I'm going to do is hop into my terminal

İlk olarak, terminale gideceğim ve

and install a router called page js using Bower.

Bower kullanarak page.js adında bir yönlendirici kuracağım.

Then in my index, I'll load page js with a script tag.

Ve dizinimin içerisinde bir komut biçimi ile page.js'yi yükleyeceğim.

And scrolling up a bit, you'll see

Biraz yukarı kaydırdığımızda,

that I've got a similar code from my last video.

son videodaki koda benzer bir kod göreceksiniz.

I've got a core pages element inside an autobinding template.

Otomatik ciltleme şablonunda çekirdek sayfalar unsurunu elde ettim.

I've dropped links in the show notes to that previous episode

Eğer ihtiyacınız varsa, bir önceki bölümde

so you can review it if you need to.

verdiğim bağlantılara bakabilirsiniz.

In my core pages here, I've got a value attribute

Çekirdek sayfalarımda, veri yönüne ayarlanmış

set to data route.

bir değer özniteliğine sahibim.

And I also got a selected value set to a scope variable called

Ayrıca, yön adıl verilen bir kapsam değişkenine ayarlanmış bir yön değerine de

And what this is going to do is it's

Bunun yapacağı şey, bu çocuklardan herhangi birinin

going to look to see if any of these children

verili yön ile eşleşip eşleşmediğine

match the current route.

So if the route was set to portfolio,

Eğer yön, portföye ayarlanmış olsaydı,

it would see which child has a matching data route attribute,

hangi çocuğun eşleşen veri yönü özniteliğine sahip olduğunu görecekti

go down, and display this one right here.

ve tam burada gösterecekti.

Now hopping into my app js file, I'm

JS dosyasına geçiyorum.

going to grab a reference to the autobinding template

Otomatik ciltleme şablonuna bir referans yakalayacağım ve

and distort in a variable called app.

app adlı bir değişken olarak yazacağım.

Then I'll call the page js function to define some routes.

Sonra, sayfa js işlevini bazı yönler tanımlamak için çağıracağım.

And lastly I'll configure the router

Ve, son olarak, tarih API'siı yerine

to use hashbang URLs instead of the history API.

hashbang URL'lerini kullanması için, yönlendiriciyi yapılandıracağım.

And what this means is that my routes

Yani, yönlerim, küçük bir pound sembolüne

are going to have a little pound symbol and an exclamation

ve ünlem işaretine sahip olacak.

point on the end of them versus just using pretty URLs which

Bu, bölme işaretini takip eden yön ismine sahip

might just have a slash and then the actual name of the route.

URL'lerin karşısında yer alır.

And the reason I'm going this route

Bu yönü deneyeceğim

is because it doesn't require us to set up a server.

çünkü bir sunucu kurmamızı gerektirmiyor.

Pretty URLs will.

URL bunu zaten yapacak.

So hashbangs can be a little bit easier to work with.

Böylece, hashbang ile çalışmak biraz daha kolay olacaktır.

But I encourage you to try both out in your application.

Ama her ikisini de uygulamanızda denemenizi öneriyorum.

And the last thing I have to do is write out

Yapmam gereken son şey, bu yönler eşleştiğinde,

the functions that'll run when these routes match.

yürütülecek işlevleri yazmak olacak.

So I'll create functions for home, portfolio, and contact.

Ana sayfa, portföy ve iletişim için işlevler yaratacağım.

And you can see that these functions match the routes

Bu işlevlerin yönlerle eşleştiğini burada

görebilirsiniz.

Inside of these handlers, you could run all sorts of code.

Bu işleyicilerin içinde, her türlü kodu yürütebilirsiniz.

You could fetch data or you could redirect to other routes

veriyi alıp getirebilir ve hatta diğer yönlere

yönlendirebilirsiniz.

But to keep it really simple, I'm

Fakat basit kalmasını sağlamak için,

just going to tell my template to set its route

şablona, yön özelliğini bir eşleşen diziye

property to a matching string.

yönlendirmesini söyleyeceğim.

Now hopping in my browser, you can

Tarayıcıma geliyorum.

see that as I update the URL here in the address bar,

Gördüğünüz gibi, adres çubuğunda URL'yi güncelledim.

the content on the page changes to reflect it.

Sayfa içeriği de bunu yansıtacak şekilde değişti.

Pretty simple, right?

Çok basit, değil mi?

The last thing I want to do is toss in a menu

Yapmak istediğim son şey,

so the user can actually swap between the different sections.

menüyü, kullanıcının farklı kısımlarını kullanabileceği hale getirmek.

Let's check it out.

Hadi bir bakalım.

Now I've gone ahead and dropped in a core menu

Bir çekirdek menü yazacağım

and bound it to that same route scope

ve çekirdek sayfalarda yaptığım gibi,

variable as my core pages.

aynı yön kapsamı değişkenine bağlayacağım.

I've also included anchor tags in my menu items

Menü öğelerine sabitleme imlerini dahil ediyorum.

so when a user clicks on one, it's

Böylece, kullanıcı birine tıkladığında,

actually going to trigger the router

yönlendirici, URL'yi hareket geçirecek ve

to update the URL, which will then set the route variable.

yön değişkeni belirlenecektir.

Now because the core menu and core pages

Çekirdek menü ve çekirdek sayfalar

are both using that same route variable,

aynı yön değişkenini kullandığı için

effectively the two are linked and they should update in sync.

bunlar birbirine bağlıdır ve eşzamanlı güncellenmelidirler.

Back in my browser, you'll see that as I'm

Tarayıcıda, farklı menü öğelerine tıkladığımda,

clicking on these different menu items,

adres çubuğunda URL'nin değiştiğini

the URL is changing up here in the address bar

ve içeriğin sayfanın gereli kalanıyla

and the content stays in sync with the rest of the page.

eşzamanlı hareket ettiğini göreceksiniz.

I can even grab the URL and drop it into a new tab.

URL'yi yeni bir sekmenin içine dahi bırakabilirim.

And once that boots up, you'll see

Bu çalışmaya başladığında, içeğin doğru sayfayı

that the content is showing the right page

gösterdiğini ve doğru öğenin

and the right item is highlighted over in our menu.

menümüzde vurgulandığını göreceksiniz.

OK, so you've seen the first bit of routing

Bir Polymer projesinde mümkün olabilecek

that's possible in a Polymer project.

yönlendirmenin bir kısmını görmüş oldunuz.

And at this point, you're probably

Muhtemelen, şu anda

ready to just like run off and go build your own application.

hemen gidip kendi uygulamanızı geliştirmek istiyorsunuz.

But don't run away just yet.

Ama acele etmeyin.

In the next episode, I want to show you

Sonraki bölümde, yalnızca HTML'yi kullanarak,

how to all of these exact same tricks using nothing but HTML.

aynı şeyi nasıl elde edebileceğinizi göstereceğim.

So definitely stick around for that

Bunu öğrenmek için takipte kalın

and be sure to click the Subscribe button.

ve abone ol tuşuna basmayı unutmayın.

It is how I justify my employment here.

Böylece, buradaki işimi koruyabilirim.

As always, thank you so much for watching

Her zaman olduğu gibi, izlediğiniz için teşekkürler.

and I'll see you next time.

Görüşmek üzere.

[MUSIC PLAYING]

[MÜZİK ÇALIYOR]

Similar videos:

Moar routing with... more-routing -- Polycasts #11
Google for Developers
22.9K views 206 likes 4 dislikes 09 Mar 201574% match

Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 201558% match

Extending Native Elements -- Polycasts #15
Google for Developers
18.6K views 164 likes 3 dislikes 04 May 201557% match

Give your element an API -- Polycasts #16
Google for Developers
22.9K views 242 likes 1 dislikes 18 May 201543% match

What's new in Polymer 0.5.1 -- Polycasts #06
Google for Developers
19.7K views 232 likes 1 dislikes 01 Dec 201443% match

Core Iconset -- Polycasts #02
Google for Developers
24.6K views 171 likes 2 dislikes 06 Oct 201443% match

Scrolling at 60 frames with core-list -- Polycasts #12
Google for Developers
24.6K views 247 likes 4 dislikes 23 Mar 201542% match

Content Switcheroo with Core-Pages -- Polycasts #09
Google for Developers
21.5K views 222 likes 2 dislikes 09 Feb 201542% match

Iron Icons -- Polycasts #20 (100 Days of Google Dev)
Google for Developers
22.3K views 137 likes 1 dislikes 09 Jul 201540% match

Theming Elements -- Polycasts #17
Google for Developers
28.1K views 233 likes 2 dislikes 02 Jun 201540% match

Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201439% match

The Awesome Power of Auto-Binding Templates -- Polycasts #08
Google for Developers
29.8K views 276 likes 5 dislikes 28 Jan 201538% match

Behaviors -- Polycasts #21
Google for Developers
25.5K views 273 likes 4 dislikes 15 Jul 201537% match

Go Offline -- Polycasts #19
Google for Developers
26.4K views 354 likes 8 dislikes 29 Jun 201532% match

Polymer Starter Kit -- Polycasts #18
Google for Developers
45.6K views 428 likes 6 dislikes 15 Jun 201532% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201431% match

Google Play Services 6.5
Google for Developers
24.6K views 498 likes 31 dislikes 08 Dec 201430% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201430% match

Core Header Panel -- Polycasts #04
Google for Developers
25.8K views 190 likes 1 dislikes 05 Nov 201430% match

Core Icons -- Polycasts #01
Google for Developers
58K views 380 likes 5 dislikes 22 Sep 201429% match

What Deep Dream sees -- LazyWeb #12
Google for Developers
51.6K views 413 likes 27 dislikes 07 Jul 201528% match

VR at Google - Google I/O 2016
Google for Developers
73K views 484 likes 16 dislikes 19 May 201627% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201527% match

Google I/O 2016 Highlights
Google for Developers
46.6K views 649 likes 15 dislikes 26 May 201626% match

VR & Cinema - Google I/O 2016
Google for Developers
76.6K views 683 likes 47 dislikes 19 May 201626% match

Listing your files in Google Drive
Google for Developers
40.2K views 125 likes 20 dislikes 13 Nov 201426% match

The Setup: Creating new apps using Google APIs
Google for Developers
123.3K views 796 likes 30 dislikes 13 Nov 201425% match

Accessing Google APIs: Common code walkthrough
Google for Developers
45.9K views 188 likes 14 dislikes 13 Nov 201425% match

Google Cast: Introduction to the SDK
Google for Developers
47K views 141 likes 7 dislikes 10 Dec 201425% match

DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201425% match

Settings Privacy About Contact Donate