AngularJS搴旂敤寮€鍙戞€濈淮涔?锛氬零鏄庡紡鐣岄潰

杩欑瘒鍗氬涔嬪墠鎵挎帴涓婁竴绡囷細http://www.cnblogs.com/xuema/p/4335180.html

閲嶅啓绀轰緥锛氭ā鏉裤€佹寚浠ゅ拰瑙嗗浘

AngularJS鏈€鏄捐憲鐨勭壒鐐规槸鐢ㄩ潤鎬佺殑HTML鏂囨。锛屽氨鍙互鐢熸垚鍏锋湁鍔ㄦ€佽涓虹殑椤甸潰銆?/p>

杩樻槸鍓嶉潰鐨勫皬鏃堕挓绀轰緥锛屾垜浠娇鐢ˋngularJS妯℃澘鏉ラ噸鍐欙紝绀轰緥宸茬粡宓屽叆鈫抇鈫掞細

绀轰緥鍦板潃锛?a target="_blank" href="http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/" style="margin: 0px; padding: 0px; color: #000000; text-decoration: underline;">http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/

HTML鏂囦欢鐪嬭捣鏉ュ儚鏅€氱殑HTML锛屽彧鏄叾涓浜嗕竴浜涚壒鍒殑鏍囪聽锛堟瘮濡傦細ng-app,ez-clock绛夌瓑锛夈€傚湪Angular涓紝杩欎釜HTML鏂囦欢琚О涓烘ā鏉裤€?/p>

ng-app杩欐牱鐨勬爣璁版垜浠О涔嬩负鎸囦护銆傛ā鏉块€氳繃鎸囦护鎸囩ずAngularJS杩涜蹇呰鐨勬搷浣溿€?姣斿锛歯g-app鎸囦护鐢ㄦ潵閫氱煡AngularJS鑷姩寮曞搴旂敤锛沞z-clock聽鎸囦护鐢ㄦ潵閫氱煡AngularJS鐢熸垚鎸囧畾鐨勬椂閽熺粍浠躲€?/p>

褰揂ngularJS鍚姩搴旂敤鏃讹紝瀹冧細閫氳繃涓€涓紪璇戝櫒瑙ｆ瀽澶勭悊杩欎釜妯℃澘鏂囦欢锛岀敓鎴愮殑缁撴灉灏辨槸锛毬犺鍥撅細

鎴戜滑瀹氫箟浜嗕袱涓儴浠讹細妯℃澘锛堝寘鍚寚浠ょ殑HTML鏂囦欢锛夊拰鎸囦护瀹炵幇聽锛圝avaScript鏂囦欢锛夛紝AngularJS灏嗚繖涓ら儴鍒嗘嫾瑁呰捣鏉ワ紝鐢熸垚浜嗘渶缁堢殑瑙嗗浘銆?/p>

鏈夌偣鐞嗚В妗嗘灦鐨勫惈涔変簡鍚楋紵

浣跨敤鎸囦护灏佽JavaScript浠ｇ爜

鎴戜滑鍦ㄦā鏉夸腑浣跨敤浜嗕竴涓嚜瀹氫箟鐨勬爣绛緀z-clock锛岃€屽畠鍙樻垚浜嗕竴涓細鍔ㄧ殑鏃堕挓锛?杩欐湡闂村彂鐢熶簡浠€涔堜簨鎯?

鑲畾涓嶆槸娴忚鍣ㄥ共鐨勶紝瀹冧笉璁よ瘑ez-clock鏄粈涔堜笢瑗裤€?/p>

angular.min.js寮曞叆浜嗗熀鏈殑angularJS搴擄紝瀹冧細鍦ㄦ祻瑙堝櫒杞藉叆HTML鏂囨。骞朵笖 寤虹珛濂紻OM鏍戝悗锛屾墽琛屼互涓嬫搷浣滐細

1. 鎵惧埌鏈塶g-app灞炴€х殑DOM鑺傜偣
2. 浠ヨ繖涓妭鐐逛负鏍硅妭鐐癸紝鎼滅储鑷畾涔夋寚浠わ紝鍙戠幇ez-clock
3. 璋冪敤ez-clock鎸囦护鐨勫疄鐜板嚱鏁帮紙鎸囦护绫诲伐鍘傦級杩涜灞曞紑

鏍规嵁鎴戜滑鐨勫畾涔夛紝ez-clock鐨勫睍寮€鎿嶄綔濡備笅锛?/p>

1. 浣跨敤涓€涓猟iv鍏冪礌鏇挎崲杩欎釜鑷畾涔夋爣绛?/li>
2. 鍒涘缓涓€涓畾鏃跺櫒锛屽湪瀹氭椂鍣ㄨЕ鍙戞椂鍒锋柊div鍏冪礌鐨刬nnerText

ez-clock杩欐牱鐨勯潪HTML鏍囧噯鏍囩锛屽湪AngularJS涓箣鎵€浠ョО涓烘寚浠?directive锛?灏辨槸鎸囩湅鍒板畠鏃讹紝鍩虹妗嗘灦闇€瑕佸鍏惰繘琛岃В閲婏紝浠ヤ究灞曞紑鎴愭祻瑙堝櫒鍙互鐞嗚В 鐨勪笢瑗匡紙HTML鍏冪礌鍜岃剼鏈級锛岃€岃繖涓В閲婄殑杩囩▼琚О涓猴細缂栬瘧銆?/p>

鍙锛孉ngularJS妗嗘灦瑕佹眰灏咹TML鏂囨。鍜孞avaScript浠ｇ爜鍒嗗壊鐨勬洿娓呮櫚锛岄€氬父娣锋潅鍦?HTML鏂囨。涓殑JavaScript浠ｇ爜锛岄渶瑕佷互鎸囦护鐨勫舰寮忚繘琛屽皝瑁咃紝鑰屾ā鏉裤€佹寚浠?瀹炵幇浠ｇ爜杩欎袱涓儴浠讹紝鍒欑敱鍩虹妗嗘灦璐熻矗鎷艰杩愯銆?/p>

灏嗘寚浠ょ湅鍋欰PI

灏咲OM鎿嶄綔灏佽鎴愭寚浠わ紝鏇村鏄撹繘琛屽垎宸ヤ笌浠ｇ爜澶嶇敤銆?/p>

鐢变簬AngularJS鏇存竻鏅板湴鐣屽畾浜嗕竴涓猈EB搴旂敤鐨勭粍鎴愰儴鍒嗭紝杩欐牱锛屽湪涓€涓洟闃熶腑锛屽彲浠ユ湁浜鸿礋璐?瀹炵幇鎸囦护锛屾湁浜鸿礋璐ｅ紑鍙戞ā鏉匡紝鍚勮嚜骞叉搮闀跨殑浜嬫儏锛屾晥鐜囨洿楂橈紝鎴愭湰鏇翠綆銆?/p>

褰撶劧锛屼粠缂栧啓鐣岄潰HTML妯℃澘鐨勮搴︾湅锛岃濡俥z-clock涔嬬被鐨勬寚浠ゆ瘮div鏇村叿鏈夎涔夋€э紝 浣挎ā鏉挎洿瀹规槗缁存姢锛屼娇鎸囦护鐨勫疄鐜板崌绾т笉褰卞搷妯℃澘锛岃繖涔熸槸涓嶅皬鐨勫ソ澶勪簡銆?/p>

涓庢垜浠墍鐔熸倝鐨勫璞°€佸嚱鏁拌繖绫绘帴鍙ｅ畬鍏ㄤ笉鍚岋紝鎸囦护绠楁槸涓€绉嶆柊鍨嬬殑API锛屽畠鎻愪緵浜嗗湪 闈欐€佸寲鐨凥TML鏂囦欢涓紝妞嶅叆鍔ㄦ€佽涓虹殑鑳藉姏锛?/p>

瀹氫箟鑷繁鐨勬寚浠?/h3>

AngularJS鍐呯疆鐨勬寚浠や笉鑳藉畬鍏ㄦ弧瓒冲疄闄呭紑鍙戠殑闇€瑕侊紝閫氬父鎴戜滑闇€瑕佸畾涔夎嚜宸辩殑鎸囦护锛?/p>

• 澧炲己鏍囧噯DOM鍏冪礌鐨勮涓?/li>

姣斿锛屽笇鏈涗竴涓狣OM鍏冪礌鏄彲鎷栨嫿鐨勶紝閭ｄ箞鍙互杩欐牱鍐欙細

1. <p聽ez-draggable="true">...</p>

閫氳繃ez-draggable鎸囦护锛屾垜浠祴浜圖OM鍏冪礌鍙嫋鎷界殑鑳藉姏銆?/p>

• 鑷畾涔夌粍浠?/li>

姣斿锛屾垜甯屾湜涓€涓浘鐗囪鍓姛鑳斤紝閭ｄ箞鍙互杩欐牱鍐欙細

1. <ez-photoshop聽src="a.jpg"></ez-photoshop>

閫氳繃ez-photoshop鎸囦护锛屾垜浠畾涔変簡涓€涓寘鍚氦浜掕涓虹殑web缁勪欢銆?/p>

• 灏佽鍏朵粬缁勪欢搴?/li>

杩欎笉鏄疉ngularJS榧撳姳鐨勬柟鍚戯紝浣嗘槸纭疄鏈夊己鍔茬殑闇€姹傘€?/p>

璧风偣锛氬０鏄庡寲

鍩轰簬鍓嶉潰鐨勭ず渚嬶紝鎴戜滑瀹规槗鎰熷彈鍒颁娇鐢ˋngularJS杩涜搴旂敤寮€鍙戠殑涓€涓噸瑕佺殑鎬濈淮妯″紡锛毬犱粠鏋勯€犲０鏄庡紡鐣岄潰鍏ユ墜銆?/p>

浜嬪疄涓婏紝鎴戠寽娴嬭繖涔熸槸Misko寮€鍙慉ngularJS鏈€鍒濈殑鍔ㄦ満銆傜◢鏃╀竴浜涚殑Flex銆乄PF鍜孎irefox 鐨刋UL锛屾垨澶氭垨灏戠粰浜哅isko鍚彂銆?/p>

鍦ㄤ娇鐢ˋngularJS杩涜鍓嶇寮€鍙戞椂锛屽缁堝簲璇ヤ粠鏋勯€犲０鏄庡紡鐣岄潰妯℃澘寮€濮嬶紝濡傛灉鐜版垚鐨勬寚浠や笉澶?鐢紝閭ｄ箞灏卞畾涔夎嚜宸辩殑鎸囦护銆佸疄鐜拌嚜宸辩殑鎸囦护銆傝繖鏄竴涓凯浠ｇ殑杩囩▼銆?/p>

璁颁綇锛屾寚浠ゆ槸鏂板瀷鐨凙PI锛岀敤鐣岄潰鐨勫０鏄庡寲浣滀负闇€姹傦紝鏉ユ寚瀵兼垜浠殑浠ｇ爜灏佽銆?/p>

聽

鍙傝€冭祫鏂欙細http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/