Angular.js: <a href="...">๋งํฌ</a> ์บก์ฒ˜๋ฅผ ๋น„ํ™œ์„ฑํ™”ํ•˜๋Š” ์˜ต์…˜

์— ๋งŒ๋“  2013๋…„ 11์›” 29์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: angular/angular.js

Angular์—๋Š” <a href="..."> ๋งํฌ๋ฅผ ๋ฌด์‹œํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋งํฌ๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ์˜ต์…˜์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

API์—์„œ ๊ฐ€์ ธ์˜จ HTML์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ž‘๋™ํ•˜๋ ค๋Š” <a href="..."> ๋งํฌ๊ฐ€ ์žˆ์–ด ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ng-href ๋‚˜๋Š” ํ†ตํ•ด ๊ฐ€๊ณ  ์‹ถ์€ ๋ฌผ๊ฑด $router , ๋“ฑ

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๊ท€ํ•˜์˜ ์งˆ๋ฌธ์„ ์˜คํ•ดํ•˜์ง€ ์•Š๋Š” ํ•œ ๋งํฌ์— target="_self" ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด Angular๊ฐ€ ์ด๋ฅผ ์‹œ๋„ํ•˜๊ณ  ๋ผ์šฐํŒ…ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  5 ๋Œ“๊ธ€

๋ฌธ์ œ๋Š” ngRoute๊ฐ€ ์‹ค์ œ๋กœ ๊ทธ๋ ‡๊ฒŒ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. "๋งํฌ ์บก์ฒ˜"๊ฐ€ ์•„๋‹ˆ๋ผ ๋ณธ์งˆ์ ์œผ๋กœ window.location --- ์–ด๋–ป๊ฒŒ ๊ฐ•์ œ๋กœ updateRoute ๊ธฐ๋Šฅ์„ ์ผ์‹œ์ ์œผ๋กœ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ฐ€๋Šฅํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์™„์ „ํžˆ ํ™•์‹ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๊ท€ํ•˜์˜ ์งˆ๋ฌธ์„ ์˜คํ•ดํ•˜์ง€ ์•Š๋Š” ํ•œ ๋งํฌ์— target="_self" ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด Angular๊ฐ€ ์ด๋ฅผ ์‹œ๋„ํ•˜๊ณ  ๋ผ์šฐํŒ…ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์˜ˆ, target="_self"๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

http://docs.angularjs.org/guide/dev_guide.services. $์œ„์น˜

์˜ˆ, target="_self" ์— ๋Œ€ํ•ด ์•Œ๊ณ  ์žˆ์ง€๋งŒ ์ด HTML์€ API์—์„œ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ๊ตฌ๋ฌธ ๋ถ„์„ํ•˜๊ณ  ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ ์ง์ ‘ target="_self" ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ๋‹ค๋ฅธ ์‹ค์šฉ์ ์ธ ๋ฐฉ๋ฒ•์€ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. @pixelcort ์‘๋‹ต ์ธํ„ฐ์…‰ํ„ฐ ๋ฅผ ํ†ตํ•ด html์„ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰