Angular
ä»åã https://github.com/codediodeio/angular-firestarter/tree/master/src/app/uploads ãåèã«ãã¦ãã¾ããµã³ãã«ã¨ãã¦æ¢ã«ããã®ã§ãã ãã¡ã¤ã«ã¢ãããã¼ã¹ã«firebase functionãåãããããããã®ã§ ï¼ããä½ã£ã¦ç解ãããã¨æããã£ã¦ãã¾ã
Angularã¯SPA(Single Page Application)ãªã®ã§åå以å¤ã¯ ãã¼ã¸é·ç§»ã®ã¤ãã³ããã¨ããªãã¨ã¢ããªãã£ã¯ã¹ã«åæ ãããªã Angularã ããããªãä»ã®SPAã§ãå¤ååãã® Googleã¿ã°ããã¼ã¸ã£ã¼ã®è¨å®ãè¨è¼ãã
Google Cloud Functions and Firebaseã使ã£ã¦ èªå翻訳ããæ©è½ãã§ããã¿ããã§ãã www.youtube.comããã»ã»ã»ãããã¨ããæã§æ¢ã¾ã£ã¦ãã Angularã§ã©ããã£ã¦ããããï¼ï¼æãç解ã§ããªãã£ãã®ã§ãã ãã£ã¨ãµã³ãã«ãè¦ã¤ãã£ããã§åç¾ãã¦ã¿ã â¦
åç´ã«ãã³ãã¬ã¼ãã«adsenseã¿ã°ãæ¸ãããå®è¡ãããªãã£ã angularã®ã³ã³ãã¤ã«æã«æ¶ãã¦ãããããã®ã§ã¢ã¸ã¥ã¼ã«ãããã¦å¯¾å¿ãã 1ã»ã¢ã¸ã¥ã¼ã«ã®ã¤ã³ã¹ãã¼ã« 2ã»index.htmlã«adsenseã®jsã追å 3ã»NgModuleã«è¿½å 4ã»ãã³ãã¬ã¼ãã®ä¿®æ£
ç¾å¨ãangularã使ã£ã¦ãªã¢ã«ã¿ã¤ã DBã®firebaseã« ãã£ããã·ã¹ãã ãä½ã£ã¦éã¶ã¨ãããã¨ããã£ã¦ãã¾ã (facebookèªè¨¼ã¯ã§ããªãã§ããï¼æ©è½ ã»SNSã®ãã°ã¤ã³ ã»ã¡ã¼ã«ã¢ãã¬ã¹ã§ã®ãã°ã¤ã³ ã»chatæ©è½ ã»ToDOæ©è½ããç¨åº¦ã§ããï¼ï¼ github.comå®éã®â¦
angularã®ãµã³ãã«ã½ã¼ã¹ãä½ã£ãæã«ã¹ããã©ã§ç¢ºèªã§ãããµã¼ãã¼ããªãäºã«æ°ãã¤ãã httpsã使ããFirebaseã®hostingã使ãäºã«ãã¾ãã ï¼1Gã¾ã§ã¯ç¡æã5Gã§20åãããï¼ä¸è¨ã®URLã§node.jsãã¤ã³ã¹ãã¼ã« masalib.hatenablog.coméçºç°å¢ã®æ¨©éç³»ã§â¦
æè¡çãªåå¿é²ã§ã èªåã®éçºç°å¢ã¯vagrantï¼virtualboxï¼ã§ãããªã£ã¦ãã æ®éã®macãwindowsã§ã¯ãªãcentosä¸ã«ä½ã£ã¦ãã¾ããã®ãããforwarded_portã«portãè¨å®ãã¦ãã¾ã config.vm.network "private_network", ip: "192.168.33.10" config.vm.netwâ¦
Windows10ã«node.jsãããã¦angularãããã¾ãã éçºç¨ã®ãã·ã³ãèµ·åããã³ãã³ã ng serveãã¡ãã¯è¶ 絶便å©ã§ãã½ã¼ã¹ãä¿®æ£ããã¨èªåçã«ã³ã³ãã¤ã«ãã¦ãã㦠ãã¤ãã©ã¦ã¶ãèªåãã¼ããã¦ããã¾ããã®èªåæ©è½ããªããWindows10ã ã¨ãã¾ããã¾ãã â¦
angularã¨ã¯ç´æ¥é¢ä¿ãªãã®ã§ãã Tag for Atomãã¤ã³ã¹ãã¼ã«ãã¦ãã¾ã https://atom.io/packages/tagangularã¯ç¬èªã¿ã°ï¼ã»ã¬ã¯ã¿ã¼ï¼ããã¡ãã¦ãHTMLã®ãã³ãã¬ã¼ããæ¿å ¥ã ãããªã£ã¦ãã¾ãããã®çºãç¬èªã¿ã°ããããå¿ è¦ãããã®ã§ãã ãããªæã«â¦
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼5ã§ãååãstyleã ã£ãã®ã§ä»åã¯classã®æå®ã§ã ãã¨ãngForOfã¨ãããªã¹ãã®ã«ã¼ãã§ä½¿ç¨ãã listå¦çã§ä½¿ãã®ã§è¦ãã¦ããããã§ãå ¬å¼ã®referenceã¯ãã¡ãngClass Angular DocsngForOf Angular Docs TypeScriâ¦
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ï¼ã§ã styleãæå®ãããã¨ã§åãæ¿ãããæ©è½ã§ãngIfã¿ããã«htmlã触ãããã£ã¬ã¯ãã£ããåå¼·ãã¾ãä»åã¯ã©ã³ãã ã§åãæ¿ããããã«ãã¦ããã®ã§ãã ä»å¾ã¯ãè¡æ°ãã¹ãã¼ã¿ã¹ã§åãæ¿ããããã«ã§ããã¿ããâ¦
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ï¼ã§ã Angularã£ã½ãè¨è¼ãã§ã¦ãã¾ãã DOMãæä½ããngIfï¼é¢æ°ï¼ãã£ã¬ã¯ãã£ãï¼ï¼ã§ã ãããformã§ãã使ãã¨æãã®ã§è¦ãããã¨æãã¾ã TypeScriptå´ï¼/app/servers/servers.component.tsï¼è¦ªåé¢ä¿ã®è¦ªã®â¦
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ï¼ã§ã ååã§ã¯ãªãã¯ã¤ãã³ããã§ããã®ã§ ä»åã¯ã¤ã³ãããã¤ãã³ãã«ãªãã¾ã formã®é¨åã§ä½¿ãã®ã§å¤§äºã§ã templateå´ï¼/app/servers/servers.component.htmlï¼ TypeScriptå´ï¼/app/servers/servers.componentâ¦
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ï¼ã§ã ã¯ãªãã¯ã¤ãã³ããèµ·ããã®ãè¨è¼ãã¾ã æ®éã®javascriptã ã¨ãonclick=xxxxãã¨è¨è¼ãã¾ãã Angularã ã¨ã(click)="xxxxx"ãã¨è¨è¼ãã¾ãTypeScriptå´ï¼/app/servers/servers.component.tsï¼è¦ªåé¢ä¿ã®è¦ªâ¦
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ï¼ã§ã å½ããåã ãã©htmlã®ããããã£ã¼ã触ãã¾ã ãã®é¨åã«ã¤ãã¦è¨è¼ãã¾ã
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ã§ã tyepscriptã®å¤æ°ãhtmlã®ãã³ãã¬ã¼ãã¨ãããHMTLã«åæ ããã è¬ç¾©ã§ã¯ãã¼ã¿ãã¤ãã£ã³ã°ã¿ããã«è¨è¼ãã¦ãã£ã
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ã§ã ååã«ç¶ã使ç¨ç¨éããããããªãã ããããã¦ä½¿ãå¯è½æ§ãããã®ã§ã¡ã¢ã¨ãã¦æ®ãã¾ã ç¬èªã¿ã°ãããªãã¦divã¿ã°ãã»ã¬ã¯ã¿ã¼ã¨ãã¦ä½¿ã
åå¿é²ã¡ã¢ã®ãã®ï¼ã§ã CLIã§èªåçã«ä½ã£ã¦ããããã³ãã¬ã¼ãã¨cssãã¡ã¤ã«ãããã®ã§ãã ããã使ããªãæ¹æ³ãè¨è¼ãã¾ãå人çã«ã¯è¯ããªãã¨æããã© ãã¡ã¤ã«ãèªã¿è¾¼ã¾ããã®ã«æéãããããï¼ï¼ ãããçç¥ããããã«ãã£ã¦ããã®ããªï¼ï¼
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ã§ã CLIã§èªåçã«ä½ã£ã¦ãããæ©è½ãããã¿ãããªã®ã§ ãã¡ãããã£ã¦ã¿ããã¨æãã¾ã
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ã§ã componentã¯Angularã§ã¯éè¦ãªåä½ã§ãä»æã®WEBãã¶ã¤ã³ãªããããã¼ãã¡ã¤ã³ããµã¤ãã¡ãã¥ã¼ãããã¿ã¼ã¿ãããªå½¢ã«ãªã£ã¦ãã¾ãåèURL UIãã¶ã¤ãã¼ãç解ãã¦ããã¹ã11種é¡ã®ããã²ã¼ã·ã§ã³ã¨ç¹å¾´ | ãâ¦
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ã§ãï¼ï¼ï¼ï¼ ã®ç解ãã¦ããªããã©ï¼ï¼ãï¼ï¼ï¼ ã®ç解ã§é²ãã¦ãã¾ãä»åã¯ãèªåçã«ä½ã£ã¦ã³ã³ãã¤ã«ã«ã¤ãã¦ãã¿ãããªæãè¨è¼ãã¾ã ï¼ãµããã¨ãã¦ãã¦ããã¾ããï¼
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ã§ãbootstrapããããã¿ãã çç±ã¯ããããã«å ã«ãè§ã«ãããã¦ã¿ã¾ãã
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ã§ãAngular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã¯ã¯TypeScriptã§è¨è¿°ãã¾ãTypeScriptã¨ã¯ãMicrosoftãä½ã£ãæ°ããè¨èªã§ã
Angular(ãã¼ã¸ã§ã³ï¼ä»¥é)ã®åå¼·ããã®ï¼ã§ããã¾ãã«ãä»äºãå¿ããã㦠ã¹ãã¬ã¹ããã¾ããªããåå¼·ããããªã£ã¦è¡åè²·ãããã¦ãã¾ã£ã ï¼ï¼ï¼ï¼ï¼åãããããããï¼ï¼ã¿ãããªããªã§ï¼https://www.udemy.com/the-complete-guide-to-angular-2/ãã®è¬ç¾©â¦