»ùÓÚAngularJSµÄ¸öÍÆÇ°¶ËÔÆ×é¼þ̽ÃØ
AngularJSÊÇgoogleÉè¼ÆºÍ¿ª·¢µÄÒ»Ì×Ç°¶Ë¿ª·¢¿ò¼Ü£¬°ïÖú¿ª·¢ÈËÔ±¼ò»¯Ç°¶Ë¿ª·¢µÄ¸ºµ£¡£AngularJS½«°ïÖú±ê×¼»¯µÄ¿ª·¢webÓ¦Óýṹ²¢ÇÒÌṩÁËÕë¶Ô¿Í»§¶ËÓ¦ÓõÄδÀ´¿ª·¢Ê¹ÓõÄÄ£°å£¬AngularJS·Ç³£È«ÃæÇÒ¼òµ¥Ò×ѧϰ£¬AngularJS¿ìËٵijÉΪÁ˵ÄÖ÷Á÷¿ò¼Ü£¬°ïÖú¿ª·¢ÕßרҵµÄ´ÓÊÂweb¿ª·¢¡£
Ò»¡¢AmazingµÄAngular
AnguarJSµÄһЩÌØÐÔ
¡¡¡¡£¨1£©·½±ãµÄREST£º RESTfulÖð½¥³ÉΪÁ˱ê×¼µÄ·þÎñÆ÷ºÍ¿Í»§¶Ë¹µÍ¨µÄ·½Ê½¡£Ê¹ÓÃÒ»ÐÐjavascript´úÂ룬Äã¾Í¿ÉÒÔ¿ìËٵĴӷþÎñÆ÷¶ËµÃµ½Êý¾Ý¡£AugularJS½«ÕâЩ±ä³ÉÁËJS¶ÔÏó£¬×÷ΪModel£¬×ñÑMVVM(model view view-model)Éè¼Æģʽ¡£
¡¡¡¡£¨2£©MVVM¾ÈÐÇ£ºÕâÊÇÒ»¸ö¼¼Êõ£¬¸üÊÇÒ»¸ö˼Ïë¡£Model½«ºÍViewModel»¥¶¯£¨Í¨¹ý$scope¶ÔÏ󣩣¬½«¼àÌýModelµÄ±ä»¯¡£ÕâЩ¿ÉÒÔͨ¹ýViewÀ´·¢ËͺÍäÖȾ£¬ÓÉHTMLÀ´Õ¹Ê¾ÄãµÄ´úÂë¡£View¿ÉÒÔͨ¹ý$routeProvider¶ÔÏóÀ´Ö§Å䣬ËùÒÔÄã¿ÉÒÔÉî¶ÈµÄÁ´½ÓºÍ×éÖ¯ÄãµÄViewºÍController£¬½«ËûÃDZä³Éµ¼º½URL¡£AngualrJSͬʱÌṩÁËÎÞ״̬µÄController£¬¿ÉÒÔÓÃÀ´³õʼ»¯ºÍ¿ØÖÆ$scope¶ÔÏó¡£
¡¡¡¡£¨3£©Êý¾Ý°ó¶¨ºÍÒÀÀµ×¢È룺ÔÚMVVMÉè¼ÆģʽÖеÄÈκζ«Î÷ÎÞÂÛ·¢ÉúÈκÎÊÂÇ鶼×Ô¶¯µÄºÍUIͨÐÅ¡£Õâ°ïÖúÎÒÃÇÈ¥³ýÁËwrapper£¬getter/setter·½·¨»òÕßclass¶¨Òå¡£AngularJS½«°ïÖúÎÒÃÇ´¦ÀíËùÓеÄÕâЩÄÚÈÝ£¬ËùÒÔÄã¿ÉÒÔ´¦ÀíÊý¾ÝÏñ´¦Àí»ù±¾javascriptÊý¾ÝÀàÐÍ¡£µ±È»ÄãÒ²¿ÉÒÔͨ¹ý×Ô¶¨Òå´¦Àí¸´ÔÓÊý¾Ý¡£ÕýÒòΪËùÓÐÊÂÇéµÄ·¢Éú¶¼ÊÇ×Ô¶¯µÄ£¬ËùÒÔÄã²»±Øµ÷ÓÃÒ»¸ömain()À´Ö´ÐÐÄãµÄ´úÂ룬¶øÊÇͨ¹ýÒÀÀµ¹ØϵÀ´Çý¶¯¡£
¡¡¡¡£¨4£©¿ÉÀ©Õ¹µÄHTML£º´ó¶àÊýµÄÍøÕ¾¶¼ÊÇʹÓ÷ÇÓïÒåµÄ<div>±êÇ©À´´î½¨µÄ¡£ÄãÐèÒª×Ô¼ºÔÚCSSµÄclassÖж¨ÒåÏà¹ØµÄDOM²ã´Î½á¹¹¡£¶øʹÓÃAngularJS£¬Äã¿ÉÒÔ²Ù×÷XMLÒ»Ñù²Ù×÷HTML£¬¸øÄãÎÞÇîµÄ·½Ê½À´Íê³É±êÇ©ºÍÊôÐÔ¶¨Òå¡£AngularJSͨ¹ý×Ô¼ºµÄ±àÒëÆ÷ºÍdirectivesÀ´Íê³ÉÏà¹ØµÄÉèÖ᣶øÕâÒ²ÊÇ×é¼þʵÏֵĻùʯ¡£
¡¡¡¡´ó¼Ò½Ó´¥jQueryµÄʱºò·¢ÏÖ£¬Òª×öÊÂÏȰ󶨣¬È¡»ØÊý¾ÝÒªÈû»ØÈ¥£¬ÈûµÄ¹ý³Ì¶¼ÊÇÒª×Ô¼º¹ØÐĵġ£µ«ÊÇAngular£¬Êý¾ÝÈ¡»ØÀ´Ö»Òª×¢Èë±äÁ¿×Ô¶¯Íê³ÉÁË£¬°üÀ¨Ê¼þ°ó¶¨¡£Êý¾Ý°ó¶¨£¬MVVM¡¢ÒÀÀµ×¢ÈëÈÃÄã¾õµÃ£¬ÔÏÈÒª¹ØÐĺܶණÎ÷£¬ÏÖÔÚ¶¼²»ÐèÒª¹ØÐÄÁË£¬Ö»Ðè¸ü¼Ó¹ØÐÄÊý¾Ý½á¹¹ºÍÒµÎñ²ã£¬°ÑÎÒÃÇ´Ó·±ËöDOM°ó¶¨ÖнâÍѳöÀ´¡££¨¿ÉÔÚ¸½Â¼¡ª¡ªAnguarJSʹÓÃÇ°ºó¶Ô±È¡ª¡ªÖв鿴µ½ÔçÆÚÎÒÓÃjQuery×öµÄÕ˺ÅÄ£¿éºÍºóÀ´ÓÃngģʽϵÄÇø±ð£©
¶þ¡¢×é¼þ»¯Ö®Â·
¡¡¡¡×é¼þÊǶÔÊý¾ÝºÍ·½·¨µÄ¼òµ¥·â×°£¬ÔÚ´ËÑùʽÀָ࣬ÁîÐ͵Ⱦ߱¸UIЧ¹ûµÄ×é¼þ£¬·½·¨µÈͳ³Æ×é¼þ¡£ÔÚ´óÐÍÈí¼þÖУ¬×é¼þ»¯ÊÇÒ»ÖÖ¹²Ê¶£¬ËüÒ»·½ÃæÌá¸ßÁË¿ª·¢Ð§ÂÊ£¬ÁíÒ»·½Ãæ½µµÍÁËά»¤³É±¾¡£
¡¡¡¡×é¼þ»¯¼°×é¼þÕ¹ÏÖÐÎʽ¡¡¡¡×é¼þ»¯¿ÉÒÔÓкܶàÊÂÇé¿ÉÒÔ×ö£¬±ÈÈçÄ£°å»¯£¬ÏÖÔÚÄ£°å»¯ÖØÈν»µ½Ç°¶Ë¡£µÚ¶þ¸öÊǹ«¹²Ñùʽ¿â£¬µÚÈý¹«¹²º¯Êý¿â£¬Ò»Ð©ÒµÎñ×é¼þ£¬Ä£¿é»¯ÌØÊâÒ»µã¡£
¡¡¡¡Òò´Ë¿ÉÒԵóö×é¼þ´ó¸ÅÕ¹ÏÖÐÎʽ°üÀ¨£º ͳһµÄÑùʽ¿â£¬¾ßÓÐÒ»¶¨HTML½á¹¹µÄ´úÂëƬ¶Î£¬¾ßÓÐÒ»²¿·ÖJS¿ØÖƵŦÄܺ¯Êý£¬¾ßÓÐÒ»¶¨Êý¾ÝÊäÈëºÍÊä³öµÄ¿ØÖÆ¡£
Èý¡¢½Ò¿ªÔÆ×é¼þµÄÃæÉ´
¡¡¡¡Ê²Ã´ÊÇÔÆÒÔ¼°ÔÆ×é¼þ
¡¡¡¡ÔÆ·þÎñÊÇ»ùÓÚ»¥ÁªÍøµÄÏà¹Ø·þÎñµÄÔö¼Ó¡¢Ê¹Óúͽ»¸¶Ä£Ê½£¬Í¨³£É漰ͨ¹ý»¥ÁªÍøÀ´Ìṩ¶¯Ì¬Ò×À©Õ¹ÇÒ¾³£ÊÇÐéÄ⻯µÄ×ÊÔ´¡£ÔÆÊÇÍøÂç¡¢»¥ÁªÍøµÄÒ»ÖÖ±ÈÓ÷˵·¨¡£¹ýÈ¥ÔÚͼÖÐÍùÍùÓÃÔÆÀ´±íʾµçÐÅÍø£¬ºóÀ´Ò²ÓÃÀ´±íʾ»¥ÁªÍøºÍµ×²ã»ù´¡ÉèÊ©µÄ³éÏó¡£ÔÆ·þÎñָͨ¹ýÍøÂçÒÔ°´Ðè¡¢Ò×À©Õ¹µÄ·½Ê½»ñµÃËùÐè·þÎñ¡£ÕâÖÖ·þÎñ¿ÉÒÔÊÇITºÍÈí¼þ¡¢»¥ÁªÍøÏà¹Ø£¬Ò²¿ÉÊÇÆäËû·þÎñ¡£ËüÒâζ׿ÆËãÄÜÁ¦Ò²¿É×÷ΪһÖÖÉÌƷͨ¹ý»¥ÁªÍø½øÐÐÁ÷ͨ¡£°ÑÔƺÍ×é¼þ¶þÕß½áºÏÔò¹¹³ÉÁËÔÆ×é¼þ¡£
¡¡¡¡ËùÒÔÔÆ×é¼þ£¬Í¨¹ýÏßÉϵÄ×ÊÔ´£¬½áºÏÕâ¸ö¸ÅÄî°ÑÕâÁ½¸ö¸ÅÄîºÏÔÚÁËÒ»Æð¾Í²úÉúÁËÕâ¸ö¸ÅÄ˵µ½µ×ÊÇÏ£Íûͨ¹ýÒ»¸öͳһµÄ¿ØÖƵĶ«Î÷£¬°ÑN¸öÏîÄ¿È«²¿¿ØÖÆÔÚÒ»Æð¡£
¡¡¡¡¸öÍƵÄ×é¼þ
¡¡¡¡¸öÍƵÄ×é¼þÀàÐ;ͰüÀ¨ÁËÑùʽÀà×é¼þ¡¢Ö¸ÁîÐÍ×é¼þ¡¢·þÎñÐÍ×é¼þ¡¢¹«¹²¹ýÂËÆ÷¡¢¹«¹²º¯Êý¿âµÈ¡£
¡¡¡¡´Ó×é¼þ·ÖÀàÀï¿ÉÒÔ·¢ÏÖרÊôCSSÊÇÑùʽÀà×é¼þ£¬¼ÓÉÏÄ£°å¾ÍÊǷdz£¼òµ¥µÄ×é¼þ£¬ÔٰѼӿØÖÆÆ÷·Å½øÈ¥£¬¾ÍÊÇÇ°Ãæ½²µÄ¾ßÓÐÒ»¶¨JS£¬¾ßÓÐÒ»¶¨Âß¼µÄ×é¼þ£¬°Ñlink¼Ó½øÈ¥£¬´øÁ˶¯»£¬Êý¾Ý²ã¼Ó½øÈ¥¾Í¾ß±¸Ò»¶¨µÄÊä³öÊäÈë¡£Õâ¸öÊý¾Ý²ã¿ÉÄÜ°üº¬¶àÖÖ£¬ÓпÉÄÜÊÇÄã¸úÄãµÄÒ³Ãæ¿ØÖÆÆ÷½»»¥£¬Ò²ÓпÉÄÜÕâ¸ö×é¼þ·Ç³£Ç¿£¬×Ô¼ºÖ±½ÓÓë·þÎñ¶ËͨÐÅ»ñÈ¡Êý¾ÝºÍ´«µÝÊý¾Ý£¨µ±È»Êµ¼Êʵ¼ùÖпÉÄÜÇ°Õ߸üºÏÊʵ±Ç°ÎÒÃǵĻ·¾³£¬ºóÕ߶ÔͳһµÄ½Ó¿ÚÒªÇó»á¸ü¸ß£©¡£
¡¡¡¡ÕâÊǸöÍÆÔÆ×é¼þµÄ¼¼Êõ·½°¸¡£»ùÓÚÇ°¶ËÈý´ó¼þºÍһЩÆäËû¿â£¬±ÈÈç»áÓÐһЩµØÀíΧÀ¸µÄ×é¼þ£¬ÐèÒªÈðٶȵØͼ¸øÎÒÃÇÕû¸öÏîÄ¿¶Ô½ÓÆðÀ´£¬»¹ÓпÉÊÓ»¯µÄÏîÄ¿£¬±ÈÈçG20ÄDZßÈËÁ÷ÔõôÑù£¬¿ÉÊÓ»¯ÏîÄ¿»áÓõ½µÚÈý·½¿â¡£ÎÒÃÇÓõÄÊÇLESSдCSS¡£»ùÓÚÕâЩ֮ÉÏ¿ª·¢ÔÆ×é¼þ¡£
¡¡¡¡¸ù¾ÝÔÆ×é¼þµÄһЩÇé¿öÎÒÃǵóöËüµÄ×î¼Ñʵ¼ù¶ÔÏó¾ÍÊÇ´Ó¾ßÓÐÒ»¶¨Í¨Óý»»¥µÄ±í¸ñ±íµ¥ÀàµÄ¹ÜÀíÐÍϵͳ³ö·¢£¬Öð½¥°üº¬¸´ÔÓ½»»¥µÄϵͳӦÓ㬲¢¶ÔÏìӦʽ¾ßÓÐÒ»¶¨µÄÖ§³Ö¡£¸öÍÆÊÇ´Ó×öÍÆËÍ·þÎñ¿ªÊ¼£¬Ö®ºóÓкܶà²úÆ·Ïß¡£ÍÆËÍ·þÎñ¾Í»áÓкܶà2B¡¢2CµÄƽ̨£¬Õâ¾ÍÊǹÜÀíÐ͵ġ£
¡¡¡¡ÉÏͼÊǸöÍÆÔÆ×é¼þ²ÉÓõÄĿ¼½á¹¹£¬ÓõÄÊÇgulp´ò°ü£¬CSSÀïÃæÓÐwdÎļþ¼Ð£¬Ö÷Òª·ÅÁËһЩµÚÈý·½µÄ¿â¡£¸ü¹Ø¼üÖ÷Òª»¹ÊÇÏÂÃ棬JSÒ²ÊÇÒ»Ñù£¬wdÊÇ»ù´¡¿â¡£µÚÎå¸öÊÇ×îÖØÒªµÄ£¬ËùÓÐ×é¼þ¶¼·ÅÔÚÕâ¸öÎļþ¼ÐÏ£¬ÓÒ±ßͼ¾Í˵Ã÷ÁËÿ¸ö×é¼þ°üº¬×Ô¼º×¨ÊôµÄÈý´ó¼þ¡ª¡ªÄ£°å¡¢Âß¼¡¢½»»¥¡¢Ð§¹ûºÍÑùʽ¡£
¡¡¡¡»ùÓÚgulpµÄ´ò°ü
¡¡