±à¼ÍƼö: |
±¾ÎÄÀ´×Ôwww.codeproject.com£¬AngularJS
ÊÇÒ»¸ö JavaScript¿ò¼Ü£¬ÊÇÒ»¸ö JavaScript ±àдµÄ¿â£¬±¾ÎÄÒâͼÈÃÎÒÃÇÖªÏþwebÓ¦ÓõÄδÀ´¾ÍÔÚÑÛǰ£¬×ܽáÁËÔÚ³ÉÊìµÄ¿Í»§¶ËMVC¿ò¼ÜϵĶԱȡ£ |
|
AngularJS
AngularJSÊÇwebÓ¦ÓõÄÏÂÒ»¸ö¾ÞÍ·¡£
AngularJSÈç¹ûΪ´´½¨webÓ¦ÓöøÉè¼Æ£¬ÄÇËü¾ÍÊÇHTMLµÄÌ×·ÁË¡£¾ßÓÐÊý¾Ý°ó¶¨, MVW,
MVVM, MVC, ÒÀÀµ×¢ÈëµÄÉùÃ÷ʽģ°åºÍ³öÉ«µÄ¿É²âÊÔÐÔ¶¼ÊÇÓô¿¿Í»§¶Ë JavaScriptÀ´ÊµÏÖµÄ!
AngularJS ÊÇÒ»¸ö´´½¨¸»¿Í»§¶ËÓ¦ÓõÄJavaScript MVC¿ò¼Ü£¬Ëü×éÖ¯Á¼ºÃ£¬¾¹ýÑϸñ²âÊÔ,¶à¹¦ÄÜ£¬Ç¿´ó²¢ÇÒÊ®·ÖÁé»î¡£ÄãÈÔÈ»ÐèÒª¾ßÓзþÎñ¶Ëºǫ́£¬µ«´ó¶àÊýµÄÓû§½»»¥Âß¼½«ÓÅÑŵطŵ½¿Í»§¶ËÉÏ´¦Àí¡£
AngularJSÊÇÒ»¸ö¿ªÔ´µÄwebÓ¦Óÿò¼Ü£¬ÓÉGoogleºÍÉçÇø½øÐÐά»¤£¬Ëü¿ÉÒÔ´´½¨µ¥Ò³µÄÓ¦ÓóÌÐò£¬Ò»¸öÒ³ÃæµÄÓ¦Óýö½öÐèÒªHTML,CSSºÍJavaScriptÔÚ¿Í»§¶Ë¡£ËüµÄÄ¿±êÊÇÔöÇ¿Ò³ÃæµÄÄ£ÐÍ-ÊÓͼ-¿ØÖÆ£¨MVC£©µÄ¹¦ÄÜ£¬Îª¼ò»¯¿ª·¢ºÍ²âÊÔ¡£
ËüÊÇÒ»¸ö½¨Á¢ÔÚºñ¿Í»§¶ËµÄÇåˬµÄÐÂÄ£¿éwebÓ¦ÓóÌÐò¡£Ò»¸ö½¡×³µÄ¿ò¼Ü½¨Á¢ÔÚÉÌÒµÓ¦ÓÃÍøÂçÉÏ¡£Ëü¹ÄÀø×î¼Ñʵ¼ù£¬¿ª·¢Ä£ÐͺͿª·¢¸ßÖÊÁ¿µÄ¿Éά»¤µÄÄ£¿é»¯Ó¦ÓóÌÐò¡£ËüµÄÍŶÓÊÇÊÀ½çÒ»Á÷µÄ£¬ÉçÇøÊǼ«Æä³öÉ«µÄ£¬Ëü½áºÏ×î°ôµÄ¹¦ÄÜÀ´´´½¨webÓ¦Óá£
AngularJS ÔÊÐíÄã±àд¿Í»§¶ËµÄwebÓ¦ÓóÌÐò£¬Èç¹ûÄãÓÐÒ»¸öÖÇÄÜä¯ÀÀÆ÷¡£ËüÔÊÐíÄãʹÓúÃÓõľÉʽµÄHTML×÷ΪÄãµÄÄ£°åÓïÑÔ£¬ÔÊÐíÄãÀ©Õ¹HTMLÓï·¨À´ÇåÎú¡¢¼ò½àµÄ±í´ïÄãµÄÓ¦ÓÃ×é¼þ¡£Ëüͨ¹ýË«ÏòÊý¾Ý°ó¶¨Ê¹ÄãµÄUI£¨ÊÓͼ²ã£©ÓëÄãµÄJavaScript¶ÔÏó£¨Ä£ÐͲ㣩µÄÊý¾Ý×Ô¶¯Í¬²½¡£°ïÖúÄã¸üºÃµÄ¹¹½¨ÄãµÄÓ¦Óú͸ü·½±ãµÄ²âÊÔ£¬AngularJs¸æËßä¯ÀÀÆ÷ÈçºÎÒÀÀµ×¢ÈëºÍ¿ØÖÆ·´×ª¡£Ëü°ïÖú¸ÄÁ¼ÁËÔÊÐíÒì²½»Øµ÷ºÍÑÓ³Ù¡¢Ê¹¿Í»§¶Ëµ¼º½ºÍÉî²ãÁ´½ÓʹÓùþÏ£bang¸ñʽµØÖ·ºÍHTML5
pushStatÓë·þÎñ¶ËͨПüÈÝÒס£
Angular ÌṩÁË£º
½á¹¹Ä£Ð͵ÄÒýÈ루MVC,SPAµÈ£©
ÔöÇ¿HTMLÖ§³ÖÐÂÌØÐÔ¡£
±ÜÃâÖ±½ÓDOM²Ù×÷À´±ÜÃâºÜÄѵ÷ÊÔ²»¿É×·×ٵĴúÂë¡£
°üº¬µÍñîºÏºÍ¸ß¿É¸´ÓÃÐÔ
Ó¦ÓóÌÐòÄÚ²¿¹æÔò²âÊÔ
ÊÓͼģ°å¸ü½Ó½ü·þÎñÆ÷¶ËÄ£°å
AngularJS ÊÇ»ùÓÚÉùÃ÷ʽ±à³Ìģʽ ÊÇÓû§¿ÉÒÔ»ùÓÚÒµÎñÂß¼½øÐпª·¢. ¸Ã¿ò¼Ü»ùÓÚHTMLµÄÄÚÈÝÌî³ä²¢×öÁËË«ÏòÊý¾Ý°ó¶¨´Ó¶øÍê³ÉÁË×Ô¶¯Êý¾Ýͬ²½»úÖÆ.
×îºó, AngularJS Ç¿»¯µÄDOM²Ù×÷ÔöÇ¿Á˿ɲâÊÔÐÔ.
Éè¼Æ³õÖÔ:
½«£Ä£Ï£Í²Ù×÷´ÓÓ¦ÓÃÖнâñî. ÔöÇ¿Á˿ɲâÊÔÐÔ¡£
Ó¦ÓòâÊÔÐÔÓ뿪·¢´úÂëͬÑùÖØÒª. ²âÊԵĸ´Ôӳ̶ÈÓë´úÂëµÄÉè¼Æ½á¹¹Ç¿Ïà¹Ø.
¿Í»§¶ËÓë·þÎñ¶Ë½âñî. ʵÏÖÁ˲¢·¢´¦Àí»úÖÆÔöÇ¿ÁË´úÂ븴ÓÃÐÔ.
ÔÚ¿ª·¢È«¹ý³ÌÖÐ×÷³öÖ¸Òý: ´Ó£Õ£Éµ½ÒµÎñÂß¼×îÖÕµ½²âÊÔ»·½Ú.
¼Ü¹¹

AngularJSµÄ¹Ø¼üÌØÐÔ
¿É²âÊÔÐÔ£¬ÒÀÀµ×¢È룬Âß¼/ÊÓͼ²ãµÄ·ÖÀ룬»¹ÓÐÉè¼ÆÕߺͿª·¢ÕßÖ®¼äµÄе÷ºÏ×÷ÊÇÒ»¸ö¿ª·¢Õß¶ÔÒ»¸ö¿ò¼Ü×îÆÚ´ýµÄ¼¸Ñù¶«Î÷¡£Angular¾ø¶ÔÂú×ãÉÏÊöÒªÇó¡£ÔÚJSÁìÓò£¬AngularÄÜÊÊÅäÕâдÁîÈ˶úĿһеÄÒªÇó¿´ÆðÀ´ÊǶàô¾ªÈË¡£

Ë«ÏòÊý¾Ý°ó¶¨:
Êý¾Ý°ó¶¨¿ÉÄÜÊÇAngularJSÀï×î¿á£¬×îʵÓõŦÄÜ¡£ Ëü½«½ÚÊ¡Äã´óÁ¿µÄÑù°å´úÂë±àд¡£ Ò»¸öµäÐ͵ÄWebÓ¦ÓóÌÐò¿ÉÒÔ°üº¬¶à´ï80£¥µÄ´úÂë»ù´¡£¬Èç±éÀú£¬²Ù×÷£¬²¢ÌýÈ¡Á˼àÌýDOM¡£
Êý¾Ý°ó¶¨Ê¹µÃ²»ÓñàдÕâЩ´úÂ룬ÕâÑùÄã¾Í¿ÉÒÔרעÓÚÄãµÄÓ¦ÓóÌÐò¡£
¿¼ÂÇÏÂÄãµÄÓ¦ÓóÌÐòµÄÄ£ÐÍΪµ¥Ô´ÐÅÈεġ£ ÄãµÄÄ£Ð;ÍÊÇÄãÈ¥¶ÁÈ¡»ò¸üÐÂÓ¦ÓóÌÐòÖеÄÈκζ«Î÷µÄµØ·½¡£ÕâÖÖͶÉäÊÇÎÞ·ìµÄ£¬²»Ðè·ÑÄãÒ»±øÒ»×ä¡£AngularJSË«ÏòÊý¾Ý°ó¶¨»á´¦ÀíDOMºÍÄ£ÐÍÖ®¼äµÄͬ²½£¬·´Ö®ÒàÈ»¡£

Ä£°å
ÔÚAngularJS, Ä£°å¾ÍÊÇÔÉúµÄHTML. ×öÁË»ùÓÚÊÓͼµÄÔöÇ¿.
ÕâÑù×ö×î´óµÄºÃ´¦ÔÚÓÚÀ½üÁË¿ª·¢ÓëÉè¼ÆÈËÔ±µÄ¹¤×÷Á÷. Éè¼ÆÈËÔ±²Ù×÷£È£Ô£Í£ÌÍê³ÉÉè¼Æ£¬¿ª·¢Ö±½ÓÔڣȣԣͣÌÉÏ×÷ÏàÓ¦µÄ¹¦ÄÜ¿ª·¢.
<div ng-controller="AlbumCtrl">
<ul> <li ng-repeat="image in
images"> <img ng-src="{{image.thumbnail}}"
alt="{{image.description}}">
</li> </ul>
</div> |
MVC
AngularJSÒýÈëÁËÈí¼þÉè¼ÆµÄ£Í£Ö£Ãģʽ.Õâ¶ÔÓÚʹÓÃÕßÀ´ËµÈÊÕß¼ûÈÊÖÇÕß¼ûÖÇ. AngularJS²¢²»ÊÇÍêÈ«µÄ£Í£Ö£Ã¶øÊÇ
MVVM (Model-View-ViewModel).
Ä£ÐÍ
model¾ÍÊÇÊý¾ÝÄ£ÐÍ ¾ÍÊÇһЩJavaScript ¶ÔÏó. û±ØÒª´Ó¸¸Àà¼Ì³Ð£¬´úÀí°ü×°Òà»òÊÇʹÓÃgetter/setterÀ´Ê¹ÓÃ.
ʹÓÃvanilla JavaScript Ê®·Ö·½±ã±ã½Ý.
ÊÓͼ
ÊÓͼ¾ÍÊÇÌá¹©ÌØÊâÊý¾Ý»ò·½·¨À´Ö§³ÖÌØ¶¨³¡¾°µÄ¶ÔÏó.
ÊÓͼ¶ÔÏó¾ÍÊÇ $scope. $scope¾ÍÊǸö¼òµ¥µÄjs¶ÔÏó£¬ÌṩһЩ¼òµ¥µÄ£Á£Ð£É¼à¿ØÆä״̬.
ÒµÎñ¿ØÖÆ
¿ØÖÆÆ÷Æðµ½ÉèÖà $scope¶ÔÏóµÄ³õʼ״̬¼°ºóÐøµÄ¶¯×÷¹ØÁª¡£
Ò³Ãæ
ÔÚ.AngularJS´¦ÀíÍêÏà¹ØµÄÒµÎñÂß¼½øÐУȣԣͣÌģʽµÄչʾ¡£
ÕâÑù¾Íµì¶¨ÁËÓ¦Óõļܹ¹. $scope¶ÔÏóÓµÓÐÊý¾ÝµÄÒýÓùØÏµ, ¿ØÖÆÆ÷¶¨ÒåÐÐΪ, ÊÓͼ´¦ÀíÒ³ÃæÕ¹Ê¾²¼¾ÖÒÔ¼°ÏàÓ¦µÄ´¦ÀíÌø×ª.

ÒÀÀµ×¢Èë
AngularJS ÌṩÁËÒÀÀµ×¢ÈëµÄ×Óϵͳ°ïÖú¿ª·¢ÈËÔ±½µµÍ¿ª·¢¸´ÔÓ¶È£¬Ìá¸ß²âÊÔЧÂÊ.ÒÀÀµ×¢È뽫ҵÎñ´úÂëÓëÅäÖÃʵÏÖ½âñÌá¸ßÁË´úÂëµÄ¿É²âÐÔ.
ÓÐÁˣģÉÎÞÐèÿ´Î¶¼´´½¨Ö¸¶¨µÄ¶ÔÏóÒÀÀµ¹ØÏµ£¬¶øºóÃæÅäÖÃ. ÕâÑù¾ÍÄܰ´Ðè·ÖÅä¶øÎÞÐè×Ô¼ºÖƶ¨»òÊDzéÕÒ.
¾ÍÏñҪ˵һ¾ä"Hey I need X', £Ä£É¾Í»á°ïÄã´´½¨²¢·¢Ë͸øÄã.
²ÉÓÃÒÀÀµ×¢ÈëºóÄÜÌåÑéµ½µÄºÃ´¦Ö÷Òª°üÀ¨:
´úÂë¸üÒ×ÓÚά»¤¡£
API¸üΪ¼òÁ·ºÍ³éÏó¡£
´úÂë¸üÒ×ÓÚ²âÊÔ¡£
´úÂë¸ü¼ÓÄ£¿é»¯¡¢¿É¸´ÓÃÐÔ¸üÇ¿¡£

Ö¸Áî
Ö¸Áî¿ÉÒÔ±»ÓÃÀ´´´½¨×Ô¶¨ÒåµÄHTML±êÇ©£¬ÕâЩ±êÇ©¿ÉÒÔÓÃ×÷еÄ×Ô¶¨ÒåµÄ¿Ø¼þ¡£ËüÃÇÒ²¿ÉÒÔÓÃÀ´"äÖȾ"ÓÐÒ»¶¨ÐÐΪµÄÔªËØ£¬Ò²¿ÉÒÔÒÔһЩÓÐȤµÄ·½Ê½À´²Ù×÷DOMÊôÐÔ¡£Ò»¸öÖ¸Áî¾ÍÊÇÒ»¸öÄÜÒýÈëÐÂÓï·¨µÄ¶«Î÷¡£°Ñ·ÖÀëµÄ×é¼þ×éºÏ³ÉÒ»¸ö×é¼þ£¬ÕâÖÖ´´½¨Ó¦Óõķ½Ê½½«Ê¹µÃÌí¼Ó¡¢Ð޸ĺÍɾ³ýÒ³Ãæ¹¦ÄܱäµÃÒì³£¼òµ¥¡£Ö¸ÁîÊÇAngularJSµÄÒ»¸ö·Ç³£Ç¿´óÇÒ¶ÀÓеÄÌØÐÔ¡£
´Ó¸ü¸ßµÄ²ã´Î˵, DOM ÔªËØÉϵÄÖ¸Áî (ÏñÊÇÊôÐÔ£¬ÔªËØÃû£¬×¢ÊÍ»òÊÇ CSS ) µÈ¸ø AngularJS's
HTML ±àÒëÆ÷´«µÝµÄÊý¾Ý($compile) ´Ó¶ø´«µÝÖ¸¶¨µÄ¹¦Äܵ½£Ä£Ï£ÍÔªËØ»òÊÇ×ÓÔªËØ¡£
Angular ÓкܶàÕâÑùµÄÄÚÖÃÖ¸ÁÏñÊÇ ngBind, ngModel, ºÍngView.Y»¹ÄÜ×Ô¶¨ÒåÖ¸Áµ±AngularÆô¶¯ºóHTML±àÒëÆ÷¾Í»á×Ô¶¯½¨Á¢£Ä£Ï£ÍÔªËØµÄÖ¸ÁîÓ³Éä.
²âÊÔ
AngularJS Òâʶµ½·²ÊÇjsдµÄ´úÂëÐèÒª¼ÓÇ¿²âÊÔ. ÕâÔÚ AngularJS Éè¼ÆÖ®³õ¾ÍÓÐÁË,
ÓÚÊÇAngularµÄ¿É²âÊÔÐÔ²»ÑÔ¶øÓ÷.
JSÊǽâÊÍÐԵĶ¯Ì¬ÓïÑÔ£¬Éè¼ÆÏàÓ¦µÄ²âÊÔ¾ö²»¿ÉСêï.
AngularJS ÍêÈ«»ùÓڿɲâµÄ¸ù»ùÉè¼Æ³öÀ´µÄ. ËüÌṩÁ˶˵½¶ËµÄµ¥Ôª²âÊÔ. APIÎĵµ¾ÍÊÇÏêϸµÄ²âÊÔ¸²¸Ç˵Ã÷.
AngularJS Bootstrap Process

ѧϰÇúÏß
¸Õ¿ªÊ¼Ñ§Augular¾õµÃ¿ª·¢Ó¦ÓÃÐèÒªÓÐÏ൱µÄ±à³Ì»ù´¡. ²»µÃ²»ËµÕâȷʵÊÇÒ»¿îÁ˲»ÆðµÄ¿ª·¢¿ò¼Ü£¬ËüÒªÇ󿪷¢ÈËÔ±Éè¼ÆµÍñîºÏºÍ¿Éά»¤µÄÓ¦ÓÃ.
ʹÓÃAngularJS µÄ¸´ÔӶȾÍÏñʹÓÃPHP£¬Ruby on RailsµÈµÈ, ¶¼ÐèÒª´¦ÀíÒÀÀµ×¢È룬·ÓÉ£¬ÖµÓòµÈµÈ.
ÕâÒ²²»ÊÇʲôм¼ÊõÁË. AngularÖ»ÊÇ·¢Ñï¹â´óÁË.

JS MVC frameworks

MVC (Ä£ÐÍ-ÊÓͼ-¿ØÖÆÆ÷) ÊÇÒ»Ì×Éè¼ÆÄ£Ê½£¬¿ÉÒÔ·Ö²ãÉè¼ÆÓ¦ÓÃ. ½«Êý¾Ý(Ä£ÐÍ) ÓëÓû§ÊÓͼ (ÊÓͼ)½âñî,
ͨ¹ýÖÐ¼ä¿ØÖÆÆ÷ (Controllers) ´¦ÀíÒµÎñÂß¼£¬ Óû§ÊäÈëÒÔ¼°ÏàÓ¦µÄÂß¼Ìø×ª. ÏÖ´úJS¿ò¼ÜÌṩÁ˼òÒ׵IJÙ×÷ÒÔ¼°SoC
(ÒµÎñ·ÖÀë) ¸üºÃµÄʵÏÖÁËMVC .
MVC ¶ÔÓÚJSÓкܶàºÃ´¦¡ª Ìá¸ßÁ˸߿ɿ¿ÐԵĴúÂë. Òѱ»ºÜ¶àÓïÑÔ´óÁ¿²âÊÔÑéÖ¤¹ý£¬¾ßÓи߿ɿ¿ÐÔ.
MVC ʵÏÖµÄÈý²ã½á¹¹:
Ä£ÐÍ: ÊÇÓ¦ÓóÌÐòÖÐÓÃÓÚ´¦ÀíÓ¦ÓóÌÐòÊý¾ÝÂß¼µÄ²¿·Ö¡£
¡¡¡¡Í¨³£Ä£ÐͶÔÏó¸ºÔðÔÚÊý¾Ý¿âÖдæÈ¡Êý¾Ý.
ÊÓͼ: ÊÇÓ¦ÓóÌÐòÖд¦ÀíÊý¾ÝÏÔʾµÄ²¿·Ö¡£
¡¡¡¡Í¨³£ÊÓͼÊÇÒÀ¾ÝÄ£ÐÍÊý¾Ý´´½¨µÄ.
¿ØÖÆ: ÊÇÓ¦ÓóÌÐòÖд¦ÀíÓû§½»»¥µÄ²¿·Ö¡£
¡¡¡¡Í¨³£¿ØÖÆÆ÷¸ºÔð´ÓÊÓͼ¶ÁÈ¡Êý¾Ý£¬¿ØÖÆÓû§ÊäÈ룬²¢ÏòÄ£ÐÍ·¢ËÍÊý¾Ý.

JavaScript ¡®MVC¡¯¿ÉÒÔ°ïÖú¹¹½¨ÎÒÃǵĴúÂ룬µ«¾¡ÐÅÊé²»ÈçÎÞÊé. ÓÐЩ¿ò¼Ü°Ñ¿ØÖÆÆ÷·ÅÔÚÊÓͼģʽ(±ÈÈç
Backbone.js) ÓÐЩ¿ò¼ÜÈ«²¿»ìÔÚÒ»ÆðʹÓÃ. ³ý´ËÍ⻹ÓÐÆäËûµÄMVCģʽ£¬ÏñÊÇ MVP (Model-View-Presenter)
and MVVM (Model-View ViewModel). ¼´±ãÊÇMVCÉè¼ÆÄ£ÐÍ, ²»Í¬µÄÓïÑÔÒ²Óв»Í¬µÄʵÏÖ·½Ê½.
ÏñÊÇ, ÓÐЩMVCʵÏÖ»áÓÐ×Ô¼ºµÄÊÓͼ±ä¸ü¿ØÖÆÆ÷Òà»òÊÇ¿ØÖÆÆ÷ÊÓͼ. ÕâЩ¿ò¼Ü±»³ÆÎª MV* ¿ò¼Ü, Òâζ×ÅÄã»áÓÐÄ£ÐÍ£¬ÊÓͼµ«¸ü»áÓÐÆäËûµÄ²¿·Ö.
ºÜ³¤Ò»¶Îʱ¼ä AngularJS ÊǺܱê×¼µÄ MVC (»òÕß˵ÔÚ¿Í»§¶ËʵÏÖÕâÒ»¿é),µ«ÔÚºóÀ´Ò»¶Îʱ¼äÄÚËæ×Å´úÂëÖØ¹¹ºÍAPIµÄÖØÐ´£¬ÏÖÔÚ¸üÊÇ
MVVMģʽÁË ¨C $scope ¶ÔÏó±»ÈÏΪÊÇÊÓͼģÐÍÈ»ºó±»³ÆÎª¿ØÖÆÆ÷µÄ¹¦ÄÜÄ£¿é°ü×°. ÕâÑù·ÖÅäµ½MVģʽÖÐÊÇÓÐЩºÃ´¦µÄ.Ëü»á°ïÖú¿ª·¢ÕßʹÓüòÒ×µÄAPI¿ª·¢»ùÓÚ¿ò¼ÜµÄ´úÂë.
Ò²ÄÜͳһ¿ª·¢µÄ¹²Ê¶¡£ ʹÓÃMVCµÄ³õÖÔ¾ÍÊÇ·Ö½â½á¹¹, È»ºóͨ¹ýÉèÖòÎÊý¾ö¶¨¾ßÌåʹÓÃÄÄÖÖ MV* ¿ò¼Ü,
Igor Minar (ºËÐÄ AngularJSÍŶÓ)Ðû³ÆAngularJS ÊÇ MVW ¿ò¼Ü- Model-View-Whatever.
whatever¾ÍÊǶ¨ÖÆ»¯µÄÐèÇó.
ΪʲôʹÓà JS MVC ¿ò¼Ü
ÔÙÀ´¿´¿´Ê¹ÓÃMVCºÍ´«Í³¿ª·¢Ä£Ê½µÄÇø±ð
´«Í³WebÓ¦ÓÃ

´«Í³Ä£Ê½´¦ÀíÒµÎñÇëÇóÈ«²¿·ÅÔÚ·þÎñ¶Ë£¬Ç°¶ÎÖ»ÊÇÒ³Ãæ½»»¥ (Êݿͻ§¶Ë, ÅÖ·þÎñ¶Ë). Õâ»áÓÐÒÔÏÂÎÊÌâ:
·Ö²¼Ê½´¦ÀíÄÜÁ¦Èõ ¨C ·þÎñÆ÷´¦Àí´óÁ¿ÒµÎñ£¬ÐÔÄÜ¿°ÓÇ.
ÏàӦѹÁ¦ ¨C ´«Í³Ó¦ÓõÄÏìÓ¦ËÙ¶ÈÊǸöÓ²ÉË.
¿ª·¢¸´ÔÓ¶È ¨CC/S½á¹¹µÄÓ¦Óÿª·¢ÊDZȽϸ´ÔÓµÄ. ÓÉÓÚÿ´ÎÇëÇóÏìÓ¦¶¼Éæ¼°µ½½»»¥Éè¼Æ£¬ºÜÈÝÒ׳ö´í¡£Î´½â¾ö¸ÃÎÊÌâµÄ¿ò¼ÜÒ²ÊDzã³ö²»Ç¿ÉϧÒ×ÓÃÐÔÓдý¿¼¾¿.
±»¹¥»÷ΣÏÕ ¨C »ì±àÒµÎñ´úÂëºÍ½»»¥´úÂ룬Ôö¼ÓÁË´úÂëÊܹ¥»÷µÄ¸ÅÂÊ.ÔÚ¸´ÔӶȺܸߵÄÓ¦ÓÃÖиüÊDz»ÈÝÒ׿ØÖư²È«ÐÔ¡£
·þÎñ¶ËµÄ¸ºÔعý´ó ¨C ËùÓпͻ§¶ËµÄÇëÇó¶¼ÐèÒª¾ÓÉ·þÎñ¶Ë´¦Àí£¬ÕâÒâζ×ÅËùÓеÄsession¶¼ÒªµÈ´ý30·ÖÖÓºó²ÅÄܱ»ÊÍ·Å£¬Õâʱ¿Í»§ÇëÇóÔçÒÑ´¦ÀíÍê±Ï£¬µ«»¹ÔÚÕ¼ÓÃϵͳ×ÊÔ´£¬´ó´ó½µµÍÁËϵͳÐÔÄܺÍÉìËõÐÔ.
ÀëÏß´¦Àí ¨C ÓµÓÐÀëÏß´¦ÀíÄÜÁ¦ÊÇwebÓ¦ÓõľºÕùÁ¦£¬ÓÈÆäÔÚ´¦Àí´óÁ¿¿Í»§¶ËÇëÇóµÄÓ¦ÓÃÖУ¬ÀëÏß´¦Àí²¿·ÖÒµÎñ¸üÊDz»¿É»òȱ.
»¥²Ù×÷ÐÔÈõ¨C ÓÉÓÚ»ìÔÓ±àд£¬´úÂëÂß¼ºÜÄѷָÀ©Õ¹¹¦ÄܱäµÃ¸´ÔÓ.
JSMVC Web Ó¦ÓóÌÐò

JS MVC webÓ¦ÓóÌÐò¼Ü¹¹Ö÷ÒªÖÂÁ¦ÓÚ½«·þÎñ¶ËµÄÂß¼´¦Àí×ªÒÆµ½¿Í»§¶ËºÍʵÏÖÊݿͻ§¶ËwebÓ¦ÓóÌÐò¡£client/serverÄ£Ð͵Ĵ¦ÀíÂß¼ºÍ´úÂ뱻ίÍиøä¯ÀÀÆ÷µÄºÃ´¦ÊÇ£º
¿ÉÀ©Õ¹ÐÔ£ººÜÈÝÒ׿´µ½ÀûÓÿͻ§¶Ë´¦ÀíÔÚ¿ÉÀ©Õ¹ÐÔ·½ÃæµÄÓÅÊÆ¡£·þÎñÆ÷´¦ÀíÄÜÁ¦±£³Ö²»±äµÄǰÌáÏ£¬Ó¦Óñ»Ô½¶àµÄ¿Í»§Ê¹Óã¬ÄÇôԽ¶àµÄ¿Í»§¶Ë»úÆ÷¿ÉÒÔ±»Ê¹Óã¨Ö±µ½Ä㹺Âò¸ü¶àµÄ·þÎñÆ÷£©¡£
ʵʱµÄÓû§ÏìÓ¦£º¿Í»§¶Ë´úÂë¿ÉÒÔÁ¢¼´¶ÔÓû§µÄÊäÈë×÷³ö·´Ó¦£¬¶ø²»ÐèÒªµÈ´ýÍøÂç´«Êä¡£
½á¹¹ÇåÎúµÄ±à³ÌÄ£ÐÍ£ºÓû§½çÃæ¿ÉÒÔÓÐЧµØ·ÖÀëÓ¦ÓóÌÐòµÄÒµÎñÂß¼¡£ÕâÑùµÄÄ£ÐÍΪ°²È«ÌṩÁËÒ»¸ö¸ü¼Ó¼ò½à·½·¨¡£ËùÓÐͨ¹ýÓû§½çÃæµÄ·¢³öµÄÇëÇó£¬ÎÒÃÇ¿ÉÒÔÔÚÊý¾Ýͨ¹ý¸÷ÖÖ½Ó¿Úǰ½øÐа²È«¼ì²é¡£Ê¹Óø´ÔӵķÖÎöÁ÷³Ì»áÈð²È«·ÖÎö±äµÃ¸ü¼Ó¸´ÔÓ¡£ÁíÒ»·½Ã棬ÓÃÇåÎúµÄweb·þÎñ½Ó¿Ú£¬ÓÐÃ÷È·µÄÍø¹Ø°²È«¹¤×÷ºÍ°²È«·ÖÎö¸ü¼òµ¥Ö±¹Û£¬Â©¶´¿ÉÒÔ¿ìËÙ·¢ÏÖ²¢¾ÀÕý¡£
¿Í»§¶Ë״̬¹ÜÀí£ºÔÚ¿Í»§¶Ëά»¤ÁÙʱ»á»°×´Ì¬ÐÅÏ¢¿ÉÒÔ¼õÉÙ·þÎñÆ÷ÉϵÄÄÚ´æ¸ºÔØ¡£ÕâÒ²ÔÊÐí¿Í»§ÀûÓøü¶àµÄRESTful½»»¥£¬¿ÉÒÔ½øÒ»²½Ìá¸ß¿ÉÉìËõÐÔºÍʹÓûº´æµÄʱ»ú¡£
ÀëÏßÓ¦ÓÃ-Èç¹û´ó²¿·ÖÓ¦ÓóÌÐòµÄ´úÂëÒѾÔÚ¿Í»§¶ËÉÏÔËÐУ¬ÄÇô´´½¨Ò»¸öÀëÏß°æ±¾µÄÓ¦ÓóÌÐò¿ÉÒԿ϶¨½«»á±äµÃ¸ü¼ÓÈÝÒס£
»¥²Ù×÷ÐÔ£ºÍ¨¹ýʹÓýṹ»¯Êý¾ÝºÍ×îСÏ޶ȵÄapi½øÐн»»¥£¬ÕâÑù¸üÈÝÒ×Á¬½Ó¶îÍâµÄÏû·ÑÕߺÍÉú²úÕßÓëÏÖÓÐϵͳ½øÐн»»¥¡£
ΪÁË¿ª·¢ÊµÏÖÒ»¸ö¿Í»§¶ËwebÓ¦ÓóÌÐò£¬ÐèÒª×éÖ¯ÎÒÃǵÄÏîÄ¿½á¹¹£¬ÕâÑù¸üÒ×ÓÚºóÆÚµÄ¹ÜÀíºÍά»¤¡£Ò»¸öÓ¦ÓóÌÐòµÄ½Å±¾³¬¹ý¼¸Ê®ÐеÄʱºò£¬Èç¹ûËüµÄ×é¼þÖ®¼äµÄ¹¦ÄÜûÓзֿª´¦Àí£¬ÕâÑùÓ¦Óûá±äµÃÔ½À´Ô½ÄѹÜÀí¡£ÎÒÃÇÒ»¿ªÊ¼¿ª·¢Ò»¸öwebÓ¦ÓóÌÐòµÄʱºò£¬¿ÉÄÜ»á¾õµÃ¼òµ¥µØÍ¨¹ýÒ»¸öDOM²Ù×÷¿â£¨ÈçjQuery£©ºÍһЩʵÓõIJå¼þ¾Í¿ÉÒÔÍê³ÉÁË¡£ÕâÑùÎÒÃǺÜÈÝÒ׾ͱ»Ó¦ÓÃÀïÃæjQueryµÄǶÌ׻ص÷º¯ÊýºÍûÓÐÈκÎ×éÖ¯½á¹¹µÄDOMÔªËØ¸ø¸ãÃÉÁË¡£ÎªÁ˱ÜÃâÇ°ÃæËµµ½µÄÎÊÌ⣬ÎÒÃDzÉÓÃspaghetti
code £¨Ò»¸öÃèÐð´úÂëµÄÊõÓÓÃÀ´ÐÎÈÝ´úÂëÄÑÒÔÔĶÁºÍÒòΪȱ·¦×éÖ¯½á¹¹ÄÑÒÔά»¤£©¡£ÏñʹÓÃjQueryÕâÑùµÄDOM²Ù×÷¿âºÍһЩÆäËûµÄʵÓÿâÎÒÃÇ¿ÉÒÔ¸ü¼ÓÈÝÒ×ʹ¹¹½¨Ò»¸öÍøÒ³¡£µ«ÊÇ£¬ÕâЩ¿âÔÚÎÒÃǹ¹½¨webÓ¦ÓóÌÐòʱʧȥ×÷Óá£
webÓ¦ÓóÌÐò²»ÏñÒ»¸öÆÕͨµÄÍøÒ³£¬ËûÃǸüÇãÏòÓÚÓëÓû§µÄ½»»¥²¢ÇÒÐèҪʵʱÓëºó¶Ë·þÎñÆ÷ͨÐÅ¡£Èç¹ûÄãûÓÐʹÓÃMVC¿ò¼ÜÀ´´¦Àí£¬ÕâÑù»á×îÖÕ»áÈÃÄãд³öһЩ±àд»ìÂÒ¡¢·Ç½á¹¹»¯¡¢²»¿Éά»¤¡¢²»¿É²âÊԵĴúÂ롣ΪÁ˱ÜÃâ¡°spaghetti¡±Ê½µÄ´úÂ룬ÄÇôJavaScript¿ª·¢ÈËÔ±±ØÐëÊ×ÏÈÒªÁ˽âÕâÖÖģʽÌṩÁËʲô¶«Î÷¡£Õâ¾Í¿ÉÒÔ¿´µ½ÕâЩ¿ò¼ÜÄܹ»ÈÃÎÒÃÇ×öʲôÄÄЩ²»Í¬µÄÊÂÇé¡£
ʹÓÃJavaScript¹¹½¨Ò»¸öµ¥Ò³ÃæÓ¦ÓóÌÐòµÄʱºò£¬²»¹ÜÊÇ·ñÓµÓÐÒ»¸ö¸´ÔÓµÄÓû§½çÃæ»òÕßÖ»ÊÇΪÁ˼õÉÙHTTPÇëÇóµÄÊýÁ¿£¬Äã¿ÉÄܻᷢÏÖ×Ô¼ºÐ´µÄºÜ¶à¿ÉÒÔ×é³ÉÒ»¸öMV
*¿ò¼ÜµÄ´úÂë¡£¸Õ¿ªÊ¼µÄʱºò£¬Ê¹ÓÃ×Ô¼ºÏë³öÀ´µÄ·½Ê½À´±ÜÃâ¡°spaghetti¡±Ê½´úÂëдһ¸öÓ¦Óÿò¼Ü²¢²»ÊÇÒ»¼þºÜÄѵÄÊÂÇ飬µ«ÊÇд³öÏñAngular/BackboneÕâÑùµÄ´úÂëˮƽÄǾͲ»Ì«¿ÉÄÜÁË¡£
ÎÒÃǻᷢÏÖÓиü¶àµÄÈË»áÇãÏòÓÚ¹¹½¨Ò»¸öÓ¦Ó㬶ø²»ÊÇÊÔ×ÅÈ¥½«DOM²Ù×÷¿â¡¢Ä£°å¡¢Â·ÓɽáºÏµ½Ò»Æð¡£³ÉÊìµÄMV
*¿ò¼Üͨ³£²»½ö°üÀ¨ºÜ¶àÄã·¢ÏÖ×Ô¼ºÐ´¹ýµÄÀàËÆµÄ¹¦ÄÜ´úÂ룬¶øÇÒÒ²°üº¬Á˺ܶàÄãÔø¾Óöµ½²¢ÇÒÒѾ½â¾öÁ˵ÄÎÊÌâ¡£¿ò¼ÜΪÄã½ÚÊ¡Á˺ܶàʱ¼ä£¬Õâ¾ÍÊÇ¿ò¼Ü²»Äܵ͹ÀµÄ¼ÛÖµËùÔÚ¡£
ÏÖÔÚµÄä¯ÀÀÆ÷ÌṩÁ˷ḻµÄ¹¦ÄÜ£¬±äµÃÔ½À´Ô½Ç¿´ó£¬Õâ²»½öÈÃÔÚJavaScriptÖй¹½¨³ÉÊìµÄwebÓ¦ÓóÌÐò³ÉΪ¿ÉÄÜ£¬¶øÇÒÕâ¸ö·½Ê½Ô½À´Ô½ÊÜ»¶Ó¡£¸ù¾Ý
HTTP ArchiveÊý¾ÝÏÔʾ£¬½ñÄ겿ÊðµÄJavaScript´úÂë¹æÄ£Ôö³¤ÁË45%¡£

Ëæ×ÅJavaScriptµÄÈËÆøÅÊÉý£¬ ÎÒÃǵĿͻ§¶ËÓ¦ÓóÌÐò±ÈÒÔǰ¸´ÔÓµÃ¶à ¡£Ò»¸öÓ¦ÓóÌÐò¿ª·¢ÐèÒª¶à¸ö¿ª·¢ÈËÔ±ºÏ×÷£¬ËùÒÔ±àд¿Éά»¤ºÍ¿ÉÖØÓôúÂëÔÚеÄwebÓ¦ÓóÌÐòʱ´úÊǷdz£ÖØÒªµÄ¡£Éè¼ÆÄ£Ê½¶ÔÓÚ±àд¿Éά»¤ºÍ¿ÉÖØÓõĴúÂëÊǺÜÖØÒªµÄ¡£ÔÚ¹ýÈ¥¼¸Äêʱ¼äÀïÃæ£¬ÓкܶàJavaScript
MVC¿ò¼ÜÒѾ±»Éè¼Æ¿ª·¢³öÀ´ÁË£¬±ÈÈçAngularJS£¬backbone.js£¬ ember.js£¬»¹ÓкܶàÆäËûµÄ¿ò¼Ü¡£ËäÈ»ËûÃǶ¼ÓÐÆä¶ÀÌØµÄÓÅÊÆ£¬µ«ÊÇÿһ¿ò¼Ü¶¼»á¹ÄÀø¿ª·¢ÈËÔ±×ñÑÒ»¶¨µÄÐÎʽÒÔ±àд³ö¸ü¼Ó½á¹¹»¯µÄJavaScript´úÂë¡£
ʲôʱºòÐèҪʹÓÃÒ»¸öJS MV*¿ò¼Ü
Èç¹ûÄãÔÚ¹¹½¨Ò»¸öÓ¦Óã¬ËüµÄ¿Í»§¶ËÓÐÐí¶àÖØÁ¿¼¶µÄ¹¦ÄÜ£¬Óô¿JavaScriptºÜÄÑÓ¦¸¶£¬ÄÇÄã¾ÍÓ¦¸Ã¿¼ÂÇʹÓÃÒ»¸öMVC¿ò¼Ü¡£
Èç¹ûÑ¡Ôñ´íÎó£¬Ä㽫»á´í¹ýMVC¿ò¼ÜÌṩµÄ¹¦ÄÜ£¬ÏÝÈëÖØÐ·¢Ã÷ÂÖ×ӵľ³µØ¡£
ҪעÒâµÄÊÇ£¬Èç¹ûÄã¹¹½¨µÄÓ¦ÓÃÔÚ·þÎñÆ÷¶ËÓкܶàÖØÁ¿¼¶¹¦ÄÜ(¼´ÊÓͼÉú³É/Õ¹ÏÖÂß¼)²¢ÇÒÔÚ¿Í»§¶ËûÓжàÉÙ½»»¥µÄ»°£¬ÕâʱÄã»á·¢ÏÖʹÓÃMVC¿ò¼Ü¾ÍÏñÊÇɱ¼¦ÓÃÅ£µ¶¡£ÔÚÄÇÖÖÇé¿öϸüºÃµÄÑ¡ÔñÊÇ£¬Ê¹ÓÃÒ»¸ö¸ü¼òµ¥µÄ¡¢ÓÐÉÙÁ¿¸½¼Ó¹¦ÄܵÄDOM²Ù¿ØÀà¿â¡£
ÏÂÃæÕâ¸öÁÐ±í²¢²»Í걸£¬µ«ÊÇÎÒÃÇÏ£ÍûËüÄÜÌṩ³ä·ÖµÄÀíÓɰïÄã¾ö¶¨ÊÇ·ñÔÚÄãµÄÓ¦ÓÃÖÐÓ¦¸ÃʹÓÃÒ»¸öMVC¿ò¼Ü:
ÄãµÄÓ¦ÓÃÐèÒªÒì²½Á¬½Óµ½ºǫ́
ÄãµÄÓ¦ÓÃÓÐÕâÑùµÄ¹¦ÄÜ£¬Ëü²»ÐèÒªÖØÐÂÔØÈëÕû¸öÒ³Ãæ(±ÈÈç¸ø²©ÎÄÔö¼ÓÒ»ÌõÆÀÂÛ£¬ÎÞÏÂÏÞ¹ö¶¯)
¶àÊýÊÓͼ»òÕßÊý¾Ý²Ù×÷½«»áÔÚä¯ÀÀÆ÷ÄÚÍê³É£¬¶ø²»ÊÇÔÚ·þÎñÆ÷¶ËÍê³É
ͬÑùµÄÊý¾ÝÔÚÒ³ÃæÉÏÐèÒª½øÐв»Í¬·½Ê½µÄäÖȾ
ÄãµÄÓ¦ÓÃÓÐÐí¶àËöËéµÄ½»»¥À´ÐÞ¸ÄÊý¾Ý(°´Å¥, ¿ª¹Ø)
Âú×ãÕâЩÇé¿öµÄ±È½ÏºÃµÄwebÓ¦ÓõÄÀý×ÓÓÐGoogle Docs£¬Gmail»òÕßSpotify¡£
¿Í»§»ú/·þÎñÆ÷¼Ü¹¹µÄwebÓ¦ÓóÌÐò
ÊÀ½çÒѾ±»¸Ä±ä£¬²¿·ÖÓ¦ÓõÄÂß¼ÒѾ±»ÒƵ½¿Í»§¶Ë¡£µ±ÎÒÃÇÐèÒªÒÔijÖÖ·½Ê½´¦ÀíÀ´×Ô·þÎñÆ÷µÄËùÓÐÊý¾Ýʱ£¬ÕâÀï¾ÍÃèÊöÕâÖÖÇéÐΡ£JS
MVC¿ò¼Ü¹ÄÀø°Ñ±íÏÖ²ãÂß¼´Ó·þÎñÆ÷¶ËÒÆ¶¯µ½¿Í»§¶Ë£¬ÊµÏÖÁËRIA£¨Rich-Internet-Apllication£©£¬´«Í³webÓ¦ÓóÌÐòϵĿͻ§»ú/·þÎñÆ÷¼Ü¹¹ºÍJS
MVCϵĿͻ§»ú/·þÎñÆ÷¼Ü¹¹¶¼»ùÓÚwebÓ¦Óá£


¿Í»§¶ËÒ»²àµÄMVC¿ÉÒÔ´¦ÀíÕû¸öMVCÕ»¡£Èç¹ûÄãͬʱʹÓ÷þÎñÆ÷ºÍ¿Í»§¶ËMVC£¬ÄÇôÄã»á¸´ÖÆÄãµÄÄ£ÐͺÍ·¾¶¡£¿Í»§¶ËÒ»²àµÄMVC»ù±¾ÉÏÔÊÐíÄ㽫ÄãµÄ·þÎñÆ÷ºÍ¿Í»§¶ËÁ¬½ÓÆðÀ´¡£ÎªÊ²Ã´ÄãµÄ·þÎñÆ÷Òª·¢ËÍÊÓͼ²ã£¿ÎªÊ²Ã´²»·¢ËÍÒÔjsonΪ¸ñʽµÄÄ£ÐͲ¢¼ÓÔØËüµ½¿Í»§¶ËÒ»²à£¬Èÿͻ§¶ËÈ¥äÖȾÊÓͼ¡£ÄãÉõÖÁ¿ÉÒÔÔÚ½«À´ÎªÆä¹æ¶¨Â·ÓÉ¡£ÎªÊ²Ã´·þÎñÆ÷Òª´¦Àí·ÓÉ£¿¿Í»§¶Ë¿ÉÒÔ×öÕâ¸ö¡£½ö½öÔÊÐí¿Í»§¶ËÈ¥·ÃÎÊÄãµÄRESTfulÊý¾Ý¿â¾ÍÐУ¬²¢ÇÒÄã²»ÐèÒªÈκηþÎñÆ÷¶ËµÄMVC¡£
½ÏÁ÷ÐеÄÒ»ÖÖ°üº¬¿Í»§¶Ë·þÎñ¶ËµÄģʽÊÇ ºó¶ËRESTful API ͨ¹ý JSON·¢ËÍÊý¾ÝÄ£ÐÍ ¿Í»§¶ËʹÓÃMVCģʽ
´¦ÀíÓ¦ÓÃ.
Client-side MVC with server-side RESTful API

Data Flow

AngularJSºÍÆäËûJS MVC¿ò¼ÜµÄ¶Ô±È
ÔÚÓëÆäËûJS MVC¿ò¼ÜµÄÕùÕ½ÖУ¬AngularJSÒѾʤÀûÁË¡£ËüÒѾ֤Ã÷ÁË×Ô¼ºÊÇËùÓÐJS
MVC¿ò¼ÜÖÐ×î³ÉÊìµÄ¡£ÏÂÃæÊÇÀ´ÂÛÖ¤µÄÊý¾Ý

ÉçÇøÖ§³Ö
£¨Êý¾ÝÀ´×ÔGithub.com£©

£¨Êý¾ÝÀ´×ÔStackOverflow.com£©
Ëæ×Åʱ¼äÍÆÒÆ£¬ÐËȤµÄÇ÷ÊÆ

£¨2011Äê8ÔÂ-2014Äê6Ô£©

£¨ÉÏÒ»Ä꣩
ʹÓÃͳ¼Æ



ÌØÐÔ¶Ô±È


Óû§ÈëÃÅ


¹¤×÷Ç÷ÊÆ

¶Ô±ÈAngularjsºÍÀàËÆDojoµÄÆóÒµ¼¶¹¤¾ß¼¯(Toolkit)
Dojo Toolkit:
Dojo ToolkitÊÇÒ»¸öÖÂÁ¦ÓÚ¼ò»¯¿çƽ̨JavaScript/AjaxÓ¦ÓúÍÍøÕ¾µÄ¿ªÔ´Ä£¿é»¯JavaScriptÀà¿â.
DojoÊÇÒ»¸öÃæÏò´ó¹æÄ£¿Í»§¶Ëweb¿ª·¢µÄJavaScript¿ò¼Ü. ÀýÈç, Dojo³éÈ¡³öÒ»¸öÆÁ±Î¸÷ÖÖä¯ÀÀÆ÷²îÒìµÄAPI¼¯ºÏ.
´ËÍâ, DojoµÄ¹¦ÄÜ»¹°üº¬: ¶¨ÒåÁËÄ£¿é»¯´úÂëµÄ¿ò¼Ü, ²¢¹ÜÀíËûÃǵÄÏ໥ÒÀÀµ¹ØÏµ; Ìṩ¹¹½¨¹¤¾ß¼¯,
¿ÉÒÔÓÃÀ´ÓÅ»¯JavaScriptºÍCSS´úÂë, Éú³ÉÎĵµ²¢ÇÒÔËÐе¥²â; Ö§³Ö¹ú¼Ê»¯, ±¾µØ»¯ºÍÎÞÕϰ(accessibility);
ÌṩÁ˷ḻÁËͨÓù¤¾ßÀàºÍÓû§½çÃæ×é¼þ(Widget).
ÉçÇøÖ§³Ö

MVC
Angular¿ª·¢ÍŶÓÒѾ½«MVCÉè¼ÆÄ£Ê½ÒÔ¶àÖÖ·½Ê½ÒýÈëµ½AngularÖÐ, Òò´Ë»áʹµÃ¿ª·¢Ò²±ØÐë¸úËæÕâMVCÉè¼ÆÄ£Ê½.
AngularJS²¢Ã»ÓÐÒÔ´«Í³µÄ·½Ê½ÊµÏÖMVC, ¶øÊǸü½Ó½üÓÚMVVM(Model-View-ViewModel),
Òò´ËÓÐʱ±»Í³³ÆÎªMV*. MVCÊÇAngularµÄºËÐÄ, AngularΪMVCÉè¼ÆÄ£Ê½ÌṩÁËÔÉúµÄÖ§³Ö,
¿ÉÒÔÇáÒ×½«ÆäÓ¦ÓÃÓÚwebÓ¦ÓóÌÐòµÄ¿ª·¢ÖÐ.
DojoµÄToolkitΪJSÓ¦ÓóÌÐòÌṩÁËʵÏÖMVCµÄ¶ÀÁ¢¹¤¾ß°ü. Dojo²¢Ã»ÓÐΪJSÓ¦ÓóÌÐòÌṩÍ걸µÄMVCʵÏÖ,
¶øÊǸù¾ÝÓ¦ÓóÌÐò×ÔÉíÐèÒª, Ñ¡ÔñÐÔʹÓÃÆäÖеÄMVC¹¤¾ß/×é¼þ. DojoÌṩMVC¹¦ÄܵİüÊÇdojox/mvc.Õâ¸ödojox/mvc°üÖ÷Òª¹Ø×¢¿Í»§¶ËµÄViewµ½ModelµÄÊý¾Ý°ó¶¨,
½öÌṩÁËÔÚÒ»¸öViewÖеÄÊý¾Ý°ó¶¨/¿ØÖÆÆ÷µÄÖ§³Ö, ²¢Î´ÌṩÔÚÓ¦ÓóÌÐò¼¶±ðµÄ¿ç¶à¸öViewµÄÖ§³Ö(ÀýÈç,
µ¼º½(Navigation)µÄÖ§³Ö).
ÔÚDojoÖУ¬MVCÓ¦ÓÃÖеļ¶±ð¹Ø×¢µã±ÈÈç·ÓÉ»òÕßµ¼º½µÈ±ØÐëʹÓÃÁíÒ»¸ö°ü(dojox/app)À´´¦Àí£¬¶øÔÚAngularJS¿ò¼ÜÖУ¬ÕâЩ¹Ø×¢µã¶¼ÊÇ¿ò¼Ü×ÔÉí¾ÍÄÜ´¦ÀíµÄ¡£
dojox/mvcÄ£¿éµÄ״̬ÏÖÔÚÈÔÈ»ÊÇ¡°Experimental¡± £¬ËùÒÔËüÈÔÈ»ÊDz»Îȶ¨µÄ£¬ÕýÈçÏÂÃæÕâÆªÎÄÕÂËù˵µÄ(http://dojotoolkit.org/reference-guide/1.10/dojox/index.html#dojox-index)£¬¶øAngularÔòÊÇÒ»¸ö¾¹ýÁ˸ü¶àµÄÑéÖ¤¡¢Îȶ¨¶ø³ÉÊìµÄJS
MVC¿ò¼Ü¡£
SPA
AngularJSÊÇÒ»¸öÁ÷ÐеÄÈ«¹¦ÄܵÄSPA¿ò¼Ü¡£AngularJSµÄһЩ¹ÌÓÐÌØÐÔÖ§³ÖÁ˵¥Ò³ÃæÓ¦ÓõĿª·¢¡£Angularͨ¹ýÏÂÁÐÌØÐÔÀ´Ö§³ÖSPA:
ÄÚǶÊÓͼ(Nested Views)
¿ØÖÆÆ÷(Controller)¼Ì³Ð
·ÓÉ(Routing)
Dojoͨ¹ýÆäDojox/app°üʵÏÖÆä¹¹½¨µ¥Ò³Ó¦ÓõÄÄ¿±ê¡£Õâ¸ö°üÊǸöСÐ͵ÄÓ¦Óÿò¼Ü£¬ÌṩÁËÒ»×éÀ࣬ÓÃÓÚ¹ÜÀí²¿ÊðÔÚÒÆ¶¯É豸»ò×ÀÃæÏµÍ³Éϵĵ¥Ò³ÃæÓ¦ÓõÄÉúÃüÖÜÆÚºÍÐÐΪ¡£¸ÃÓ¦Óÿò¼Ü±»Éè¼Æ³ÉÖ»Ðè¼òµ¥ÅäÖÃÒ»¸öÅäÖÃÎļþ£¬ÓÉDZÔÚµÄǶÌ×ÊÓͼ×é³ÉÓ¦Ó㬲¢±ãÓÚÕâЩÊÓͼ֮¼äµÄ¹ý¶É¡£
ʹÓÃAngular¿ª·¢µ¥Ò³ÃæÓ¦Ó㬿ÉÒԺܺõÉÕû¸ö¿ò¼Ü£¬Í¬Ê±¿ò¼ÜÌṩÁËMVC¹¦ÄÜ£¬ÀýÈç·ÓÉ£¬¿ØÖÆÆ÷£¬ÊÓͼºÍµ¥Ò³ÃæÓ¦ÓÃģʽÊǽôÃܽáºÏµÄ¡£DojoÖеÄDojox/appÔòÊÇÒ»¸ö¶ÀÁ¢µÄ×é¼þ£¬²¢Î´½«µ¥Ò³ÃæÓ¦ÓÃÓëMVC½ôÃܽáºÏ£¬Òò´Ë£¬Dojox/mvcÔÚʹÓõÄʱºò±ØÐëͨ¹ýÅäÖÃDojox/appÀ´¹ÜÀí½â¾ö£¬¶øÕâÔÚAngularÖÐÊÇ×Ô´øµÄ£¬¶øÇÒÈÝÒ×ʹÓõġ£
UI ¹Ò¼þºÍ¿â
DojoÌṩÁ˵ײãϵͳËùÖ§³ÖµÄ´óÁ¿µÄwidget(Óû§½Ó¿Ú×é¼þ).DojoµÄUI¿â³ÆÎªDijit,ʹÓÃÒ»¸öµ¥¶ÀµÄÃüÃû¿Õ¼ä"dijit".
AngularȷʵÌṩÁËÒ»¸öUI widget¹¤¾ß¼¯,µ«ÊÇûÓÐDojoËùÌṩµÄ¹ã·º.AngularÔÊÐíËæÒâʹÓÃÁ÷ÐеĵÚÈý·½UI¿â.ËüÌṩÁËÃûΪ"Angular-UI"µÄUI¿â,Õâ¸ö¿â°üº¬¸÷ÖÖÁ÷ÐеĵÚÈý·½¿âµÄwidgetºÍÄ£¿é.ÆäÖÐ,UI-BootstrapÄ£¿é½«Bootstrcp¿ò¼ÜµÄËùÓÐwidget×÷ΪAngularÖ¸Áî.
ÓÉÓÚDojoÊÇÒ»¸ö¹¤¾ß¼¯,ËùÒÔËüµÄÈÎÒâÒ»¸ö¹¤¾ß¶¼¿ÉÒÔ²»ÒÀÀµÓÚDojoÉú̬ϵͳ¶øµ¥¶ÀʹÓÃ.Òò´Ë,DojoµÄDijitºÍÆäËûÁ÷ÐеÄUIºÍwidget¿â,ÈçJqueryUIºÍÆäËûjquery»òjs²å¼þ,¶¼¿ÉÒÔ½«ËüÃǰü×°³ÉÖ¸Áîºó,ÔÚAngularÓ¦ÓóÌÐòÖÐʹÓÃ.
RESTful Interation
AngularJSʹÓÃangular-resource(ngResource)Ä£¿éÀ´ÌṩRESTful½»»¥¹¦ÄÜ£¬¸ÃÄ£¿é±íʾһ¸öREST×ÊÔ´²¢Ìṩ°ïÖú·½·¨(GET/POST/PUT/DELETE)À´ÇáËɵÄʵÏÖRESTful½»»¥¡£ÁíÍâÒ²ÌṩÆäËüµÄ¿Éѡģ¿é¡£
DojoʹÓÃdojo/store/JsonRestÀ´ÌṩRESTful½»»¥ÄÜÁ¦¡£ËüÊÇÒ»¸öÇáÁ¿¼¶µÄ¶ÔÏó´æ´¢ÊµÏÖ£¬¸øÄÇЩ¾ßÓÐRESTfulÊý¾Ý½»»¥ÄÜÁ¦µÄHTTP¿Í»§¶ËÀ´Ê¹Óá£
AngularJSºÍDojo¶¼ÌṩÁË´óÌåÏ൱µÄRESTful½»»¥ÄÜÁ¦¡£
¿Éά»¤ÐÔ
AngularJSÌṩÁËÒ»Ð©ÌØÐÔ,ÈÃÓµÓдóÁ¿´úÂë»ùÊýµÄÓ¦ÓóÌÐò±äµÃ¿Éά»¤.ÕâÐ©ÌØÐÔÈçÏÂ:
AngularJS ¹ÄÀøºÍÔöÇ¿×îС»¯DOM²Ù×÷,ÍÆ¼öÖ»ÔÚHTMLÖÐʹÓõÄÖ¸ÁîÖÐÕ¹ÏÖDOM²Ù×÷.ÕâÑù¿ÉÒÔ±ÜÃâÓÉÓÚ´óÁ¿Ê¹ÓÃDOMºÍDOMʼþµÈ²úÉúµÄ"Òâ´óÀûÃæ"ʽµÄ´úÂë.ÕâЩ´úÂëÔÚ´óµÄwebÓ¦ÓóÌÐòÖÐÄÑÓÚµ÷ÊԺ͸ú×Ù.AngularÖ¸ÁîҲΪÔö¼ÓÁËHTMLÓïÒå.
AngularÌṩÁËһЩÀàËÆÄ£¿éµÄÌØÐÔ,ËüÔÊÐíÓ¦ÓóÌÐò¿ª·¢Õß,½«²»Í¬²¿·ÖµÄÓ¦ÓóÌÐòÂß¼´ò°ü³ÉÄ£¿é,ÒÔÔö¼ÓÓ¦ÓóÌÐòµÄÄ£¿é»¯ºÍ¿Éά»¤ÐÔ.
AngularÌṩÁËDI (ÒÀÀµ×¢Èë) Éè¼ÆÄ£Ê½µÄ¹ÌÓÐÌØÐÔ,Ëü°ïÖúÓ¦ÓóÌÐò±£³ÖÄ£¿é»¯ºÍÒ×¶ÁÐÔ.
ÏîÄ¿½á¹¹¿ò¼Ü¶ÔÓÚAngularJSÒѾ¿ÉÓÃ,¿ÉÒÔÓÃÀ´¿ª·¢¿Éά»¤µÄÆóÒµwebÓ¦ÓóÌÐò.
DojoûÓÐÌṩ×îС»¯DOM²Ù×÷µÄ¼¼Êõ,ÕâÑù,¶ÔÓÚ´óÐÍwebÓ¦ÓóÌÐò,DOM²Ù×÷Ôö¼ÓÁËÇ÷ÏòÓÚ¡°Òâ´óÀûÃæ¡±Ê½´úÂëµÄ¿ÉÄÜÐÔ,Ò²Ó°ÏìÁËÓ¦ÓóÌÐòµÄ¿Éά»¤ÐÔ.
DojoÖ§³ÖÄ£¿é(AMD),µ«ÊÇûÓÐΪwebÓ¦ÓóÌÐòÌṩDIģʽ.
Êý¾Ý°ó¶¨ºÍÊÓͼģ°å»¯
ÉÌÒµwebÓ¦ÓóÌÐòµÄÊý¾ÝÖÐÐÄÔÔòÒªÇóÀ´×ÔÄ£Ð͵ÄÊý¾ÝºÍUIͬ²½¸üÐÂ.¶ÔÓÚÒ»¸öÉÌÒµwebÓ¦ÓóÌÐò,¶¯Ì¬ÊÓͼ±ØÐëÒÀÀµÓÚÄ£ÐÍÊý¾Ý¶ø´´½¨.AngularÌṩÁËÏ൱¼òµ¥ºÍÒÑÓеļ¼Êõ,ÉùÃ÷ʽµÄ±àд°ó¶¨µ½Ä£¿éÊý¾ÝµÄ¶¯Ì¬ÊÓͼ.ÔÚAngularÀïÃæ,ÊÓͼģ°å»¯Ê¹Óðüº¬AugularרÓеÄÔªËØºÍÊôÐÔµÄHTML±àд.ʹÓÃHTML×÷Ϊģ°å»¯ÓïÑÔ,¶ÔÓÚ¿ª·¢Õß¶øÑÔ,¸üÒ×ÓÚ´´½¨ºÍÀí½âÊÓͼ.Angular½áºÏÁËÀ´×ÔÄ£ÐͺͿØÖÆÆ÷µÄÐÅϢģ°å,ÓÃÀ´äÖȾÓû§ÔÚä¯ÀÀÆ÷Öп´µ½µÄ¶¯Ì¬ÊÓͼ.AngularʹÓÃÁËË«Ïò°ó¶¨ÌØÐÔÒÔ±£³ÖUIºÍÄ£Ð͵Äͬ²½.
ͬÑùµÄÌØÐÔÒ²¿ÉÒÔÔÚDojoÖÐʹÓÃ,µ«ÊÇ,ËüÃǺÍDojo¹¤¾ß¼¯µÄÁ÷³Ì²»Ì«Ðµ÷,ҲȱÉÙÁËÕâ¸öÌØÐԵļòµ¥ºÍϸ΢»¯.
ÉùÃ÷ʽµÄÓû§½Ó¿Ú
AngularJS ÌáÉýÁËHTMLÊÓͼµÄ ÉùÃ÷ʽÉè¼Æ£¨declarative design£©¡£ÔÚÊÓͼ²ã£¬Ê¹ÓÃHTML×÷Ϊģ°åÓïÑÔÈÃËü±äµÃÏ൱ÈÝÒ׿ª·¢´´½¨ÊÓͼ£¬Í¬Ê±Ò²±äµÃÒ×ÓÚÀí½â£¬ÔÚÊÓͼÓïÒåÉÏÒ²ÓÐÀûÓÚÆäËû¿ª·¢Õß¡£AngularÌṩһ¸öÌØÐÔ£¬±»³ÆÎª¡°directives¡±£¬Ëü¿ÉÒÔ¸ù¾ÝÁìÓòµÄÐèÒª£¬À´Ìá¸ßHTMLµÄ¶¨ÖÆÐÔ¡£
ÉùÃ÷ʽÉè¼Æ£¨declarative design£©¿ÉÒÔÔÚDojoÓ¦ÓÃÖÐͨ¹ýʹÓÃdata-*ÊôÐÔÔËÐУ¬µ«ÊÇËü¸úAngularµÄ¡°directives¡±ÌØÐÔ²»Ò»Ñù¡£
Ö§³Ö AngularJS ÄܸüºÃµÄ½øÐÐ IDE ºÍä¯ÀÀÆ÷µ÷ÊÔ
Netbeans IDEҲΪAngularJSÌṩÁËÄÚǶµÄÖ§³Ö,ËüÈÃʹÓÃAngularJS¿ÉÒÔ¼òµ¥µÄ¿ª·¢webÓ¦ÓóÌÐò.(http://wiki.netbeans.org/NetBeans_80_NewAndNoteworthy#JavaScript)
AngularÍŶÓҲΪGoogle Chromeä¯ÀÀÆ÷´´½¨ÁËÒ»¸öÃûΪBatarangµÄ²å¼þ,ËüÌá¸ßÁËʹÓÃAngular¿ª·¢Ó¦ÓóÌÐòµÄµ÷ÊÔÌåÑé.Õâ¸ö²å¼þÖ¼ÔÚ¼ò»¯ÐÔÄÜÆ¿¾±µÄ¼ì²â,ÒÔ¼°ÌṩGUIÀ´µ÷ÊÔÓ¦ÓóÌÐò.
ʹÓÃDojoµÄʱºòºÜÄÑÔÚ´óÐÍÍŶÓÖб£³Ö´úÂëµÄͳһ
DojoÖеıà³ÌÄ£ÐÍÊÇʹÓÃwidget,µ±ÍØÕ¹ËüÃǵÄʱºò,ËüÃǽ«ÄãµÄ´úÂë°üΧס.ÄãÈÔÈ»ÔÚ±à³ÌÀ´²Ù×÷DOM,Á¬½Ó/×¢²á/È¡Ïû×¢²áʼþ.Dojox/mvc²¢Ã»ÓÐÉú³ÉÄ£¿é»¯µÄ´úÂë.ÔÚDojoÖÐÓжàÓà2ÖÖ»ò3Öֵķ½Ê½×öͬÑùµÄÊÂÇé.ÆäÖÐһЩÉõÖÁÊÇÔã¸âµÄʵ¼ù,µ«ÊDz¢Ã»Óб»Çå³ý.ºÜÄÑÔÚ´óÐÍÍŶÓÖмÓÇ¿´úÂëµÄͳһ,ÒòΪDojoûÓÐΪģ¿é»¯ºÍͳһ»¯µÄwebÓ¦ÓóÌÐòÌṩÕûÌåµÄ¿ò¼Ü.
AngularJSÌṩÁËÒ»¸öÈ«ÃæµÄ¿ò¼Ü£¬°üº¬MVCµÄºËÐļ°¹æ»®Ä£ÐÍ£¬¾ßÓоùÔÈÐÔ£¬¿ÉÀí½âÐÔºÍÄ£¿é»¯¡£AngularJSֻΪģÐÍÌṩǶÌ׵ĿØÖÆÆ÷¡£Á¼ºÃµÄ²âÊÔÓ¦ÓóÌÐò¸ôÀëµÄ²¿·Ö¡£¶¨ÒåÁ¼ºÃµÄÏà¹ØÐÔ¡£´ó²¿·Öʱ¼äÄ㲻д´úÂë²Ù×ÝDOM×ÔÉí¡£µ«Äã¿ÉÒÔÔÚ´´½¨Ö¸Á×é¼þ£©Ê±ÕâÑù×ö¡£Ã»ÓÐÃüÃû¿Õ¼ä»ìÂÒ¡£ÄãµÄ¶ÔÏó´ÓÀ´²»»á³öÏÖÔÚÈ«¾ÖÃüÃû¿Õ¼äÖУ¬ºÃÏñÒ»Çж¼·â×°ÔÚAngularµÄÓ¦ÓÃÖС£MVCģʽÊǺËÐÄ¡£ÄãµÄÓ¦ÓóÌÐòÊÇÒ»Ì׿ØÖÆÆ÷£¬·þÎñ£¬¹ýÂËÆ÷ºÍ×Ô¶¨ÒåÖ¸Áî¡£
×ܽá
±¾ÎÄÒâͼÈÃÎÒÃÇÖªÏþwebÓ¦ÓõÄδÀ´¾ÍÔÚÑÛǰ¡£²¢³¢ÊÔ¸ÅÊöÒ»¸öÕýÈ·µÄÓÐÖ¸µ¼ÒâÒåµÄ·½·¨À´½á¹¹»¯ºÍÉè¼ÆÒ»¸öwebÓ¦Óã¬Ê¹Ö®ÄÜÊÊÓ¦webÊÀ½ç¡£±¾ÎĸÅÊöÁ˿ͻ§¶ËJS
MV*¿ò¼ÜµÄʹÓ㬲¢ËµÃ÷ÁËΪʲôÓÿͻ§¶ËMVC¿ò¼Ü×éÖ¯µÄwebÓ¦ÓúÜÊʺÏʵÏÖwebÓ¦Óá£
±¾Îļ¯ÖзÖÎöºÍ×ܽáÁËÔÚ³ÉÊìµÄ¿Í»§¶ËMVC¿ò¼ÜϵĶԱȣ¬²¢ÌṩһЩ¶Ô±ÈµÄͳ¼ÆÐÅÏ¢£¬°ïÖúÄãºÍÄãµÄÍŶӾö²ß£¬Ñ¡Ôñ³öÊʺÏÄãµÄwebÓ¦ÓõĿͻ§¶ËMVC¿ò¼Ü¡£
±¾ÎÄÆ«ÏòÓÚAngularJS¿ò¼Ü£¬Äã¿ÉÒÔÓв»Í¬µÄÆ«ºÃ¡£¶ÔÎÒÀ´ËµAngularJSÊÇÎÒ¸öÈ˵ÄϲºÃËùÔÚ£¬ÔÚÎÒÑÛÖÐÊÇÆäËû¿Í»§¶ËMVC¿ò¼ÜËù²»ÄÜÆ¥µÐµÄ¡£
|