ǰÑÔ
±ÊÕßĿǰÔÚ»¥ÁªÍø¹«Ë¾¸ºÔ𿪷¢Ë½ÓÐÔÆÆ½Ì¨¡£ÔÆÆ½Ì¨¿ØÖÆÌ¨£¬ÊÇÒ»¸öµäÐ͵ĹܿØ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
ÇáÁ¿£¬¹¦ÄÜÇ¿´óµÄ±í¸ñ×é¼þ¡£¿ÉÒԺܷ½±ãµØÐ޸ıí¸ñµÄÑùʽ¡¢½»»¥Ð§¹û¡£ |