AngularJSã®ãã¨ããã£ã¨ä½ã¨ãªãåãã£ã¦ãã¦æ¥½ãããªã£ã¦ããã®ã§æ¸ã。
ã¨ããããè¯ããããµã³ãã«çãªæ¸ãæ¹ããä¸æ©é²ãã§、è¤æ°ç»é¢ãæã¤ã¢ããªã±ã¼ã·ã§ã³ãä½æã§ããããã«、ã«ã¼ãã®è¨å®ã®ãã¨ã¨ã、ãµã¼ãã¹ã®ä½æã®ä»æ¹ã®ãããã¾ã§ãæ¸ãã¤ãã。ä»åã¯ã¾ãåç½®ãã¨、AngularJSã§åºã¦ããç¨èªã«ã¤ãã¦ã¾ã¨ãã¦ãã。
ã¡ãªã¿ã«AngularJSã£ã¦ãªã«? ã¿ãããªã¬ãã«ã®è©±ã¯æ¸ããªã。
ãã£ãã試ãã¦ã¿ã¦ã³ã³ããã¼ã©ã¼ãã©ãæ¸ãã®ããããã¯åãã人対象。
*
åºæ¬çã«ãµã³ãã«ã¨ãã¦è¯ãããã®ã¯、<html ng-app>ã¿ããã«æ¸ãã¦ãã£ã¦、ã³ã³ããã¼ã©ã¼ãwindowç´ä¸ã«æ¸ããããªãã¤ã ãã©、è¤æ°ã®viewã¨ã³ã³ããã¼ã©ãæã£ããããªãã®ãæ¸ãã¦ããã«ã¯、angular.module()ã§ã¢ã¸ã¥ã¼ã«ãä½æãã¦、ããã«ãµã¼ãã¹ã¨ãä½ã£ãã«ã¹ã¿ã ã¢ã¸ã¥ã¼ã«ãç»é²ãã¦ãããããªæ¹æ³ã«ãªã。ãããªãã¤。
angular.module('appName', [] , function($routeProvider) {
$routeProvider
.when("/", { templateUrl: "/hoge.html", controller: "HogeCtrl" })
.when("/fuga", { templateUrl: "/fuga.html", controller: "FugaCtrl" })
.otherwise({redirectTo:"/"});
}]);
ã§、StackOverflowã¨ãã§èª¿ã¹ãã¨ããããã®ãæ®éã«æ¸ãã¦ãããã ãã©、第ä¸å°è±¡ã「ããããããããã!」ã£ã¦æã。ãªããã©ã¤ãã©ãªèªã¿è¾¼ãã§、htmlã«ng-appã£ã¦æ¸ãã¦、ã³ã³ããã¼ã©ã¼åã®é¢æ°ä½æããã ãã§è¯ãã®ã ã¨æã£ãããªããããã! ã¨ããªã。
ã§ã、å®éã¯å¥ã«é£ãããã¨ã¯ãªãã¦、ã¨ããããã®ãããã®ãã¨ãã¡ããã¨åãã£ã¦ãããªãã¨、ä½ç»é¢ãããã¢ããªã±ã¼ã·ã§ã³ãªãã¦æ¸ãã¨ããã³ã¼ããã¡ããã£ã¦ãã。
ã§、ããããå¦ç¿ãå§ããåã«ç¨èªã«ã¤ãã¦、é©å½ã«ã¾ã¨ãã¦ãã。
ã¨ããããè¯ãã¤ãããã®ã ã。ãã®è¾ºããã£ããåããã ãã§ã、ããã¶ãå¹çãä¸ãã。
Controller(ã³ã³ããã¼ã©ã¼):
ng-controller=""ã£ã¦ããæ¸ãæ¹ããã¦ãããã。åºæ¬çã«DOMæä½ã¨ãã¯å
¥ãã¡ãã ã。ãã¨ãã£ã«ã¿ã¨ãã½ã¼ããå
ã
ãããã¤ä½¿ãã®ã§æ¸ããªã¨ã。大ãããªã¹ãã®å
¨ä½ãã½ã¼ã+ãã£ã«ã¿ãã¦ãã、ï¼ï¼ä»¶ãã¤ã¹ã¯ãã¼ã«æ¯è¡¨ç¤ºã¿ãããªã®ãã©ããã£ã¦æ¸ãã°è¯ãã®ãããåãããªãã®ã§ã¤ãã³ã³ããã¼ã©ã¼ã«ã¶ã¡è¾¼ãã§ãã¾ã£ãã®ã¯ç§ã§ã。ãã¶ããªããããæ¹ã¯ãããã ã¨æã。
Service(ãµã¼ãã¹):
$httpã¨ã$scopeã¨ãã®ãã。ãªãã§æ®éã®windowãlocationã¨ä¼¼ã$windowã¨ã$locationã¨ãããã®ãã£ã¦ã¨、ãã¹ããè¡ãã¨ãã«ä¾åæ§ãããã¨é£ãããã。ä¾åæ§? ãªã«? ã¨ãããã¨ã¯ããã§ã¯é·ãããã®ã§æ¸ãããªã。ã§、ãããããéè¦ã§è©¦é¨ã«åºãé¨å、ãµã¼ãã¹ã¯ã·ã³ã°ã«ãã³ã§è¤æ°ã®ã³ã³ããã¼ã©ã¼ã«ã¾ããã£ãã¨ããåä¸ã¨ãããã¨。è¤æ°ã®ç»é¢ãæã¤ã¢ããªãä½æããã¨ãã«、ä¸è¦§ç»é¢ããåå¥ç·¨éç»é¢ã«ç§»åãã¦、ã¾ãä¸è¦§ã«æ»ããããªã¨ã、å½ç¶ãã¼ã¿ã¯åããã®ãåç
§ããæ¹ãæã£åãæ©ãããã ãã©、ãã®äºã¤ã®ã³ã³ããã¼ã©ã¼éã§ãã¼ã¿ã渡ãã¨ãã«ãµã¼ãã¹ãå©ç¨ããæ¹æ³ããã($routeScopeãå©ç¨ããæ¹æ³ããã)。
ãã¡ãããã®ããã«ã¯èªåã§ãµã¼ãã¹ãæ¸ãå¿
è¦ããã。
ãµã¼ãã¹èªä½ã¯、å¤é¨ã«ä¾åæ§ããã¤ãã®(ãã¼ã¿ã®å¼ã³åºãã¨ã)ãã¾ã¨ããããã®ãã®ã¨ããç解ã§ãã¶ãè¯ããã ã¨æã。
Directive(ãã£ã¬ã¯ãã£ã) :
ng-repeatã¨ãng-showã¿ãããªãã¤ã®ãã¨。
DOMè¦ç´ ã®æä½ã¯ããã§ãã、ã¨ãããã¨ã§、ãã¡ããèªåã§ãä½ãã。
Module(ã¢ã¸ã¥ã¼ã«):
Angularã®ã¢ã¸ã¥ã¼ã«。ããã¥ã¡ã³ãã«ããã¨、ãµã¼ãã¹ã¨ããã£ã«ã¿ã¼ã¨ããã£ã¬ã¯ãã£ãã¨ãã³ã³ãã£ã°ã®ãã¤ã¾ã、ã¨ãããã¨ããã。ã³ã³ããã¼ã©ã¼ããã®ä¸ã«å«ã¾ãã。ã³ã³ããã¼ã©ã¼ã®ã¿ããæ¸ããªããµã³ãã«ã«ããããæ¸ãæ¹ããã¦ããã¨æèãã¥ãããã©、ã¢ããªã±ã¼ã·ã§ã³ãã®ãã®ã®è¨å®ã¨ããè¡ããã¨ãåºæ¥ã。ã¡ãªã¿ã«Webãµã¼ãã¹å
¨ä½ã®ãã¨ã ããããªãã¦、ãã¨ãã°ng-infinite-scrollã¿ãããªã¹ã¯ãã¼ã«ããã¨å¢ãã¦ããªã¹ãã¿ãããªãã®ããã£ã¬ã¯ãã£ããæã£ãã¢ã¸ã¥ã¼ã«ã¨ãã¦ä½æããã¦ãã¦、ãããã¢ããªã±ã¼ã·ã§ã³æ¬ä½ã®ã¢ã¸ã¥ã¼ã«ããå¼ã³åºãã¤ã¡ã¼ã¸。
ã¨ããããã§ä»æ¥ã¯ããã¾ã§。
以ä¸、AngularJSãæ¸ãä¸ã§å½¹ã«ç«ã£ããµã¤ã。
åè:
Androiderã«è´ãAngularJSæ¦èª¬
Androiderãããªãã¦ãå¿
èª。ç¾æç¹ã§æ¥æ¬èªã§è¦ãä¸ã§ä¸çªè¯ãã¾ã¨ãã ã¨æã。
ã¨ããããããå
¨é¨èªãã°ç§ã®ä»¥éã®è¨äºãèªãå¿
è¦ã¯ç¡ã。ã¾ãã§ç¡ã。
AngularJSã®DIã®ä»çµã¿、minify対çã¯è¦ãã¦ããã!
ãªãã§ng-controllerã¿ãããªã®ã§ã°ãã¼ãã«é¢æ°æå®ããã®ã§ã¯é§ç®ãé常ã«ãããããã解説。
pochi / angular-doc-ja
ä¸é¨åã ãã ãã©å
¬å¼ã®æ¥æ¬èªè¨³。è±èªè¦æãªã®ã§å¤§å¤ããããã。
StackOverflowã®è¨äºæ²¢å±±。
ããè¦ã¦ãã°ã©ãã«ããªãæ。ã§ãIEã§ã®å¾®å¦ãªæåé¢é£ã¯åãå ±åã¯ãã£ã¦ã解決ã¯ããªãæ。