Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Modeler   Code  
»áÔ±   
 
   
 
 
     
   
 ¶©ÔÄ
  ¾èÖú
ʹÓÃAngular¿ª·¢¡°ÔÆÆ½Ì¨¿ØÖÆÌ¨¡±µÄʵ¼ù×ܽá
 
×÷Õߣºlizeyang À´Ô´£ºc²©¿Í ֪ʶ¿â ·¢²¼ÓÚ£º2016-8-18
  3170  次浏览      31
 

ǰÑÔ

±ÊÕßĿǰÔÚ»¥ÁªÍø¹«Ë¾¸ºÔ𿪷¢Ë½ÓÐÔÆÆ½Ì¨¡£ÔÆÆ½Ì¨¿ØÖÆÌ¨£¬ÊÇÒ»¸öµäÐ͵ĹܿØCRUDϵͳ£¬ÓÃÓÚ¹ÜÀí¸÷ÖÖIaaS×ÊÔ´¡£ÎªÁËÈÃǰ¶ËÄÜ´ïµ½·Â¿Í»§¶ËÌåÑ飬ͬʱ±£ÕÏ´úÂë¼Ü¹¹ÇåÎú¹æ·¶£¬Ò×ά»¤£¬×îÖÕÎÒÃÇÑ¡ÔñÁËAngular£¨1.X£©`×÷ÎªÔÆÆ½Ì¨¿ØÖÆÌ¨µÄǰ¶Ë¿ò¼Ü¡£±¾ÎÄÖ÷ÒªÎ§ÈÆAngular£¬½éÉÜÎÒÃÇÔÚ¿ª·¢¿ØÖÆÌ¨¹ý³ÌÖеĵãµãµÎµÎ¡£

1 ΪʲôѡÔñAngular

1.1 ÇáËɹ¹½¨SAP(single application page£¬µ¥Ò³ÃæÓ¦ÓÃ)

¿ÉÒÔ˵£¬ÕâÊÇÎÒÃÇ×îÖÕÑ¡ÔñÁËAngularµÄÖØÒªÔ­Òò£¬Èç¹ûÄãÏ£Íû¹¹½¨Ò»¸ö½á¹¹ÇåÎú£¬¿Éά»¤£¬¿ª·¢Ð§Âʸߣ¬ÌåÑéºÃµÄµ¥Ò³Ó¦Óã¬AngularÊÇÏ൱²»´íµÄÒ»¸ö¿ò¼Ü¡£

µ¥Ò³ÃæÓ¦ÓõÄ÷ÈÁ¦

ʲôÊǵ¥Ò³ÃæÓ¦Óã¿Single Page ApplicationÖ¸Ò»ÖÖ»ùÓÚwebµÄÓ¦ÓûòÕßÍøÕ¾£¬Ò³ÃæÓÀÔ¶¶¼ÊǾֲ¿¸üÐÂÔªËØ£¬¶ø²»ÊÇÕûҳˢС£µ±Óû§µã»÷ij¸ö²Ëµ¥»òÕß°´¼üʱ£¬²»»áÌø×ªµ½ÆäËûµÄÒ³Ãæ£¬Ç°¶Ë»á´Óºó¶Ë»ñÈ¡¶ÔÓ¦Ò³ÃæµÄÊý¾Ý¶ø²»ÊÇhtml£¬Ö®ºóÔÚÒ³ÃæÖÐÐèÒª¸üÐÂÄÚÈݵĵط½£¬¾Ö²¿¶¯Ì¬Ë¢Ð£¬¶øÈç¹ûÊǶàÒ³ÍøÕ¾£¬µ±Óû§·ÃÎʲ»Í¬µÄÒ³ÃæÊ±£¬·þÎñÆ÷»áÖ±½Ó·µ»ØÒ»¸öhtml£¬È»ºóä¯ÀÀÆ÷Ö±½Ó½«Õâ¸öhtmlÕ¹ÏÖ¸øÓû§¡£ÏÖÔڴ󲿷ÖÔÆ¿ØÖÆÌ¨£¬¶¼Êǵ¥Ò³Ó¦Óüܹ¹£¬µ¥Ò³Ó¦ÓÃÄÜ´øÀ´Ò»ÖÖ¸ü½üËÆ¿Í»§¶Ë£¬¶ø²»ÊÇÍøÒ³µÄÌåÑé¡£

µ¥Ò³ÃæÓ¦ÓÃÍøÕ¾£¬ÔÚÌåÑé·½Ãæ£¬¾ßÓÐÈçÏÂÓŵ㣺

1. ×ö¡°Ò³ÃæÌø×ª¡±Ê±£¬ÓÀÔ¶¶¼ÊǾֲ¿¶¯Ì¬Ë¢Ð£¬Óû§²»»á¸Ð¾õÕû¸öÆÁÄ»ÉÁÁËһϣ¬¶øÊÇÐèÒª±ä»¯µÄÇøÓò×öÁ˾ֲ¿Ë¢Ð¡£ÀýÈçÁ½¸ö²»Í¬µÄÒ³Ãæ£¬¼ÙÉèÒ³ÃæÔªËØ¶¼ÊÇÒ»ÑùµÄ£¬Ö»ÊÇÔªËØÖеÄÎÄ×Ö²»Ò»Ñù£¨ÀýÈçÿ¸öÒ³Ãæ¶¼ÓÐÒ»¸öÃæ°üм£¬Ò»ÅŰ´Å¥¼°Ò»¸ö±í¸ñ£¬Õ⼸¸öÔªËØµÄ²¼¾ÖÒ²ÊÇÒ»ÑùµÄ£©£¬µ±Óû§Ìø×ªµ½ÁíÍâÒ»¸öÒ³ÃæÊ±£¬»á¿´µ½Õû¸öÒ³Ãæ²¢Ã»ÓÐÖØÐÂäÖȾ£¬Ö»ÊÇÎÄ×Ö·¢ÉúÁ˱仯¡£¼òµ¥µØËµ£¬ÕâÓеãÀàËÆÄãÔÚʹÓÃÒ»¸öapp£¬ÓÀÔ¶¶¼ÊǾֲ¿·¢Éú±ä»¯£¬Äã¼û¹ýÄĸöapp£¬µ±Äãµã»÷µ½²»Í¬µÄ¹¦ÄÜÊÓͼʱ£¬Õû¸öÆÁÄ»»á°×ÆÁÉÁһϵÄô£¿

2. URL¿ÉÊղأ¬¿É»ØÍË¡£Èç¹ûä¯ÀÀÆ÷µÄurlÒ»Ö±²»±ä£¬ÄÇ»¹²»ÄܳÆÎªÕæÕýµÄµ¥Ò³Ó¦Óᣲ»Í¬µÄÄ£¿é£¬²»Í¬µÄ×ÊÔ´Ò³Ãæ£¬¶ÔÓ¦µÄurlÊDz»Ò»ÑùµÄ¡£µ±Óû§Ìø×ªµ½ÁíÍâµÄ¹¦ÄÜʱ£¬»á·¢ÏÖurl»á±ä³É¶ÔÓ¦µÄurl£»Í¨¹ý»ØÍ˼ü£¬Ò²¿ÉÒԻص½Ö®Ç°ä¯ÀÀµÄÒ³Ãæ¡£Õâ¸öÌØÐÔÓÐʲôÓÃÄØ£¿Èç¹ûurl²»»áËæ×Ź¦Äܶø±ä»¯£¬µ±Óû§Ë¢Ðµ±Ç°Ò³ÃæÊ±£¬¾Í»á»Øµ½Ö®Ç°µÄĬÈÏÒ³Ãæ£¬¶ø²»ÊÇÔ¤ÆÚµÄµ±Ç°¹¦ÄÜÒ³Ãæ£¬Í¬ÑùµÄ£¬urlÒ²²»¾ß±¸¿ÉÊÕ²ØÐÔ£¬ÒòΪµã¿ªÖ®Ç°ÊղصÄurl£¬ÓÀÔ¶¶¼ÊÇÍøÕ¾µÄĬÈÏÒ³Ãæ¡£Õâ¶ÔһЩǿ½»»¥µÄ¹Ü¿ØÏµÍ³À´Ëµ£¬ÌåÑéÊDz»ºÃµÄ¡£

3. ¹¦ÄÜÇл»Ê±¿ìËÙÁ÷³©¡£¿ìËÙÁ÷³©Ö÷ÒªÒòΪÁ½¸öÔ­Òò£º1¡¢Ò³Ãæ¶¼ÊǾֲ¿Ë¢Ð£¬´ÓÓû§¸Ð¹ÙÀ´Ëµ¸ü¿ì£»2¡¢ºÍºǫ́ͨÐŵÄÄÚÈÝ£¬¶¼ÊÇÊý¾Ý£¬¶ø²»ÊÇÒ³ÃæÄ£°å£¬ÇëÇóÁ¿¸üÉÙ£»¶ø´«Í³µÄÍøÕ¾£¬ÔÚ·ÃÎʲ»Í¬Ò³ÃæÊ±£¬·þÎñ¶Ë·µ»ØµÄÊÇhtml£¬Ìå»ý¸ü´ó£¬¶øÇÒ»¹ÐèÒªÒ»Ö±ÖØ¸´¼ÓÔØjs¡¢cssÎļþ¡£

4. ÒòÎªÍøÕ¾µÄµ¥Ò³»¯£¬¿ÉÒÔ¸üºÃµØÊ¹ÓÃһЩȫ¾ÖÀàµÄ½»»¥£¨×öÒ³ÃæÇл»Ê±£¬¿ÉÒÔÒ»Ö±±£³Ö²»±äµÄ½»»¥£©¡£ÀýÈç£¬Ò³ÃæÉÏÐèÒªÏÔʾij´ÎºÄʱ²Ù×÷µÄ½ø¶È£¬ÀýÈçÉÏ´«Îļþ½ø¶È£¬ºÄʱ²Ù×÷µÄµ±Ç°×´Ì¬µÈ£¬Äã¿ÉÒÔÔÚÒ³Ãæ×îÓÒ²à¹Ì¶¨ÏÔʾ½ø¶È¡£µ±Óû§·ÃÎʵ¥Ò³Ó¦ÓÃʱ£¬Ëû»áÃ÷°×£¬µ±Ëûµã»÷ÆäËûÄ£¿éʱ£¬Õâ¸öÓÒ²àµÄ֪ͨÀ¸²»»áÏûʧ£¬»á¹Ì¶¨ÏÔʾ¡£¶øÈç¹ûÊǶàÒ³ÍøÕ¾£¬Óû§Ôò»áÀ§»ó£¬µ£ÐÄ×Ô¼ºÌø×ªµ½ÆäËûÒ³Ãæºó£¬Õâ¸ö½ø¶È֪ͨ¾Í»áÏûʧ¡£

ΪʲôAngularÊǹ¹½¨SAPµÄÀûÆ÷

SAP¶ÔÓÚ´úÂë·Ö²ã£¬½á¹¹ÇåÎúÓиü¸ßµÄÒªÇ󣬶øAngularÊÇÒ»¸öMV**¿ò¼Ü£¬Æä×ÔÉíµÄÔ¼¶¨£¬¼õÉÙÁËÎÒÃÇд³ö¡°Ò»¹øÖࡱ´úÂëµÄ¿ÉÄÜÐÔ£¨ÔÚÏÂÃæÌÖÂÛ¡°±àд¸üÒ×ά»¤µÄ´úÂ롱ʱ»áÏêÊö£©

AngularµÄÖøÃûµÚÈý·½×é¼þui router£¬ÊÇÒ»¸ö¿ØÖÆÒ³ÃæÂ·ÓɵÄ×é¼þ£¬ËüÖ§³ÖÎÒÃÇ¿ìËٴµ¥Ò³Ó¦Óã¨Angular±¾ÉíµÄ·Óɹ¦ÄÜÒ²¿ÉÒÔ£¬µ«¹¦ÄÜ»áÉÔ΢ÈõһЩ£©

1.2 ±àд¸üÒ×ά»¤µÄ´úÂë

ºÜ¶àÈ˾­³£»á±§Ô¹£¬²»Í¬Ë®Æ½µÄÈË´ÕÔÚÒ»Æðдjs£¬µ½×îºóÏîÄ¿¾­³£¾ÍÊÇÒ»¹øÖ࣬ͬһ¸öjsÎļþÀïÃæ£¬¸÷ÖÖ¸÷ÑùµÄÂß¼­¶¼»ìÔÚÒ»Æð£¬ÒªÔöɾһ¸ö¹¦ÄÜ£¬¶¼¼òÖ±ÊǶñÃΡ£ÎÞ¹æ¾Ø²»³É·½Ô²¡£×÷Ϊһ¸ö¿ò¼Ü£¬AngularÎÞÒÉÄÜ´ó´ó¸ÄÉÆÕâÖÖ×´¿ö£¬Ê¹µÃÏîÄ¿ÕûÌåµÄ·Ö²ãÃ÷ÁË£¬Ö°ÔðÇåÎú¡£

¹Ø×¢µã·ÖÀë

¹Ø×¢µã·ÖÀëÊÇAngularµÄÒ»´óÌØµã¡£Ëùν¹Ø×¢µã·ÖÀ룬ָµÄÊǸ÷¸öÂß¼­²ãÖ°ÔðÇåÎú£¬ÀýÈ磬µ±ÄãÐèÒªÐÞ¸ÄÉõÖÁÌæ»»Õ¹ÏÖ²ãʱ£¬ÄãÎÞÐèÈ¥¹Ø×¢ÒµÎñ²ãÊÇÔõôʵÏֵġ£ÔÚAngularÖУ¬·þÎñ²ã£¨Ajax ÇëÇó£©- ÒµÎñ²ã£¨Controller£©- Õ¹Ïֲ㣨HTML Ä£°å£©- ½»»¥²ã£¨animation£©ÕâЩ¶¼ÓжÔÓ¦µÄ»ù´¡×é¼þ¡£²»Í¬×é¼þÖ°Ôð²»Í¬£¬ÄãÒ²ºÜÄѽ«±¾ÊôÓÚB×é¼þµÄÖ°Ôð·Åµ½A×é¼þÉÏȥʵÏÖ¡£¾Ù¼¸¸öÀý×Ó£º

1. html¼°controllerÐèҪЭͬ¹¤×÷£¬µ«Ö°Ôð·ÖÃ÷¡£ÊÓͼ¡¢½»»¥²ãÃæµÄÂß¼­£¬Ö»Äܷŵ½htmlÄ£°åÖУ¬controllerÖ»ÄÜÓÃÓÚÊý¾Ý³õʼ»¯£¬ËüûÓа취ȥ²Ù×÷domÔªËØ£¨²»ÓÃjqueryµÄ»°£©¡£ÕâÒ»µã·Ç³£ÖØÒª£¬´«Í³µÄjs´úÂ룬¾­³£»á³öÏÖµÄÇé¿ö£¬¾ÍÊÇjsÀïÃæ»áÓдóÁ¿dom²Ù×÷µÄÂß¼­£¬Í¬Ê±»¹ÓдóÁ¿Êý¾Ý²Ù×÷Ïà¹ØµÄÂß¼­£¬ÕâЩÂß¼­ñîºÏµ½Ò»Æð£¬µ±ÐèÒªµ¥¶ÀÖØ¹¹Êý¾Ý²ã»òÕßÊÓͼ²ãʱ£¬¶¼»á×½½ó¼ûÖ⣬ͬʱ£¬ÓÉÓÚ´úÂëÁ¿µÄѸËÙÅòÕÍ£¬Î¬»¤ÆðÀ´Ò²»áºÜÂé·³¡£

2. ÄãÎÞ·¨½«ºǫ́ͨÐÅÂß¼­·Åµ½controllerÖÐʵÏÖ£¬¶øÒª·Åµ½factoryÖС£ºǫ́ͨÐÅÂß¼­£¬Ò»°ãÒª×ö³É¹«Óõġ£¶øÓÉÓÚcontrollerÖ®¼äÊDz»ÄÜÏ໥µ÷Óõģ¬ËùÒÔÄãÒ²²»¿ÉÄܽ«ºǫ́ͨÐÅÂß¼­·Åµ½ÆäÖÐÒ»¸öcontroller£¬È»ºóÆäËûcontrollerÀ´µ÷ÓÃÕâ¸öcontroller±©Â¶µÄ½Ó¿Ú¡£ÄãΨһµÄ°ì·¨£¬¾ÍÊǽ«ºǫ́ͨÐÅÂß¼­·Åµ½factory»òÕßserviceÖС£

3. filter¼°directive¿´Ëƶ¼¿ÉÒÔÓÃÓÚÊý¾Ýת»»£¬µ«ÊµÔò²»Í¬¡£ÓÉÓÚfilterÖ»ÄÜ×öÊý¾Ý¸ñʽ»¯£¬²»Ö§³ÖÒýÈëÄ£°å£¬ËùÒÔ¹«ÓõÄui½»»¥£¬Éæ¼°µ½domÔªËØ»òÕßÐèÒªÒýÈëhtmlÄ£°åʱʱ£¬ÄãÒ²Ö»ÄÜͨ¹ýdirectiveÀ´ÊµÏÖ¡£

×ÛÉÏËùÊö£¬AngularÏîÄ¿£¬ÆäÕ¹Ïֲ㡢½»»¥²ãµÄÂß¼­£¬¶¼ÊÇÔÚhtml»òÕßÖ¸ÁîÖУ¬·þÎñ²ã£¨ºǫ́ͨÐÅ£©£¬Ö»ÊʺϳöÏÖÔÚfacoty£¨service£©ÖУ¬ÒµÎñ²ã£¬Ö»ÄÜÓÉcontrollerÀ´¸ºÔð¡£ÕâÑùÿ²ãµÄÂß¼­¶¼ÊÇÇᱡµÄ£¬¶ø²»ÊǾÀ½áÔÚÒ»Æð¡£

Èç¹ûÄãÖ»ÊÇÒªÓÅ»¯Õ¹Ê¾Âß¼­£¬ÄÇÄã¸Ä¸Ähtml¾Í¿ÉÒÔÁË£¬²»ÓÃÈ¥¹ÜcontrollerÊÇÔõôдµÄ¡£ÕâÒ»µãÎÒÃÇÓÐÇ×ÉíÌå»á¡£ÏîÄ¿¿ª·¢¹ý³ÌÖУ¬ÎÒÃÇÖØ¹¹ÁËÊÓ¾õЧ¹û£¬ËùÓеÄhtml¶¼ÒªÖØÐ´¡£µ«ÊÇ£¬ÔÚÖØ¹¹Ê±£¬ÎÒÃǵÄcontroller¡¢ºǫ́ͨÐÅ(factory)£¬filter»ù±¾¶¼²»Óøģ¬Ö»Òª¸Ähtml¾ÍÐÐÁË¡£¶øÈç¹ûÏîÄ¿ÊÇÓÃjqueryдµÄ£¬ÏÔÈ»ÊDz»¿ÉÄÜ×öµ½ÕâÑùµÄ£¬ÄãÐèÒªÖØÐÂΪеÄhtmlÔö¼ÓһЩ¿É¹©jqueryÑ¡ÔñÆ÷ʹÓõÄclass»òid£¬È»ºóÄãÐèÒªÔÚjsÀïÃæ°ó¶¨Ê¼þ£¬¸ù¾ÝеÄhtml¡¢cssµÄclassµÈдеĽ»»¥Ð§¹û£¬¶øÔÚAngularÉÏ£¬ÕâЩÊÂÇ飬ÓÐЩ²»ÓÃ×öÁË£¨ÀýÈçΪÁËjqueryΪhtmlÔªËØÐÂÔöclass£¬id¡¢ÔÚjsÖаó¶¨Ê¼þ£©£¬ÓÐЩ£¨ÀýÈç½»»¥Ð§¹û£©ÔòÖ»Òª¸Ähtml¾ÍÐУ¬¶ø²»ÊǸÄjs¡£

AngularΪÎÒÃÇʡȥµÄ´úÂëÁ¿

´úÂëÓ·Öס¢·±¶àÒ²ÊÇJS´úÂë»ìÂÒ£¬ÄÑ×éÖ¯µÄÔ­ÒòÖ®Ò»¡£Òò´Ë£¬ÊµÏÖͬÑùµÄ¹¦ÄÜ£¬´úÂëÁ¿Ô½ÉÙ£¬³éÏó³Ì¶ÈÔ½¸ß£¬ÔÚijÖ̶ֳÈÉÏÒâζ×ÅÏîÄ¿¸ü·½±ãά»¤¡£¶øÄܼõÉÙ´úÂëÁ¿£¬Ò²ÊÇAngular±»ÍƳçµÄÒ»´óÓŵ㡣ÈÃÎÒÃÇÀ´¿´¿´£¬ËüÊÇÈçºÎ¼õÉÙÁË´úÂëÁ¿£º

1. Ê×ÏÈ£¬×÷Ϊһ¸ö´ó¶øÈ«µÄ¿ò¼Ü£¨Ë«Èн££¬ÓÐÀûÓб×)£¬AngularÌṩµÄÖî¶àÌØÐÔ£¬Ê¹ÎÒÃÇ¿ÉÒÔ¸üרעÓÚÒµÎñ´úÂëµÄ±àд¡£

2. Æä´Î£¬AngularË«ÏòÊý¾Ý°ó¶¨µÄÌØÐÔ£¬½«ÎÒÃÇ´Ó´óÁ¿µÄ°ó¶¨´úÂëÖнâ·Å³öÀ´¡£ºÍjquery¶Ô±È£¬Angular²»ÓÃΪÁËÑ¡Ôñij¸öÔªËØ£¬¶ø¿ÌÒâΪhtm¼ÓÉÏһЩ¸úÑùʽÎ޹صÄclass£¬id£»²»ÓÃдһ¶Ñ´ÓhtmlÔªËØÖÐȡֵ£¬ÉèÖµµÄ´úÂ룻²»ÓÃÔÚjs´úÂëÖаó¶¨Ê¼þ£»²»ÓÃÔÚjsÖµ·¢Éú±ä»¯Ê±Ð´´úÂëÈ¥¸üÐÂÊÓͼhtmlÏÔʾµÄÖµ¡£Ë«ÏòÊý¾Ý°ó¶¨£¬ÈÃÎÒÃǸæ±ðºÜ¶à¼òµ¥ÎÞȤµÄ°ó¶¨Ê¼þ¡¢°ó¶¨ÖµµÄ´úÂë¡£

3. directive¡¢filter¡¢factoryµÈµÈ£¬ÌìÈ»µÄ¾ÍÊÇÒ»¸ö¸ö¿ÉÒÔ¸´ÓõÄ×é¼þ£¬¼õÉÙÁËÈßÓàÖØ¸´´úÂ롣һЩÐèÒª¹«ÓõÄÂß¼­£¬Èç¹û·ÅÔÚcontrollerÖУ¬¶¼»áÏ൱±ðŤ£¬¾ÍÕâÑù±»Angular¡°±Æ×Å¡±£¬°Ñ¹«ÓÃÂß¼­¶¼·Åµ½directive¡¢filter¡¢factoryÖÐÈ¥¡£

2 ¿ª·¢ÐĵÃ×ܽá

2.1 ÎÒÀí½âµÄAngular»ù´¡×é¼þ

»¯·±Îª¼ò£¬¼¸´ó»ù´¡×é¼þµÄʹÓó¡¾°

Ê×ÏÈÎÒÃÇÐèÒªÀíÇåAngular¼¸¸ö×é¼þµÄʹÓó¡¾°¡£AngularµÄÒ»¸ö벡£¬¾ÍÊÇиÅÄÐÂÌØÐÔÌ«¶à£¬ÐÂÊÖÒ»ÏÂ×ÓÒªÁ˽âÕâô¶à£¬Ñ§Ï°ÇúÏßÂÔ¶¸¡£ÎªÁ˰ïÖú´ó¼ÒÀí½â£¬×ܽáÏÂÎÒÀí½âµÄ¼¸´ó×é¼þʹÓó¡¾°¡£

1. ÇëÇó×ÊÔ´ÓëÊý¾Ý»º´æµÄ¶«Î÷·Å½øFactory¡£Factory¡¢Service±¾ÖÊÉ϶¼ÊÇProviderµÄÓï·¨ÌÇ£¬Á½ÕßÖ»ÊÇʹÓ÷½Ê½ÓÐËù²»Í¬£¬½¨Òé´ó¼ÒÖ±½Ó¶¼ÓÃFactory£¬ÃâµÃÁ½¸ö¸ÅÄî¾À²ø²»Çå¡£

2. Êý¾ÝÐèÒª¸ñʽ»¯µÄ¶«Î÷ÓÃfilter´¦Àí¡£ÀýÈç°Ñstatusֵת»¯ÎªÖÐÎÄÖµ£¬°Ñʱ¼ä´Áת³Éʱ¼ä×Ö·û´®Ö®Àà¡£

3. ÐèÒª¹«ÓõÄdom²Ù×÷£¬·ÅÔÚÖ¸ÁîÖÐȥд¡£ÁíÍ⣬Èç¹ûÐèÒªÒýÈëjquery×é¼þ£¬Ò²¿ÉÒÔд¸öÖ¸Áî°Ñjquery×é¼þ³õʼ»¯´úÂë·Å½øÈ¥¡£

4. controllerÓëÊÓͼ°´ÕÕÒ»¶ÔÒ»µÄ¹ØÏµÎ¬»¤£¬ÔÚcontrollerÄÚÖ÷Òª³õʼ»¯scope¶ÔÏóÓëÔÚscopeÉÏÌí¼Ó·½·¨£¨ÐÐΪ£©£¬ÎªViewModel×ö¸³Öµ¡£ÆäËûËùÓйý³Ì¶¼²»Ó¦¸Ã³öÏÖÔÚ Controller ÖС£controllerÖв»Ó¦¸Ã³öÏÖºÍÒ³ÃæÕ¹Ê¾¡¢½»»¥Ïà¹ØµÄ´úÂë¡£ÀýÈçչʾÒþ²ØÄ³Ð©ÔªËØÖ®À࣬ÕâЩӦ¸ÃÊÇhtmlÄ£°å»òÕßÖ¸ÁÔð¡£´úÂëÔ½±¡Ô½ºÃ¡£

5. È«¾Ö³£Á¿Öµ·Åµ½constant

Ö¸Ádirective£©Ä§·¨

Ö¸ÁîÕâ¸öÌØÐÔ£¬Óá°Ä§·¨¡±Ò»´ÊÀ´ÐÎÈÝËü£¬¶¼²»Îª¹ý¡£

½â¾öµÄÍ´µã

Ò»ÑÔÒÔ±ÎÖ®£¬Ö¸ÁîÌṩÁËÒ»Ì×ǰ¶Ë×é¼þ»¯µÄ·½·¨¼°Ô¼¶¨£¬ÕâʹµÃ±àд£¬Ê¹ÓÃui×é¼þ¸ü¼Ó·½±ãÁË¡£Ïà¶ÔÓÚjquery£¬Ëü½â¾öÁËÒÔÏÂÍ´µã£º

1. ¶¯Ì¬Éú³ÉÁËhtmlÔªËØºó£¬²»ÓÃÔÙÊÖ¶¯È¥ÎªÆä¼ÓÉÏjsÌØÐÔ¡£¾Ù¸öÀõ×Ó£ºhtmlÔ­ÉúµÄcheckbox¿ò±È½Ï³ó£¬ÔÚjqueryʱ´ú£¬¿ÉÒÔ½«checkboxÌæ»»³É×Ô¶¨ÒåµÄЧ¹û£¬Èç¹ûÊÇÒ³ÃæÒ»¿ªÊ¼¾ÍÓеÄcheckbox£¬ÎÒÃÇ¿ÉÒÔÔÚdocument.readyµÄʱºòµ÷ÓÃ×Ô¶¨ÒåcheckboxµÄ³õʼ»¯·½·¨¡£µ«ÊÇ£¬Èç¹ûÕâ¸öcheckboxÊǶ¯Ì¬Éú³ÉµÄ£¬ÔÚÿ¸ö¶¯Ì¬Éú³ÉcheckboxµÄµØ·½£¬ÎÒÃǶ¼µÃÈ¥µ÷ÓÃcheckboxµÄ³õʼ»¯·½·¨£¬Ï൱Âé·³¡£µ«ÓÃÁËAngularµÄÖ¸Á¾Í²»»áÓÐÕâ¸öÎÊÌâÁË£¬Ö»ÒªÔÚÄ£°åµÄchceckboxÖмÓÉÏÖ¸Á²»¹ÜÕâ¸öÄ£°åÊǶ¯Ì¬±ä»¯µÄ»¹ÊǾ²Ì¬µÄ£¬ÎÞÐèͨ¹ýÒµÎñ´úÂëÀ´Öð¸öµ÷Óóõʼ»¯·½·¨£¬³ÊÏÖ¸øÓû§µÄ£¬¾ÍÒѾ­ÊÇÌæ»»ºóµÄcheckboxЧ¹û¡£

2. Ò»¸ö×é¼þµÄhtmlºÍjs£¬ÊÇÒ»¸öÕûÌ壬¶ø²»ÊǸîÁѵġ£»ùÓÚjqueryµÄui×é¼þ£¬ÆäÒýÈë·½·¨£¬²»ÉÙÊÇÕâÑùµÄ£¬Ê×ÏÈ£¬ÒªÇóÄã×Ô¼ºcopyÒ»¶Îhtml£¬È»ºóÔÙµ÷Óóõʼ»¯·½·¨¡£¶øÖ¸ÁîÔòÖ§³Ö¶¨Òå¶ÔÓ¦µÄÄ£°åhtml£¬Óû§ÔÚÒýÈëʱ£¬¿ÉÄÜֻҪдһ¸öÖ¸Áî±êÇ©£¬¾Í»á×Ô¶¯Éú³ÉNÐеÄhtml¼°°ó¶¨¶ÔÓ¦µÄjsЧ¹û¡£µ±È»£¬ÀíÂÛÉÏjqueryÒ²ÄÜ×öµ½ÕâÑù£¬µ«ÊÇ»á±ÈAngularµÄʵÏÖÂé·³Ðí¶à¡£

3. Ó¦Óá¢ÒƳýuiÌØÐÔʱ·½±ãÖ±¹Û¡£¼ÙÉèÓÐÕâôһ¸öÐèÇ󣬸øÒ»¸öÆÕͨÊäÈë¿òÔö¼ÓÊäÈëÏÞÖÆ£¬Ö»ÄÜÊäÈëÌØ¶¨×Ö·û£¨Èç×ÖĸÊý×Ö£©£¬Ð´ºÃ¶ÔÓ¦Ö¸ÁֻҪ¸øÕâ¸öinputÊäÈë¿ò¼ÓÉÏÕâ¸öÖ¸Áî±êÇ©£¬¾ÍÄÜÂíÉÏÓ¦ÓÃÕâ¸öÌØÐÔ£¬Ö®ºóÒªÒÆ³ý£¬Ö»Òª°Ñ±êǩȥµô¾ÍºÃ¡£Ïà±È֮ϣ¬jquery¾Í»áÂé·³¶à¡£jqueryÏ£¬Ò»°ãÊÇͨ¹ýÔªËØÑ¡ÔñÆ÷À´°ó¶¨jsЧ¹û¡£Ó¦ÓÃʱ£¬ÄãÐèÒª¿¼ÂǸø¶ÔÓ¦µÄÊäÈë¿òÖ¸¶¨Ò»¸öºÏÊʵÄÔªËØÑ¡ÔñÆ÷¡£ÒƳýÌØÐÔʱ£¬ÄãÒª¿¼ÂÇ:1¡¢ÓпÉÄÜÄãÔÚ¶à¸öµØ·½¶¼¼ÓÁËÏàͬµÄ³õʼ»¯´úÂ룬ÕâЩjs¶¼ÐèÒªÒÆ³ý£»Èç¹ûÔªËØÑ¡ÔñÆ÷ÓõÄÊÇclass£¬µÃ¿¼ÂÇÊDz»ÊÇÆäËûÊäÈë¿òÒ²ÓÐÕâ¸öclass£¬Èç¹ûÊÇ£¬ÄÇÃ´ÒÆ³ý´úÂëʱҲ»áÓ°Ïìµ½ÆäËûÊäÈë¿ò¡£

¼¼ÇÉ

Èç¹ûÄãÐèÒªÒýÈëjquery×é¼þ£¬Äã¿ÉÒÔдһ¸öÖ¸ÁȻºóÔÚÆäÖгõʼ»¯¸Ã×é¼þ¡£

ҪעÒârequire²ÎÊýÖеÄÖµÊÇÍÕ·åµÄ£¬ÔÚhtmlÖо͵Ãת³É¶ÔÓ¦µÄÖл®ÏßÃüÃû£¬ÀýÈçÓÐrequire²ÎÊýphoneKey,ÄÇôhtmlÖÐӦΪphone-key=¡±xxx¡±¡£ËäÈ»Õâ¸öµÀÀíºÜdzÏÔ£¬µ«¾­³£Ò»²»Ð¡ÐľͻáŪ´íÁË£¬È»ºó·¢ÏÖÔÚÖ¸ÁîÄÚ²¿Ôõô×Ŷ¼Äò»µ½require²ÎÊý¡£

Èç¹ûÄãÔÚlinkÖмÓÁËelm.bind(¡®click¡¯)£¬µ±click»Øµ÷º¯ÊýÖУ¬×÷ÓÃÓòµÄÖµ·¢Éú±ä»¯£¬¼ÇµÃµ÷ÓÃscope.$apply()£¬·ñÔòÖµ±ä»¯²»»áÉúЧ

2.2 Îļþ¡¢Ä¿Â¼Ô¼¶¨

Ŀ¼½á¹¹

µÚÈý·½¿â¡¢css¡¢Í¼Æ¬·ÅÖõ½ÄĸöĿ¼£¬²»ÔÚ±¾ÎÄÌÖÂÛ·¶Î§£¬ÕâÀïÂÔ¹ý¡£ÐèÒª½øÒ»²½ËµÃ÷µÄ£¬ÊÇÒµÎñ´úÂëĿ¼¡£

.
©À©¤©¤ pages
| ©À©¤©¤ common
| | |©¤©¤ js
| | |©¤©¤ layout
| | ©¸©¤©¤ template
| ©À©¤©¤ Ä£¿éA£¬ÀýÈçÈçfirewall£¨ÔÆÆ½Ì¨ÖеķÀ»ðǽģ¿é£©
| | |©¤©¤ a.main.ctrl.js
| | |©¤©¤ a.main.html
| | |©¤©¤ a.create.ctrl.js
| | |©¤©¤ a.create.box.html
| | |©¤©¤ a.svr.js
| | ©¸©¤©¤ a.fil.js
| ©¸©¤©¤ Ä£¿éB£¬ÀýÈçÈçdisk£¨ÔÆÆ½Ì¨ÖеÄÓ²ÅÌÄ£¿é£©
©¸©¤©¤ index.html

ÎÒÃǽ«ÏµÍ³×ÔÉíµÄjs¡¢htmlÄ£°å¶¼·ÅÔÚpagesĿ¼£¬ÆäÖÐ

- ×ÓĿ¼common£º·ÅÖù«ÓõÄjs¼°Ä£°å

- ÆäËû×ÓĿ¼£¬ÒÔ¹¦ÄÜÄ£¿éÃû×÷ΪĿ¼Ãû£¬È»ºó½«Õâ¸öÄ£¿éÏà¹ØµÄjs¼°Ä£°å·ÅÔÚÆäÖС£ÕâÑù¿ª·¢Í¬¸öÄ£¿é¹¦ÄÜʱ£¬¿ÉÒÔ·½±ãµØÔÚhtml¼°¶ÔÓ¦jsÖ®¼äÇл»¡£ÓÐЩ´úÂë¹æ·¶¿ÉÄÜ»¹»á½¨ÒéÔÚÄ£¿éÕâÒ»¼¶Ä¿Â¼Ï£¬ÔÙ¸ù¾ÝAngularµÄ¼¸´ó×é¼þcontroller£¬filter£¬serviceµÈ£¬´´½¨²»Í¬µÄ×ÓĿ¼£¬ÀýÈçÄ£¿éA/controller£¬Ä£¿éA/serviceÖ®À࣬ÎÒÃÇÔò½«ËùÓÐjs¼°html·ÅÔÚͬһ¼¶£¬ÕâÑù×öÖ÷ÒªÓм¸¸öÔ­Òò£º

1. ÎÒÃǵÄÏîÄ¿£¬Æ½¾ùÿ¸öÄ£¿éÖ»ÓÐ10¸öÎļþ£¬ÌرðÊÇÿ¸öÄ£¿éÒ»°ãÖ»ÓÐÒ»¸öfilter¼°service£¬ÎªÁËÕâÒ»¸öÎļþ´´½¨Ò»¸öĿ¼£¬ÏԵöà´ËÒ»¾Ù¡£

2. ͨ¹ýÎļþÃû£¬ÒѾ­¿ÉÒԺܷ½±ãµØÇø·Ö²»Í¬µÄjs×é¼þÀàÐͼ°htmlÄ£°åÀàÐÍ£¬Í¬Ê±£¬ÓÉÓÚIDEÒ»°ã»á°´ÕÕÎļþÃû×ÖĸÅÅÐò£¬ËùÒÔÏàͬ¹¦ÄܵÄjs¼°html»á°¤ÔÚÒ»Æð£¬²éÕÒ¶ÔÓ¦µÄÄ£°å»òjs´úÂë»á·½±ãºÜ¶à¡£

ÎļþÃûÔ¼¶¨

Õâ¸öÔ¼¶¨¶ÔÓÚAngularÀ´Ëµ£¬ÌرðÖØÒª¡£¾ßÌåµÄÔ¼¶¨ÊÇ£º

Ä£¿éÃû.¹¦ÄÜ.×é¼þÀàÐÍ.Îļþºó׺£¨Èçfirewall.create.ctrl.js)

ÀýÈ磬Ϊ¡°·À»ðǽ¡±Ä£¿é¿ª·¢¡°´´½¨·À»ðǽ¡±µÄ¹¦ÄÜ£¬ËüµÄcontroller£¬¶ÔÓ¦µÄjsΪ£ºfirewall.create.ctrl.js£¬¶ÔÓ¦µÄhtmlÄ£°åΪ£ºfirewall.create.ctrl.html¡£ÎªÁËÎļþÃûÊéдµÄ·½±ã£¬¶¨ÒåÁË×é¼þµÄ¼òд

- controller -> ctrl

- factory,service -> svr

- filter -> fil

- directive -> dire

ÕâÑùÔ¼¶¨ÓÐÁ½¸öÏÔ¶øÒ×¼ûµÄÓŵ㣺

1. ͨ¹ýÎļþÃû£¬¾ÍÄÜÖªµÀ¶ÔӦģ¿é¡¢Angular»ù±¾×é¼þÀàÐÍ¡¢ÊÇÄ£°åhtml»¹ÊÇjs

2. Ïàͬ¹¦ÄܵÄjs¼°html£¬»á°¤ÔÚÒ»Æð£¨Èç¹ûIDEÊǰ´ÕÕÎļþÃüÃûÅÅÐò£©

2.3 Óëºó¶Ë·þÎñÆ÷ͨÐÅ

¸ù¾Ýºǫ́½Ó¿Ú¹æ·¶£¬½áºÏAngular×ÔÉíÄÜÁ¦£¬ÎÒÃÇ×öÁËһЩ·â×°£¬Ê¹½Ó¿ÚÇëÇóÂß¼­±äµÃ·Ç³£¼òµ¥¡£¾ßÌåÎÊÌâ¾ßÌå·ÖÎö£¬ÏÈ¿´¿´ÎÒÃǵĺǫ́½Ó¿ÚÏìÓ¦µÄ±ê×¼¸ñʽÊÇÔõÑùµÄ£¬Ç°¶Ë»á°´ÕÕÕâ¸ö½Ó¿Ú·µ»Ø¸ñʽ×öһЩ¶¨ÖÆ£º

{
errcode:0,
errmsg:"",
data:[
{
id:"test",
name:"test"
}
]
}

ÎÒÃÇÏîÄ¿·þÎñ¶ËµÄ±ê×¼ÏìÓ¦ÊÇÒ»¸öjson£¬Í¨¹ýerrcodeÃèÊö´Ë´ÎÇëÇóµÄ½á¹ûÂ룬ͨ¹ýerrmsgÃèÊö³ö´íµÄÔ­Òò£¨¼ÙÈçÇëÇó³ö´íµÄ»°£©£¬Í¨¹ýdata·µ»ØÕý³£Êý¾Ý¡£

³ö´í´¦Àí

µ±½Ó¿Ú·µ»ØµÄerrno!=0ʱ£¬ËµÃ÷½Ó¿Ú·µ»ØÒì³££¨ÏµÍ³Òì³£»òÓû§ÊäÈë´íÎ󣩣¬ÕâʱÎÒÃÇÏ£ÍûÄܵ¯¿òÌáʾÓû§¡°³ö´íÁË¡±¡£ÏÔÈ»£¬Èç¹ûÔÚÿ¸ö½Ó¿ÚÇëÇóÂß¼­ÖУ¬¶¼È¥Ð´Õâ¸öÂß¼­£¬»á·Ç³£ÀÛ׸£¬ËùÐÒAngularÌṩÁËÀ¹½ØÆ÷µÄ¹¦ÄÜ£¬ÎÒÃÇֻҪдһ¸öÀ¹½ØÆ÷£¬¾Í¿ÉÒÔ¶ÔËùÓеÄÒì³£·µ»Ø×öͳһ´¦Àí¡£

- Ê×ÏÈ£¬ÎÒÃÇÐèÒªÏÔʽµØÅ׳öhttp´íÎó¡£ÒòΪµ±ºǫ́Âß¼­³ö´í»òÕßÓû§ÊäÈë²ÎÊýÓÐÎóʱ£¬·µ»ØµÄHTTP״̬Âë¶¼ÊÇ200£¨ÕâÖ»ÊÇÎÒÃÇÏîÄ¿µÄÔ¼¶¨£©£¬Angular²¢²»»áÈÏΪ200Êdzö´íµÄÇé¿ö£¬Òò´Ë£¬ÎÒÃÇÐèÒª×öµãС¶¯×÷¡£

 $httpProvider.defaults.transformResponse.push(function (responseData) {
if (responseData.errno != 0) {
throw responseData;
}
¡­¡­
});

AngularµÄ$httpProvider.defaults.transformResponse.push£¨ÏÂÃæ¼ò³ÆtransformResponse£©º¯Êý£¬¿ÉÒÔͳһ´¦ÀíËùÓеÄhttpÏìÓ¦¡£ÔÚÕâÀÎÒÃǾÍͨ¹ýËü²¶»ñÁËËùÓÐerrno!=0µÄÇëÇ󣬲¢ÍùÍâÅ×Ò»¸öexception

- ½Ó×Å£¬ÎÒÃÇÐèÒªÔÚ$httpProvider.interceptors²¶»ñÕâ¸öÒì³£²¢µ¯¿ò£¬´úÂëÈçÏÂ

 $httpProvider.interceptors.push(function () {
return {
responseError: function (response) {
if (response) {
if (response.hasOwnProperty("errmsg")) {
if (response.errno > 0) {
alert(response.errmsg);
} else {
alert("ϵͳά»¤ÖУ¬ÇëÉÔºòÖØÊÔ");
}

}
else {
if (response.status == 404) {
alert("±§Ç¸£¬ºǫ́·þÎñ³ö´í,ÕÒ²»µ½¶ÔÓ¦µÄ½Ó¿Ú");
}
else {
alert("±§Ç¸£¬ºǫ́·þÎñ³ö´í");
}
}
}
}
}
});

ÓÐЩÈË¿ÉÄÜ»áÎÊ£¬ÎªÉ¶²»Ö±½ÓÔÚÒ»¿ªÊ¼µÄtransformResponseº¯ÊýÖÐд´íÎó´¦ÀíÂß¼­ÄØ£¿ÕâÊÇÒòΪ£¬Ä³Ð©Òì³£Çé¿ö£¬²¢²»»áµ÷ÓÃtransformResponseÂß¼­£¬ÀýÈ磬µ±url²»´æÔÚʱ£¬webÈÝÆ÷ĬÈÏ·µ»ØµÄ404¡¯Ò³Ã桯£¬»òÕßµ±³ÌÐò³ö´íʱ£¬ÏµÍ³´úÂëδ´¦ÀíÕâ¸ö´íÎó£¬webÈÝÆ÷»á·µ»ØÄ¬ÈϵÄ500¡¯Ò³Ã桱£¬Õâʱ¾ù»áÖ±½Ó½øÈëinterceptorsµÄresponseErrorÖС£Òò´Ë£¬ÎªÁ˸²¸ÇËùÓеÄÒì³£Çé¿ö£¬ÐèÒªÔÚtransformResponseÖÐÅ׳öÒì³££¬È»ºóÓÉresponseErrorͳһ´¦Àí¡£

ÏìÓ¦ÄÚÈݸñʽ»¯

ÓÉÓÚǰ¶Ë¹ØÐĵÄÊý¾Ý£¬ÊÇ·ÅÔÚÏìÓ¦ÄÚÈݵÄdataÊôÐÔÖС£¶øÁíÍâÁ½¸öÊôÐÔerrno¡¢errmsg£¬µ±·µ»ØÕý³£Êý¾Ýʱ£¬Ç°¶ËÊDz»¹ØÐĵģ¬ÎªÁËÈ¡Êý¾Ýʱ¸ü¼Ó·½±ã£¬¿ÉÒÔ½øÒ»²½ÓÅ»¯transformResponseÖеĴ¦Àí¡£µ±errno==0ʱ£¬¶¼·µ»ØresponseData.data£¬ÕâÑù£¬ÔÚÒµÎñÂß¼­ÀïÃæ£¬¾Í¿ÉÒÔÖ±½ÓʹÓÃdataÁË£¬¶ø²»ÓÃÈ¡xxx.data

$httpProvider.defaults.transformResponse.push(function (responseData) {
if (responseData && responseData.hasOwnProperty("errno")
&& responseData.hasOwnProperty("errmsg") && responseData.hasOwnProperty("data")) {
if (responseData.errno == 0) {
if (Angular.isArray(responseData.data) || Angular.isObject(responseData.data)) {
return responseData.data;
} else {
return responseData
}
}
else {
throw responseData;
}
}
else {
return responseData;
}
});

¶Ô$resource×ö½øÒ»²½·â×°

ÏîÄ¿ÖÐÿ¸öÄ£¿é£¬¶¼´´½¨¶ÔÓ¦µÄsvrÎļþ£¬ÓÃÓÚÓëºǫ́½øÐÐͨÐÅ¡£ÀýÈ硱ӲÅÌ¡±Ä£¿é£¬¶ÔÓ¦DiskSvr£¬¡°·À»ðǽ¡°Ä£¿é£¬¶ÔÓ¦FirewallSvr¡£ÕâÑù»®·Öºó£¬Ç°¶ËËùÓеĺǫ́ÇëÇóÂß¼­£¬¶¼»áºÜÇåÎúÒ×ÕÒ¡£

ÔÚ·â×°ºǫ́ͨÐÅÂß¼­Ê±£¬ÎÒÃÇÓõ½$resource£¬ÕâÊÇAngular×ÔÉíµÄÒ»¸ö×é¼þ£¬µ±ÄãµÄºǫ́½Ó¿Ú·ûºÏRESTFul¹æ·¶Ê±£¬Äã¿ÉÒԺܷ½±ãµØÊ¹ÓÃ$resourceºÍºǫ́½øÐÐͨÐÅ¡£¶øÓÉÓÚÎÒÃǵĺǫ́²¢²»ÊÇÍêÕûµÄRESTFulʵÏÖ£¬ÎÒÃÇÐèÒª×öһЩ¼òµ¥µÄ·â×°¡£

app.factory("DiskSvr", function () {

var url = "schedule/disk";

var customAPI = {
clone: {
method: "post"
}
}

return getApi(url, customAPI);
});

//¹«Óõģ¬Ã¿¸öSvr¶¼¿ÉÒÔÓÃ
getApi = function (path, customAPI) {

Angular.forEach(customAPI, function (value, key) {
if (!value.url) {
value.url = util.connectPath(path, key);
} else {
value.url = util.connectPath(path, value.url);
}
});

//ËùÓеÄ
var defaultAPI = {
detail: {
url: baseUrl + "/get"
},
delete: {
url: baseUrl + "/delete",
method: "delete"
},
create: {
url: baseUrl + "/create",
method: "post"
},
update: {
url: baseUrl + "/update",
method: "put"
}
}

return $resource(path, {}, Angular.extend(defaultAPI, customAPI));
}

ÉÏÃæµÄ´úÂ룬Ö÷Òª×öÁËÕâЩÊÂÇ飺

1. ΪËùÓеÄsvr×¢ÈëÁËÿ¸öÄ£¿é½Ó¿Ú¶¼±Ø±¸µÄ£¬×î»ù´¡µÄÔöɾ¸Ä²éËĸö½Ó¿Ú¡£ÕâÑù¾ÍÎÞÐèÔÚÿ¸ösvrÖмÓÈëÕâЩ½Ó¿Ú¡£ÀýÈ磬ÔÚÒµÎñÂß¼­Öе÷ÓÃDiskSvr.create(),¾Í»áÓÃpostÇëÇóµ÷ÓÃschedule/disk/create½Ó¿Ú¡£

2. ¼ò»¯ÁËÐÂÔö½Ó¿ÚµÄÅäÖá£ÐÂÔöÒ»¸ö½Ó¿Ú£¬Ö»ÒªÅäÖöÔÓ¦µÄhttp·½·¨¼°Ãû×Ö¼´¿É¡£

3. ͨ¹ýÒýÓÃ$resource×é¼þ¡¢½øÒ»²½·â×°¼°svrÎļþµÄÔ¼¶¨£¬ÔÚÒµÎñcontrollerÖУ¬²»»á¿´µ½Èκεĺͺǫ́ͨÐŵĻù´¡´úÂ룬Èç¹ûÔÚÕâ¸öcontrollerÖÐÄãÐèÒªºÍºǫ́ͨÐÅ£¬ÄãÖ»Ðè×¢ÈëÏìÓ¦µÄsvr£¬È»ºóµ÷ÓöÔÓ¦·½·¨¼´¿É¡£

×¢ÈëÇëÇóheaderÍ·

ÔÚÎÒÃǵÄÏîÄ¿ÖУ¬Ô¼¶¨ÁËËùÓеÄÇëÇó¶¼ÒªÔÚheaderÖдøÉÏһЩÏàͬµÄÐÅÏ¢£¬Õâ¶ÔAngularÀ´Ëµ£¬ÊǷdz£¼òµ¥µÄÊÂÇ飺

Ö´ÐÐÒÔÏ´úÂëºó£¬Ö®ºóËùÓеÄhttpÇëÇó¶¼»á´øÉÏÃûΪprojectµÄheaderÐÅÏ¢

$http.defaults.headers.common["project"] = "test";

2.4 controller¼äͨÐÅÎÊÌâ

controllerµ÷ÓÃ

¼ÙÉècontrollerAÏ£Íûµ÷ÓÃcontrollerBµÄij¸öº¯Êý£¬¸æËßͬ°écontroller£¬ÎÒµÄij¸öÄãËù¹ØÐĵĶ«Î÷¸Ä±äÁË£¬ÒªÔõô×öÄØ£¿¾Ù¾ßÌåÒµÎñ³¡¾°£¬ÓÐÁ½¸öcontroller£¬Ò»¸öÊÇÖ÷Ò³controller£¬ÁíÍâÖ÷Ò³ÉÏÓиöµ¯¿ò±íµ¥£¬Õâ¸öµ¯¿ò±íµ¥Ò²Óиöcontroller£¬Óû§³É¹¦Ìá½»ÁËÕâ¸ö±íµ¥ºó£¬µ¯¿òcontrollerÐèÒª¸æÖªÖ÷Ò³controller¸üÐÂÖ÷Ò³ÉϵÄijÏîÊý¾Ý¡£

½¨ÒéµÄ×ö·¨£¬ÊÇÓÃAngularµÄÏûÏ¢»úÖÆ¡£ÀýÈ磬ÉÏÃæµÄÀý×ÓÖУ¬µ¯¿òcontrollerÊÇÖ÷Ò³controllerµÄ×Ócontroller¡£ÄÇôµ¯¿òcontroller¿ÉÒÔÍùÉÏðÅÝ´«µÝÏûÏ¢

$scope.$emit(EVENT.MODAL_SUCEESS, {});

Æä¸¸controllerÈ¥²¶»ñÕâ¸öÏûÏ¢

$rootScope.$on(EVENT.MODAL_SUCEESS, function (event, args) {
//****
});

ÕâÊÇÒ»ÖֺܺõĽâñî°ì·¨£¬¼ÙÉèÕâÁ½¸öcontrollerÊÇÓÉÁ½¸ö¿ª·¢¸ºÔðµÄ£¬ÄÇôÎÒ¿ª·¢ÎÒµÄcontroller£¬Ä㿪·¢ÄãµÄ£¬ÎÒ²»ÓÃÈ¥¹ØÐÄÄãÄDZߵÄÂß¼­¡£

Êý¾Ý¹²Ïí

¶à¸öcontrollerÖ®¼äÒª¹²ÏíÊý¾Ý£¬ÒªÔõô×öÄØ£¿

×î¼òµ¥µ«Ò²²»ÍƼöµÄÒ»¸ö×ö·¨£¬¾ÍÊǰÑÊý¾ÝÈûµ½rootscopeÖУ¬µ«ÊÇ£¬Õâ¾ÍÏñjsµÄÈ«¾Ö±äÁ¿£¬Ò°Âù²»ºÃ¿ØÖÆ¡£

ÕâÀïÍÆ¼öÏÂÎÒÃǵÄ×ö·¨£ºÐ´Ò»¸öרÃÅÓÃÓÚ´æ´¢¡¢ÉèÖù²ÏíÊý¾ÝµÄ¹²ÏíÊý¾Ýfacoty¡£ÔÚÀïÃæ¶¨Òåset·½·¨£¬ËùÓеĹ²Ïí±äÁ¿£¬¶¼ÐèÒª¾­¹ýset·½·¨À´ÉèÖá£È»ºóÈ¡Êý¾ÝÔòͨ¹ýDATA±äÁ¿»ñÈ¡¡£

α´úÂëÈçÏ£º

app.factory('ShareSvr', function(){
var shareData = {
peopleNum
}
return {
DATA:shareData,
setPepleNum:function(num){
shareData.peopleNum = num;
}
}
});

app.controller('TestController',function(ShareSvr){
var self = this;
this.DATA = ShareSvr.DATA;
}

ÕâÀﲢûÓÐÒªÇóDATAÖµÖ»ÄÜͨ¹ýget·½·¨»ñÈ¡£¬ÊÇΪÁËÖ®ºóÔÚcontroller¶ÔÓ¦µÄÊÓͼhtmlÖÐȡֵ·½±ãЩ¡£

2.5 µÚÈý·½ ¿â/×ÊÔ´ ÍÆ¼ö

ui router

·ÓÉ(route)£¬¼¸ºõËùÓеÄMVC(VM)¿ò¼Ü¶¼Ó¦¸Ã¾ßÓеÄÌØÐÔ£¬ËüÊÇǰ¶Ë¹¹½¨µ¥Ò³ÃæÓ¦ÓÃ(SPA)±Ø²»¿ÉÉÙµÄ×é³É²¿·Ö¡£Ïà±ÈÔ­ÉúµÄngRouter£¬ui router¹¦Äܸü¼ÓÇ¿´ó£¬¾ß±¸¶àÊÓͼ£¬Ç¶Ì×·ÓɵÈÌØÐÔ£¬¿ÉÒÔ½â¾ö·Óɴ󲿷ֵÄÓ¦Óó¡¾°¡£

ngDialog

Ò»¸öµ¯¿ò¿Ø¼þ£¬¹¦ÄÜÇ¿´ó£¬ÎұȽÏϲ»¶µÄµØ·½£¬ÊÇËüûÓÐдËÀµ¯¿òµÄhtml¡¢¿ÉÒԺܷ½±ãµØ¶¨Òå×Ô¼ºÏëÒªµÄµ¯¿òÄ£°å¡£ÀýÈ磬ÎÒÃÇÏîÄ¿¾Íͨ¹ýËü×öÁËÁ½ÖÖµ¯¿ò£¬Ò»ÖÖÊÇÆÕͨµ¯¿ò£¬Ò»ÖÖÊDzàÀ­¿ò£¨´ÓÆÁÄ»ÓҲ໬³ö£¬Õ¼Âúä¯ÀÀÆ÷¸ß¶È£¬¿í¶ÈÕ¼ÂúÒ»°ëÆÁÄ»£¨»òÕ߯äËû×Ô¶¨Òå¿í¶È£©¡£

Angular´úÂë¹æ·¶

https://github.com/johnpapa/angular-styleguide/blob/master/a1/i18n/zh-CN.md

https://github.com/mgechev/Angularjs-style-guide/blob/master/README-zh-cn.md

Angular-filter

ÌṩÁ˺ܶàʵÓõÄfilter£¬stringÀà¡¢mathÀ࣬¼¯ºÏÀàµÈµÈ

w5c-validator

»ùÓÚAngular.jsÔ­ÓÐµÄ±íµ¥ÑéÖ¤£¬Í³Ò»ÑéÖ¤¹æÔòºÍÌáʾÐÅÏ¢£¬ÔÚÔ­ÓеĻù´¡ÉÏÀ©Õ¹ÁËһЩ´íÎóÌáʾµÄ¹¦ÄÜ£¬Èôó¼Ò²»ÓÃÔÚÿ¸ö±íµ¥ÉÏдһЩÌáʾÐÅÏ¢µÄÄ£°å£¬×¨ÐĵÄȥʵÏÖÒµÎñÂß¼­¡£¹úÈ˳öÆ·

ng-table

ÇáÁ¿£¬¹¦ÄÜÇ¿´óµÄ±í¸ñ×é¼þ¡£¿ÉÒԺܷ½±ãµØÐ޸ıí¸ñµÄÑùʽ¡¢½»»¥Ð§¹û¡£

   
3170 ´Îä¯ÀÀ       31
Ïà¹ØÎÄÕ Ïà¹ØÎĵµ Ïà¹Ø¿Î³Ì



Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì
×îл¼Æ»®
DeepSeek´óÄ£ÐÍÓ¦Óÿª·¢ 6-12[ÏÃÃÅ]
È˹¤ÖÇÄÜ.»úÆ÷ѧϰTensorFlow 6-22[Ö±²¥]
»ùÓÚ UML ºÍEA½øÐзÖÎöÉè¼Æ 6-30[±±¾©]
ǶÈëʽÈí¼þ¼Ü¹¹-¸ß¼¶Êµ¼ù 7-9[±±¾©]
Óû§ÌåÑé¡¢Ò×ÓÃÐÔ²âÊÔÓëÆÀ¹À 7-25[Î÷°²]
ͼÊý¾Ý¿âÓë֪ʶͼÆ× 8-23[±±¾©]

AndroidÊÖ»ú¿ª·¢£¨Ò»£©
Àí½âJavascript
·ÇµäÐÍajaxʵ¼ù
³¹µ×µÄAjax
javascript ʹÓÃCookies
ʹÓà jQuery ¼ò»¯ Ajax ¿ª·¢

Struts+Spring+Hibernate
»ùÓÚJ2EEµÄWeb 2.0Ó¦Óÿª·¢
J2EEÉè¼ÆÄ£Ê½ºÍÐÔÄܵ÷ÓÅ
Java EE 5ÆóÒµ¼¶¼Ü¹¹Éè¼Æ
Javaµ¥Ôª²âÊÔ·½·¨Óë¼¼Êõ
Java±à³Ì·½·¨Óë¼¼Êõ

ijº½¿Õ¹«Ë¾IT²¿ JavaScriptʵ¼ù
ijµçÊÓÈí¼þ HTML5ºÍJavaScript
Öк½ÐÅ JavaScript¸ß¼¶Ó¦Óÿª·¢
´óÇìÓÍÌï web½çÃæAjax¿ª·¢¼¼Êõ
ºÍÀûʱ ʹÓÃAJAX½øÐÐWEBÓ¦Óÿª·¢