Angular.js: рдХреЛрдгреАрдп рдХреЛ рдкреГрд╖реНрда рдкрд░ рдХрд┐рд╕реА рд╡рд┐рд╢рд┐рд╖реНрдЯ рддрддреНрд╡ рдХреЛ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рдиреЗ рдХрд╛ рдПрдХ рддрд░реАрдХрд╛ рдкреНрд░рджрд╛рди рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП

рдХреЛ рдирд┐рд░реНрдорд┐рдд 1 рдирд╡ре░ 2010  ┬╖  10рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: angular/angular.js

рдлреНрд░реИрдЧрдореЗрдВрдЯ рдЖрдЗрдбреЗрдВрдЯрд┐рдлрд╝рд╛рдпрд░ (рд╣реИрд╢) рдЖрдорддреМрд░ рдкрд░ рдПрдХ рд▓рдВрдмреЗ рдкреГрд╖реНрда рдореЗрдВ рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╕реНрдерд╛рдиреЛрдВ рд╕реЗ рд▓рд┐рдВрдХ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдпрд╣ рдХреЛрдгреАрдп рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ рдорд╛рд░реНрдЧ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣реИрд╢ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИред рдкреГрд╖реНрда рдХреЛ рдХрд┐рд╕реА рд╡рд┐рд╢рд┐рд╖реНрдЯ рддрддреНрд╡ рддрдХ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рдиреЗ рдХрд╛ рдПрдХ рддрд░реАрдХрд╛ рдкреНрд░рджрд╛рди рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

рд╕рднреА 10 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рд╣рд╛рдВ, рдФрд░ рдлрд┐рд░, рд╣рдореЗрдВ рдЗрд╕реЗ $ рд╕реНрдерд╛рди рдХреЗ рд╕рд╛рде рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП - рдЕрдм рдХреЗ рд░реВрдк рдореЗрдВ, рд╣рдо рд╣реИрд╢ рдХрд╛ рднреА рд╕рдорд░реНрдерди рдХрд░рддреЗ рд╣реИрдВ, рдЗрд╕рд▓рд┐рдП рдЬрдм рднреА $ рд╕реНрдерд╛рдиред рд╣реИрд╢ () рдмрджрд▓рддрд╛ рд╣реИ, рддреЛ рд╣рдореЗрдВ рдЗрд╕реЗ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП ...

рдпрд╣ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рд▓рд╛рдЧреВ рдерд╛ред рдпрджрд┐ $ рд╕реНрдерд╛рди html5 рдореЛрдб рдореЗрдВ рд╕рдВрдЪрд╛рд▓рд┐рдд рд╣реЛрддрд╛ рд╣реИ рддреЛ рдмрд╕ href="#anchor" рд▓рд┐рдВрдХ рдмрдирд╛рдПрдВ

рдЙрд╕ рдкрд░ рдЯрдХрд░рд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХреНрд╖рдорд╛ рдХрд░реЗрдВ, рд▓реЗрдХрд┐рди рдХреНрдпрд╛ рд╣реЛрдЧрд╛ рдпрджрд┐ рд╣рдо html5 рдореЛрдб рдореЗрдВ рдирд╣реАрдВ рд╣реИрдВ? рд╕рдВрджрд░реНрднреЛрдВ рдХреЗ рд▓рд┐рдП рдпрд╣ рджреЛ рдлрд┐рдбреЗрд▓ рджреЗрдЦреЗрдВ:
http://jsfiddle.net/gabrielstuff/SdGnR/ рдЬреЛ рд░рд╛рдЙрдЯрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдПрдВрдХрд░ рд▓рд┐рдВрдХрд┐рдВрдЧ рдХреЛ рддреЛрдбрд╝рддреЗ рд╣реИрдВред
рдФрд░ рдпреЗ рд╡рд╛рд▓рд╛
http://jsfiddle.net/gabrielstuff/nYxFg/ рдЬреЛ рдХрд┐рд╕реА рднреА рд░рд╛рдЙрдЯрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ рдФрд░ рд╕рд╣реА рдврдВрдЧ рд╕реЗ рдЙрд╕реА рдкреГрд╖реНрда рдкрд░ рдХреВрджрдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛ HTML5 рдХреЗ рд╕рд╛рде рдкреНрд░рдпрд╛рд╕ рдХрд░рдиреЗ рд╕реЗ рдмрд╣реБрдд рдорджрдж рдирд╣реАрдВ рдорд┐рд▓реА (рд▓реЗрдХрд┐рди рдпрд╣ рдПрдХ рдЕрдиреНрдп рдЯрд┐рдХрдЯ рд╣реИ)

рдореЗрд░реА рднреА рдпрд╣реА рд╕рдорд╕реНрдпрд╛ рд╣реИред рдореИрдВ html5 рдореЛрдб рдореЗрдВ рдирд╣реАрдВ рд╣реВрдВред рдпрд╣ рд╣реИрд╢рдмреИрдВрдЧ рдореЛрдб рдореЗрдВ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░реЗрдЧрд╛?

рдореИрдВ рдорд╛рдирддрд╛ рд╣реВрдВ рдХрд┐ рдпрд╣ рд╡реНрдпрд╡рд╣рд╛рд░ рдмрд╣реБрдд рдЕрдкреНрд░рддреНрдпрд╛рд╢рд┐рдд рд╣реИред рдпрд╣рд╛рдВ рддрдХ тАЛтАЛтАЛтАЛрдХрд┐ рдЕрдЧрд░ рдХреЛрдИ HTML5 рдореЛрдб рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ, рддреЛ рдПрдВрдХрд░ рдХреЗ рд╕рд╛рде рд╣реИрд╢ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рдХреЛрдгреАрдп рдХреЛ рдЗрд╕ рдЕрдкреЗрдХреНрд╖рд┐рдд рд╡реНрдпрд╡рд╣рд╛рд░ рдХреЛ рдирд╣реАрдВ рддреЛрдбрд╝рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдЬреИрд╕рд╛ рдХрд┐ рдореИрдВ рдЗрд╕реЗ рд╕рдордЭрддрд╛ рд╣реВрдВ, рдХреЛрдгреАрдп рдХреЛ рдХрд┐рд╕реА рднреА рддрд░рд╣ рд╕реЗ рд╕реНрдкрд╖реНрдЯ рд╣реИрд╢ рд╡рд╛рд▓реЗ рдХрд┐рд╕реА рднреА рд▓рд┐рдВрдХ рдХреЛ рдЕрдирджреЗрдЦрд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред рдпрджрд┐ рд╣рдо HTML5 рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд░рд╣реЗ рд╣реИрдВ рддреЛ рд▓рд┐рдВрдХ <a href="/something"... рдЕрдкрдиреЗ рдЖрдк /#/something рд░реВрдк рдореЗрдВ рдлрд┐рд░ рд╕реЗ рд▓рд┐рдЦрд╛ рдЬрд╛рдПрдЧрд╛ (рдЬрдм рддрдХ рдХрд┐ рдореИрдВ _self рд▓рдХреНрд╖рд┐рдд рдирд╣реАрдВ рдХрд░рддрд╛)ред рддреЛ <a href="#something" рдпрдХреАрдирди рд╣рдореЗрд╢рд╛ /#something рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП

+1

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдПрдВрдХрд░рд╕реНрдХреНрд░реЙрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдмрд╕ рдЬрд┐рдЬреНрдЮрд╛рд╕реБ @IgorMinar рдХреНрдпрд╛ рд╣рдореЗрдВ рдЗрд╕ рдкрд░ рдХреЛрдИ рдЯрд┐рдкреНрдкрдгреА рдорд┐рд▓ рд╕рдХрддреА рд╣реИ рдХрд┐ рдХреНрдпрд╛ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдареАрдХ рд╣реЛрдиреЗ рд╡рд╛рд▓реА рд╣реИ рдпрд╛ рдирд╣реАрдВ? рдХреЛрдИ рддрд░реНрдХ рджреЗ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдкреБрд░рд╛рдиреЗ рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдХреЗ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд╕рдорд░реНрдерд┐рдд рдирд╣реАрдВ рд╣реЛрдиреЗ рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдЗрд╕рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдПрдВрдХрд░ рд▓рд┐рдВрдХ рдХреЛ рдЙрди рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдпрд╛ рдирд╣реАрдВ, рдЬреЛ рдЗрддрд┐рд╣рд╛рд╕ рдПрдкреАрдЖрдИ рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред

рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореБрдЭреЗ рд╕рдорд╕реНрдпрд╛ рдЖрддреА рд╣реИ, рдЕрдЧрд░ рдореИрдВ #/route1 рдкрд░ рд╣реВрдВ рддреЛ #/route1#anchor рдкрд░ рд╣реЛрдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИред рдпрд╣рд╛рдВ рдЙрд▓реНрд▓рд┐рдЦрд┐рдд рд╣реИрдХ (http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html) рдареАрдХ рд▓рдЧрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдЖрджрд░реНрд╢ рд╣реЛрдЧрд╛ рдпрджрд┐ рдпрд╣ "рдмрд╕ рдХрд╛рдо рдХрд┐рдпрд╛"ред рд╡реИрд╕реЗ рднреА рдпрджрд┐ $anchorScroll рд╣реИрдХ рд╕рдорд╛рдзрд╛рди рд╣реИ рддреЛ рдпрд╣ рдХрд╣рдирд╛ рдЕрдЪреНрдЫрд╛ рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рд╢рд╛рдпрдж рдХреЛрдИ рд╡реНрдпрдХреНрддрд┐ рджрд╕реНрддрд╛рд╡реЗрдЬрд╝реАрдХрд░рдг рдХреЛ рдЕрджреНрдпрддрди рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдпрд╣ рджрд░реНрд╢рд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐ рдкреБрд░рд╛рдиреЗ рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдХреЗ рд▓рд┐рдП рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рдХреИрд╕реЗ рд╣рд▓ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдпрд╣рд╛рдВ ( http://stackoverflow.com/a/15935517/2071612 ) рдПрдХ рд╢рд╛рдирджрд╛рд░ рд╕рдорд╛рдзрд╛рди рд╣реИред

BTW, рдореИрдВрдиреЗ $location.hash() рд╕реНрд╡рддрдВрддреНрд░ рд░реВрдк рд╕реЗ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рдорд░реНрдерди рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ PR (#9596) рд╕рдмрдорд┐рдЯ рдХрд┐рдпрд╛ рд╣реИред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

guyandtheworld picture guyandtheworld  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

jetta20162 picture jetta20162  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

butchpeters picture butchpeters  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ceymard picture ceymard  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

nosideeffects picture nosideeffects  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ