කෝණික-මාර්ගය සහ කෝණික- ui-router අතර වෙනස කුමක්ද?


1084

මගේ විශාල යෙදුම්වල AngularJS භාවිතා කිරීමට මම සැලසුම් කරමි . එබැවින් භාවිතා කිරීමට සුදුසු මොඩියුල සොයා ගැනීමට මම කටයුතු කරමින් සිටිමි.

අතර ඇති වෙනස කුමක්ද ngRoute (කෝණික-route.js) සහ UI-රවුටරය (කෝණික-UI-router.js) මොඩියුල?

බොහෝ ලිපි වල ngRoute භාවිතා කරන විට, මාර්ගය වින්‍යාස කර ඇත්තේ $ routeProvider සමඟ ය . කෙසේ වෙතත්, ui-router සමඟ භාවිතා කරන විට , මාර්ගය $ stateProvider සහ $ urlRouterProvider සමඟ වින්‍යාස කර ඇත.

වඩා හොඳ කළමනාකරණය සහ විස්තීරණතාව සඳහා මා භාවිතා කළ යුතු මොඩියුලය කුමක්ද?


11
1.4+ සහ 2.0 හි කෝණික නව රවුටරය ගැන සඳහන් නොකල යුතුය
Zach Lysobey

Answers:


1115

ui-router යනු තෙවන පාර්ශවීය මොඩියුලයක් වන අතර එය ඉතා බලවත් ය. එය සාමාන්‍ය ngRoute ට කළ හැකි සියල්ලට මෙන්ම අමතර කාර්යයන් රාශියකටද සහාය වේ.

NgRoute හරහා ui-router තෝරා ගැනීමට පොදු හේතු කිහිපයක් මෙන්න:

  • ui-router මඟින් කැදැලි දසුන් සහ නම් කරන ලද බහු දර්ශන සඳහා ඉඩ ලබා දේ . විශාල යෙදුම් සමඟ මෙය ඉතා ප්‍රයෝජනවත් වන අතර එහිදී ඔබට වෙනත් කොටස් වලින් උරුම වන පිටු තිබිය හැකිය.

  • ui-router මඟින් රාජ්‍ය නම් මත පදනම්ව ප්‍රාන්ත අතර ශක්තිමත් ආකාරයේ සම්බන්ධතාවයක් ඇති කර ගැනීමට ඔබට ඉඩ සලසයි. යූආර්එල් එක තැනකින් වෙනස් කිරීමෙන් ඔබ ඔබේ සබැඳි ගොඩනඟන විට එම තත්වයට සෑම සබැඳියක්ම යාවත්කාලීන ui-srefවේ. URL වෙනස් විය හැකි විශාල ව්‍යාපෘති සඳහා ඉතා ප්‍රයෝජනවත් වේ.

  • ප්‍රවේශ වීමට උත්සාහ කරන URL එක මත පදනම්ව ඔබේ මාර්ග ගතිකව නිර්මාණය කිරීමට ඉඩ දීම සඳහා සැරසිලි කරුවාගේ සංකල්පය ද ඇත. මෙයින් අදහස් කරන්නේ ඔබගේ සියලු මාර්ග අතින් නියම කිරීමට ඔබට අවශ්‍ය නොවන බවයි.

  • විවිධ ප්‍රාන්ත පිළිබඳ විවිධ තොරතුරු සිතියම් ගත කිරීමට සහ ප්‍රවේශ වීමට ප්‍රාන්ත ඔබට ඉඩ දෙන අතර ඔබට පහසුවෙන් රාජ්‍යයන් අතර තොරතුරු ලබා ගත හැකිය $stateParams.

  • ඔබට පහසුවෙන් හරහා ඔබේ සැකිලි තුළ UI මූලද්රව්යය (වත්මන් රාජ්ය සංචලනය අවධාරණය) වෙනස් කිරීම සඳහා ඔබ රාජ්ය රාජ්ය හෝ මව් දී නම් තීරණය කළ හැකි $stateUI-රවුටරය ඔබ එය පිහිටුවීම හරහා හෙළිදරව් හැකි විසින් ලබා $rootScopeමත run.

සාරාංශයක් ලෙස, ui-router වැඩි විශේෂාංග සහිත ngRouter වේ, තහඩු යටතේ එය බෙහෙවින් වෙනස් ය. මෙම අතිරේක විශේෂාංග විශාල යෙදුම් සඳහා ඉතා ප්‍රයෝජනවත් වේ.

වැඩි විස්තර:


134
සමස්තයක් ලෙස මෙය හොඳම පැහැදිලි කිරීම වේ, නමුත් එක් ප්‍රධාන කරුණක් සඳහා: "සමස්තයක් ලෙස, ui-router යනු වැඩි විශේෂාංග සහිත ngRouter වේ". එය ඊට වඩා බෙහෙවින් මූලික ය: ngRouteහුදෙක් URL මාර්ග වලට පාලකයන් සහ සැකිලි පැවරීමට ඔබට ඉඩ සලසයි, එහෙත් මූලික සාරාංශය ui.routerරාජ්‍යයන් වන අතර එය වඩා ප්‍රබල සංකල්පයකි.
නේට් අබේලේ

23
මෙම පිළිතුරේ ගොනුකරණයේ වෙනස පෙන්වා දීම සමහරුන්ට අදාළ විය හැකිය. මේ වන විට ngRoute: 35.9kB / 4.4kB / 2.5kB සහ ui-router: 162.9kB / 30.4kB / 11.6kB (unminified / minified / gzipped).
ඇලෙක්ස් රොස්

35
2015 දී 162kb ගැන අපි බරපතල ලෙස කනස්සල්ලට පත්ව සිටිනවාද?
කැට්ෆිෂ්

27
At කැට්ෆිෂ් නැත්තේ ඇයි? නරක අන්තර්ජාල සම්බන්ධතා ඇති ලෝකයේ බොහෝ ස්ථාන තිබේ, ඒ ගැන කරදර වීම ඉතා වැදගත් වේ!
කැසාලි

4
ftfrascaroli මම එකඟ නොවෙමි - පරිශීලකයෙකු පළමු වරට ඔබේ යෙදුම පූරණය කරන්නේ නම්, පිටු පැටවීමේ වේලාවන් ගාස්තු ඉහළ නැංවීමට දැඩි ලෙස සම්බන්ධ වේ . පිටුවට තවත් 130kB එකතු කිරීමට පෙර පිරිවැය / ප්‍රතිලාභය මම අනිවාර්යයෙන්ම සලකා බලමි.
ඇන්තනි මැනිං-ෆ්‍රැන්ක්ලින්

134

ngRoute යනු මීට පෙර AngularJS හරයේ කොටසක් වූ AngularJS කණ්ඩායම විසින් සකස් කරන ලද මොඩියුලයකි.

ui-router යනු රවුටර කිරීමේ හැකියාවන් වැඩි දියුණු කිරීම සහ වැඩි දියුණු කිරීම සඳහා AngularJS ව්‍යාපෘතියෙන් පිටත සාදන ලද රාමුවකි.

Ui-router ප්‍රලේඛනයෙන් :

AngularUI Router යනු AngularJS සඳහා වන රවුටින් රාමුවක් වන අතර එමඟින් ඔබේ අතුරු මුහුණතේ කොටස් රාජ්‍ය යන්ත්‍රයක් ලෙස සංවිධානය කිරීමට ඉඩ ලබා දේ. URL මාර්ග වටා සංවිධානය කර ඇති කෝණික හරයේ $ මාර්ග සේවාව මෙන් නොව, UI-Router රාජ්යයන් වටා සංවිධානය වී ඇති අතර, විකල්ප වශයෙන් මාර්ග මෙන්ම වෙනත් හැසිරීම් ද අමුණා ඇත.

නම් කරන ලද, කැදැලි සහ සමාන්තර දර්ශන වලට රාජ්‍යයන් බැඳී සිටින අතර, ඔබේ යෙදුමේ අතුරු මුහුණත ප්‍රබල ලෙස කළමනාකරණය කිරීමට ඔබට ඉඩ සලසයි.

මේ දෙකම වඩා හොඳ නැත, ඔබේ ව්‍යාපෘතිය සඳහා වඩාත් සුදුසු දේ තෝරා ගැනීමට ඔබට සිදුවනු ඇත.

කෙසේ වෙතත්, ඔබ ඔබේ යෙදුම තුළ සංකීර්ණ අදහස් දැක්වීමට අදහස් කරන්නේ නම් සහ "$ රාජ්ය" සංකල්පය සමඟ කටයුතු කිරීමට ඔබ කැමති නම්. Ui-router තෝරා ගැනීමට මම ඔබට නිර්දේශ කරමි.


1
FWIW මම පැය කිහිපයක් ගත කළේ angularjs සඳහා ui-router එකට එරෙහිව මගේ හිස ගසා දමමිනි. ලියකියවිලි ඉතා කණගාටුදායක තත්වයක පවතී, එය පැහැදිලිවම වසර ගණනාවක් තිස්සේ අතහැර දමා ඇත. වැදගත් මාර්ගෝපදේශකයන් සමඟ බිඳුණු සම්බන්ධතා, නිබන්ධනයේ වැරදි ලෙස නම් කරන ලද නූගට් පැකේජ, ඔබ එය නම් කරන්න. මෙම ගැටලුව මට තේරුම් ගැනීමට නොහැකි වීමෙන් පසුව මම අත්හැරියෙමි stackoverflow.com/questions/23585065/… (වෙනත් බොහෝ අය සමඟ). දැන් ngRoute අත්හදා බලමින් ...
UnionP

73

ngRoute යනු කෝණික හර මොඩියුලයක් වන අතර එය මූලික අවස්ථා සඳහා හොඳය. ඉදිරියට එන නිකුතුවලදී ඔවුන් වඩාත් ප්‍රබල අංග එකතු කරනු ඇතැයි මම විශ්වාස කරමි.

URL: https://docs.angularjs.org/api/ngRoute

Ui-router යනු ngRoute හි ගැටළු මඟහරවා ගන්නා දායක මොඩියුලයකි. ප්රධාන වශයෙන් කැදැලි / සංකීර්ණ දර්ශන.

URL: https://github.com/angular-ui/ui-router

Ui-router සහ ngRoute අතර සමහර වෙනස්කම්

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

රූප විස්තරය මෙහි ඇතුළත් කරන්න


52

ngRoute යනු මූලික AngularJS රාමුවේ කොටසකි.

ui-router යනු ප්‍රජා පුස්තකාලයක් වන අතර එය පෙරනිමි රවුටින් හැකියාවන් වැඩි දියුණු කිරීමට උත්සාහ කරයි.

Ui-router වින්‍යාස කිරීම / සැකසීම පිළිබඳ හොඳ ලිපියක් මෙන්න:

http://www.ng-newsletter.com/posts/angular-ui-router.html


35

NgRoute පරමාදර්ශය තුළ ක්‍රියාත්මක කර ඇති කැදැලි දර්ශන ක්‍රියාකාරිත්වය භාවිතා කිරීමට ඔබට අවශ්‍ය නම්, කෝණික-මාර්ග-කොටස උත්සාහ කරන්න - එය ප්‍රතිස්ථාපනය කිරීමට වඩා ngRoute දීර් extend කිරීම අරමුණු කරයි.


16
ඔබේ පිළිතුරේ අදාළත්වය මට නොපෙනේ. කෝණික මාර්ගය සහ කෝණික- ui-router අතර ඇති වෙනස්කම් ගැන කතුවරයා විශේෂයෙන් විමසීය. එසේම, ඔබේම පුස්තකාල ප්‍රවර්ධනය කිරීමේදී ඔබ මැවුම්කරු බව ප්‍රතික්ෂේප කිරීම ප්‍රයෝජනවත් වනු ඇත.
vally

23
අදාළත්වය සරලයි: කෝණික-මාර්ගය + කෝණික-මාර්ගය-කොටස = කෝණික- ui-router. ඉතින්, වෙනස වන්නේ: කෝණික- ui-router - angular-route = කෝණික-මාර්ග-කොටස :)
art

1
මම හිතන්නේ එය වලංගු පිළිතුරකි. angular-route-segment.com අනිවාර්යයෙන්ම ui-router භාවිතා කිරීමට අවශ්‍ය නොවන අයට හොඳ තේරීමක් වේ. එසේම, මෙම පුස්තකාල නිර්මාණය කිරීමට මිනිසුන් වෙහෙස මහන්සි වී වැඩ කරයි, එය ප්‍රවර්ධනය කිරීම නරක දෙයක් නොවේ
phil

19

සාමාන්‍යයෙන් ui-router රාජ්ය යාන්ත්‍රණයක් මත ක්‍රියා කරයි ... එය පහසු උදාහරණයකින් තේරුම් ගත හැකිය:

සංගීත පුස්තකාලයක (..ගානා හෝ සවාන් හෝ වෙනත් ඕනෑම) විශාල යෙදුමක් අප සතුව ඇතැයි කියමු. පිටුවේ පතුලේ, ඔබට සංගීත වාදකයක් ඇති අතර එය පිටුවේ සියලුම තත්වය හරහා බෙදා ගැනේ.

දැන් අපි කියමු ඔබ වාදනය කිරීමට ගීත කිහිපයක් මත ක්ලික් කරන්න. මෙම අවස්ථාවේදී, සම්පූර්ණ පිටුව නැවත පූරණය කිරීම වෙනුවට වෙනස් විය යුත්තේ එම සංගීත වාදක තත්වය පමණි. එය පහසුවෙන් ui-router මගින් හැසිරවිය හැකිය.

NgRoute හි සිටියදී අපි දර්ශනය සහ පාලකය අමුණන්නෙමු.


2
මෙය කළ හැකි අතර සේවා හා කර්මාන්තශාලා භාවිතා කළ යුතුය. මෙම පැකේජය භාවිතා කිරීම යනු කෝණික මාර්ග, ප්‍රාන්ත සහ රටා පිළිබඳ අවබෝධයක් නොමැතිකමයි. රාජ්යයන් හසුරුවනු ලබන්නේ යූආර්එල් විසිනි, ඔබට යෙදුම විශේෂිත තත්වයක බෙදා ගැනීමට අවශ්ය නම් එය නිවැරදිය, එපමණක් නොව සේවා දත්ත යාවත්කාලීන කිරීමක් හෝ යූආර්එල් පරාමිතියක් මත ප්රතික්රියා කරන එකම දෘෂ්ටි කෝණයකින් ඔබට බහු පාලකයන් සිටිය හැකිය. ui රවුටරය දේවල් අවුල් කර කෝණික රටාව සම්පූර්ණයෙන්ම විනාශ කරයි.
පැබ්ලෝ එසකියෙල් ලියොන්

මම සම්පූර්ණයෙන්ම එකඟයි. මෙම රාජ්‍ය යන්ත්‍රය භාවිතා කිරීමට අවශ්‍ය තැන තවමත් පැහැදිලි කිරීමක් සොයාගත නොහැක
kushalvm

18

කෝණික 1.x

ng-route :

මාර්ගගත කිරීම සඳහා කෝණික ජේඑස් කණ්ඩායම විසින් ng-route සංවර්ධනය කර ඇත.

ng-route: url (පිහිටීම) පදනම් කරගත් මාර්ගගත කිරීම.

උදා:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

ui-route :

තෙවන පාර්ශවීය මොඩියුලය මගින් ui-router සංවර්ධනය කර ඇත.

ui-router: රාජ්ය පාදක රවුටින්

උදා:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> ui-router මඟින් කැදැලි දසුන් ලබා ගත හැකිය

-> ui-router ng-route වලට වඩා බලවත් ය

ng-router , ui-router


13

ngRoute යනු කෝණික කණ්ඩායම විසින් සාදන ලද මොඩියුලයකි, එය මූලික සේවාදායක පාර්ශවීය මාර්ගගත කිරීමේ ක්‍රියාකාරිත්වය සපයයි. මෙම මොඩියුලය මාර්ගගත කිරීම සඳහා තරමක් ප්‍රබල පදනමක් සපයන අතර, මෙම බ්ලොග් සටහනේ නිදසුනක් ලෙස solid න රවුටින් ක්‍රියාකාරිත්වය ලබා දීම සඳහා ඉතා පහසුවෙන් ගොඩනගා ගත හැකිය (වෝඩ් බෙල් සහ කතුවරයා වන බෙන් නාඩෙල් අතර අදහස් දැක්වීමේ මාවත කියවීමට වග බලා ගන්න - ඒවා a කෝණික වාසි කිහිපයක්)

ui-router යූආර්එල් කේන්ද්‍රීය මාර්ගවල සිට යෙදුම් "තත්වයන්" වෙත අවධානය යොමු කරයි, එය යූආර්එල් තුළ පිළිබිඹු විය හැකිය හෝ නොවිය හැකිය.

Ui-router විසින් එකතු කරන ලද මූලික ලක්ෂණ වන්නේ කැදැලි සහිත තත්වයන් සහ නම් කළ අදහස් ය.

යෙදුමේ විවිධ කොටස් සඳහා පාලක තර්කනය වෙන් කිරීමට නෙස්ටඩ් ජනපද ඔබට ඉඩ දෙයි. මේ සඳහා ඉතා සරල උදාහරණයක් වනුයේ ඉහළින් ප්‍රාථමික සංචාලනය සහිත යෙදුමක්, වම් පසින් ද්විතියික සංචාලන ලැයිස්තුවක් සහ දකුණු පසින් අන්තර්ගතය. කැදැලි සහිත රාජ්‍යයන් නොමැතිව, තනි පාලකයෙකුට සාමාන්‍යයෙන් ද්විතීයික සංචලනය මෙන්ම අන්තර්ගතය සඳහා දර්ශන තර්කනය හැසිරවිය යුතුය. නෙස්ටඩ් රවුටින් මඟින් මෙම කරුණු වෙන් කිරීමට ඔබට ඉඩ සලසයි.

නම් කරන ලද දර්ශන ui-router හි තවත් අතිරේක ලක්ෂණයකි. NgRoute සමඟ, ඔබට ඇත්තේ පිටුවක තනි ngView විධානයක් පමණක් වන අතර, ui-router හි නම් කර ඇති අදහස් සමඟ ඔබට බහු ui-view විධානයන් නියම කළ හැකි අතර, පසුව එක් එක් ප්‍රාන්තයට නම් දර්ශනවල අච්චුවට සහ පාලකයට බලපෑම් කළ හැකිය. මේ සඳහා ඉතා සරල උදාහරණයක් වනුයේ ඔබගේ යෙදුමේ ප්‍රධාන අන්තර්ගතය ප්‍රාථමික දර්ශනය වීමත්, පසුව වෙනම ui-view එකක් වන පාදක තීරුවක් තිබීමත්ය. මෙම තත්වය තුළ, පාදකයේ පාලකයට තවදුරටත් රාජ්‍ය / මාර්ග වෙනස්වීම් වලට ඇහුම්කන් දිය යුතු නැත.

NgRoute සහ UI-රවුටරය සඳහා හොඳ සංසන්දනය මත සොයා ගත හැකි කෙසේවත් වැඩසටහන.

දේවල් වඩාත් අවුල් සහගත කිරීම සඳහා, කෝණික කණ්ඩායම 1.5 සහ 2.0 අනුවාද සඳහා නිකුත් කිරීමට අපේක්ෂා කරන නව "නිල" රවුටින් මොඩියුලය ගැන විමසිල්ලෙන් සිටින්න. මෙය ngRoute මොඩියුලය ප්‍රතිස්ථාපනය කරනු ඇත. නව රවුටර් මොඩියුලය සඳහා වන වර්තමාන ලියකියවිලි මෙන්න - ක්‍රියාත්මක කිරීම තවමත් අවසන් කර නොමැති බැවින් මෙම පළ කිරීම තරමක් විරල ය. මෙම මොඩියුලය සැබවින්ම නිකුත් කරන්නේ කවදාද යන්න පිළිබඳ වැඩි විස්තර සඳහා මෙතැනින් නරඹන්න .


11

ngRoute යනු මූලික මාර්ගගත කිරීමේ පුස්තකාලයකි, එහිදී ඔබට ඕනෑම මාර්ගයක් සඳහා එක් දර්ශනයක් සහ පාලකයක් පමණක් නියම කළ හැකිය.

Ui-router සමඟ, ඔබට සමාන්තරව හා කැදැලි සහිත විවිධ අදහස් දැක්විය හැකිය. එබැවින් ඔබගේ යෙදුමට කිසියම් ආකාරයක සංකීර්ණ මාර්ගගත කිරීමක් / අදහස් අවශ්‍ය නම් (හෝ අනාගතයේදී අවශ්‍ය විය හැකිය), පසුව ui-router සමඟ ඉදිරියට යන්න.

AngularUI Router සඳහා මෙය ආරම්භක මාර්ගෝපදේශයයි.


10

ඔබ දැනගත යුතු මූලික දෙය: ng-router භාවිතය $location.path()සහ ui-router භාවිතය$state.go

සියලුම අංග අපට විවේක ගන්න.


8

ui රවුටරය ඔබේ ජීවිතය පහසු කරයි! AngularJS යෙදුම ඔබගේ යෙදුම් වලට එන්නත් කිරීමෙන් ඔබට එය එකතු කළ හැකිය ...

ng-route මූලික AngularJS හි කොටසක් ලෙස පැමිණේ, එබැවින් එය වඩාත් සරල වන අතර ඔබට අඩු විකල්ප ලබා දෙයි ...

Ng-route වඩා හොඳින් තේරුම් ගැනීමට මෙහි බලන්න: https://docs.angularjs.org/api/ngRoute

එසේම එය භාවිතා කරන විට, භාවිතා කිරීමට අමතක නොකරන්න: ngView ..

ng-ui-router වෙනස් නමුත්:

https://github.com/angular-ui/ui-router නමුත් ඔබට තවත් විකල්ප ලබා දෙයි ....


6

AngularUI Router යනු AngularJS සඳහා වන රවුටින් රාමුවක් වන අතර එමඟින් ඔබේ අතුරු මුහුණතේ කොටස් රාජ්‍ය යන්ත්‍රයක් ලෙස සංවිධානය කිරීමට ඉඩ ලබා දේ. URL මාර්ග වටා සංවිධානය කර ඇති කෝණික ngRoute මොඩියුලයේ $ මාර්ග සේවාව මෙන් නොව, UI-Router රාජ්යයන් වටා සංවිධානය වී ඇති අතර, විකල්ප වශයෙන් මාර්ග මෙන්ම වෙනත් හැසිරීම් ද අමුණා ඇත.

https://github.com/angular-ui/ui-router


4

ngRoute යනු මීට පෙර කෝණික හරයේ කොටසක් වූ Angular.js කණ්ඩායම විසින් වැඩි දියුණු කරන ලද මොඩියුලයකි.

ui-router යනු රවුටර ශක්‍යතා වැඩි දියුණු කිරීම සහ වැඩි දියුණු කිරීම සඳහා Angular.js ව්‍යාපෘතියෙන් පිටත සාදන ලද රාමුවකි.


3

1- ngRoute කෝණික කණ්ඩායම විසින් සංවර්ධනය කරන අතර ui-router තෙවන පාර්ශවීය මොඩියුලයකි. 2- ngRoute මාර්ග URL මත පදනම්ව රවුටින් ක්‍රියාත්මක කරන අතර ui-router යෙදුමේ තත්වය මත පදනම්ව රවුටින් ක්‍රියාත්මක කරයි. 3- ui-router මඟින් ng-route මගින් සපයන සෑම දෙයක්ම සහ කැදැලි සහිත තත්වයන් සහ නම් කරන ලද බහු දර්ශන වැනි අමතර විශේෂාංග සපයයි.


0

ng-View(AngularJS කණ්ඩායම විසින් වැඩි දියුණු කරන ලදි) භාවිතා කළ හැක්කේ පිටුවකට එක් වරක් පමණක් වන අතර ui-View(තෙවන පාර්ශවීය මොඩියුලය) පිටුවකට කිහිප වතාවක් භාවිතා කළ හැකිය.

ui-View එබැවින් හොඳම විකල්පය වේ.

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.