AngularJS ããã«ã½#1 åå ãã¾ããã
ããã¾ãã¦ããã§ã¨ããããã¾ãã
ä»å¹´ãããBloggerã«å¼ã£è¶ããã¨æã£ã¦ããa2cã§ãã
æ¬æ¥ãGoogleããã§éå¬ãããAngularJSããã«ã½ã³#1ã«åå ãã¾ããã
ä¹
ãã¶ãã®ã¬ãããªããã«ã½ã³ç³»ã®ã¤ãã³ãã§ããã¼ã åããããããã¢åºæ¥ãã¬ãã«ã¾ã§å®è£
ããã
å
¨ãã¼ã çºè¡¨ãè¡ã£ãããã¦ãå
å®ããã¤ãã³ãã§ããããã¥ã¼ã¿å½¹ã§åå ã ã£ãã®ã§ãã©ã®ãã¼ã ã«ã
æå±ãã¦ãã¾ããã§ããããçºè¡¨ç´åã«@can_i_do_webããã¨ãã£ããã«ãã¢ããã°ã©ãã³ã°ã§Angularã®
ã¨ã£ã¦ã便å©ãªæ©è½ã®ï¼ã¤ng-classã®ãã¢ãä½æããã®ã§ç´¹ä»ãã¾ãã
ã¯ã¦ãªè¨æ³ãå¿ãã¦ãã¾ã£ãã®ã§ãQiitaで書きました
Qiitaä¸ã§htmlç·¨éããã®ã§ãåããªããããããªãã§ããããããã£ããæãã¦ä¸ããã
AngularJSã«ã¤ãã¦
AngularJSã触ã£ããã¨ãªã人ã¯ã¡ãã£ã¨è§¦ã£ã¦ã¿ãã¨ãããã¨æãã¾ãã
ã¯ã©ã¤ã¢ã³ããµã¤ãã®MVCã«é¢ãã¦ã¯èå³ããã£ã¦é½åº¦ã¨ã³ããªã¼ãã¦ããã
çµå±2013å¹´ã«ãªããç¾å¨æ§ã
ãªJSã®ã©ã¤ãã©ãªã¼ãç»å ´ãã¦ããããã»ãã¨ã«ããã£ã¡ã沢山åºã¦ãããæ£ç´ã©ãã
使ãã°ããã®ããããããç¶æ
ã ã£ãã§ãããããã§ãã£ã¦ãæèåæ¢ãã¦ãä»ã®ã¨ããjQuery使ã£ã¦åé¡ãªãããOKãããï¼
ã¿ãããªã³ã³ãµãã¸ã¸ã¤ããããããã«ã¯ã³ããããã«ãªã£ãããããªãã§ããã®ãï¼
ï¼âï¼å¹´åã®èªåã«ãããªèªåãè¦ããã¦æ¥ãããããªãã®ãï¼ãªã¬
ã¨ããæãã«ãªã£ã¦ããã®ã§ãå¨ãã«ä½¿ã£ã¦ã人ããã¾ãã¾ããAngularæã«å¹´æ«é ã«ãå
¥ä¿¡ãã¦ã¿ãã
çµæãã¤ãã¼ãã¤ãã¼ããã³ã¬ä½¿ããã«jQueryã§é å¼µãã¨ãã©ãã ãè¦è¡ã ãã£ã¦æãã«ãªã£ãã
ä¾ãã¦è¨ãã¨ãjQueryæã®äººãããJSã´ãªã´ãªæ¸ãã¦ã¦ã$()ã£ã¦ãªãã§ããï¼ãã£ã¦è¨ã£ã¦ã人ã«æããæãã
ã$()ã§ã´ãªã´ãªæ¸ãã¦ã¦ã$scopeãªãã§ããï¼ãã£ã¦è¨ã£ãèªåã«ã¯ãæ¹å®ããã¨ãã£ã¨æ©ãã«è¨ã£ã¦ããããã£ãã
ãããIDã¨ãDOMæä½ãJSããæåã§ããã¨ãã許ãããã®ã¯ãå°å¦çã35æ³ä»¥ä¸ã®è害ã°ã©ãã¼ã§ããï¼å
AngularJSã®20%ãããããããã£ã¦ãªãã§ãããã³ã¼ãéãä¿®æ£ãããããèªã¿ããããæç¶ç°¡åãã¤ä¾¿å©ã«ä½¿ãã¦ã¾ãã
ãã ããHTMLã«ç´æ¥ã¤ãã³ãæ¸ãããããã®ã§ãjQæ´¾ã ã£ã身ã¨ãã¦ã¯å°ãªãããéåæããé¨åãããã¾ãã
ããããããã«ç®ãã¤ã¶ã£ã¦ãã¾ãããããã®æ©æµããã¼ãããããã¾ãã
ã¨ããããã¯ãæè¿ãã£ã±ãåºã¦ãã¦ãJS ãã¬ã¼ã ã¯ã¼ã¯ã®ä¸ç¨®ã§ãããjQueryã¿ãããªãã¤ã ãã
ã¿ãããªé¢¨ã«AngularJSã®äºãæã£ã¦ãã人ã¯15åã§ããã®ã§ãAngularJSã®ãã¥ã¼ããªã¢ã«ãã£ã¦ã¿ã¾ãããï¼
ç§ã¯ãdotInstallのAngularJSでtutorialããã¾ããã
ãã¡ã¤ã«æ§æãä»ã®ã¾ã¾ãããããjQueryã¨ä½µç¨å¯è½ã ããå¦ç¿ã³ã¹ããããªãä½ãã®ã§ç¥ã£ã¨ãã¦æã¯ãªãã¯ãã
ããã¦ã沢山ã¹ãããããTipsãªã©ããããã®æµ·ã«åãæµãã¦ä¸ãããã¿ããªã楽ã§ããããã«ã»ã»ã»ãã
## JSã§å¤æ¬¡å é åãã·ã³ãã«ã«ä½ãæ¹æ³ç¥ãããã
ãã¢ä½ã£ã¦ãæã«ã座æ¨ã¨ãã©ã°ï½âtate':1, 'yoko':1,'flg':false} ã®ãã¼ã¿ãä½ãå¿ è¦ããã£ãã®ã ãã©ãæ®éã«forã§åããã
var data_grid = [] for (var dan=0; dan<20; dan++){ var temp_arr = []; for (var retu=0; retu < 20; retu++){ temp_arr[retu] = [retu, false] } data_grid.push(temp_arr) }
ããã£ã¦ãããã©ããããªãï¼
ä¾ãã°Pythonã¿ãã
[[{'tate':x, 'yoko':y, 'flag':"false"} for x in range(20)] for y in range(20)]
ã¿ããã«æ¸ãæ¹æ³ãªãã®ã§ããããï¼