{"id":6512,"date":"2017-05-17T18:59:08","date_gmt":"2017-05-17T10:59:08","guid":{"rendered":"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/?p=6512"},"modified":"2025-07-08T09:41:11","modified_gmt":"2025-07-08T01:41:11","slug":"%e6%96%b0%e5%8c%97%e5%b8%82%e6%95%99%e8%82%b2%e5%b1%80%e7%a8%8b%e5%bc%8f%e6%87%89%e7%94%a8%e7%a0%94%e7%99%bc%e7%a4%be%e7%be%a4%e5%b7%a5%e4%bd%9c%e5%9d%8a1060503","status":"publish","type":"post","link":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/archives\/6512","title":{"rendered":"\u65b0\u5317\u5e02\u6559\u80b2\u5c40\u7a0b\u5f0f\u61c9\u7528\u7814\u767c\u793e\u7fa4\u5de5\u4f5c\u574a-Angular 2(1060503~0621)"},"content":{"rendered":"<h3>\u65e5\u671f\uff1a106\u5e745\u67083\u65e5~6\u670821\u65e5<\/h3>\n<h3>\u6642\u9593\uff1a\u6bcf\u9031\u4e09\u4e0b\u5348<\/h3>\n<h3>\u5730\u9ede\uff1a\u65b0\u5317\u5e02\u6559\u7814\u4e2d\u5fc3<\/h3>\n<h3>\u516c\u6587\u8207\u8a08\u756b\uff1a<\/h3>\n<ul>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/03\/106E0001588.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">\u516c\u6587\uff1a106E0001588<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/03\/%E6%96%B0%E5%8C%97%E5%B8%82106%E5%B9%B4%E5%BA%A6%E8%87%AA%E7%94%B1%E8%BB%9F%E9%AB%94%E6%8E%A8%E5%BB%A3%E6%9A%A8%E7%A8%8B%E5%BC%8F%E6%87%89%E7%94%A8%E7%A0%94%E7%99%BC%E4%B8%AD%E5%BF%83%E5%B7%A5%E4%BD%9C%E8%A8%88%E7%95%AB.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">\u65b0\u5317\u5e02106\u5e74\u5ea6\u81ea\u7531\u8edf\u9ad4\u63a8\u5ee3\u66a8\u7a0b\u5f0f\u61c9\u7528\u7814\u767c\u4e2d\u5fc3\u5de5\u4f5c\u8a08\u756b<\/a><\/li>\n<\/ul>\n<hr \/>\n<h3>\u8ab2\u7a0b\u4e3b\u984c\uff1aAngular<\/h3>\n<h3>\u8b1b\u5e2b\uff1a\u6797\u58eb\u7acb\u8001\u5e2b<\/h3>\n<hr \/>\n<p><a name=\"0503\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u30105\u67083\u65e5\u3011\uff1a<\/span><\/h2>\n<p><a href=\"#resource\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/a><strong><span style=\"color: #ff0000;\">\u30105\u67083\u65e5\u3011<\/span><\/strong><a href=\"#0510\">\u30105\u670810\u65e5\u3011<\/a><a href=\"#0517\">\u30105\u670817\u65e5\u3011<\/a><a href=\"#0524\">\u30105\u670824\u65e5\u3011<\/a><a href=\"#0531\">\u30105\u670831\u65e5\u3011<\/a><a href=\"#0607\">\u30106\u67087\u65e5\u3011<\/a><a href=\"#0614\">\u30106\u670814\u65e5\u3011<\/a><a href=\"#0621\">\u30106\u670821\u65e5\u3011<\/a><\/p>\n<h2>\u8ab2\u524d\u9810\u7fd2\uff1a<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=pr7JFQaAYjg\" target=\"_blank\" rel=\"noopener noreferrer\">[\u7dda\u4e0a\u8b80\u66f8\u6703] andy \u4e3b\u8b1b javascript \u5165\u9580 \u706b\u529b\u52a0\u5f37\u7248<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=yhjWDUGnFks\" target=\"_blank\" rel=\"noopener noreferrer\">[\u7dda\u4e0a\u8b80\u66f8\u6703] TypeScript \u5165\u9580 &#8211; \u62c9\u62c9 \u4e3b\u8b1b<\/a><\/li>\n<li><a href=\"https:\/\/docs.google.com\/presentation\/d\/12Sz82TDKlxKTHHXkqYmtSDq5zeDG_tGXfAkLe6sPrTQ\/edit#slide=id.g1c53a05b9d_0_7\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u7c21\u4ecb<\/a><\/li>\n<\/ul>\n<h2>\u958b\u767c\u74b0\u5883\u8207\u5de5\u5177\uff1a<\/h2>\n<ul>\n<li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a>\u00a0(1.13.1)<\/li>\n<li><a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a>\u00a0(v6.11.0 LTS, v8.1.2 Current)<\/li>\n<li><a href=\"https:\/\/www.jetbrains.com\/webstorm\/download\/#section=windows\" target=\"_blank\" rel=\"noopener noreferrer\">WebStorm<\/a>\u00a0(2017.1.4)<\/li>\n<li><a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git<\/a>\u00a0(2.13.1)<\/li>\n<li><a href=\"https:\/\/cli.angular.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular CLI<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/angular\/angular-cli\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub &#8211; angular\/angular-cli: CLI tool for Angular<\/a><\/li>\n<li>Angular Augury<\/li>\n<\/ul>\n<h3>\u5b89\u88dd\u958b\u767c\u74b0\u5883\u8207\u5de5\u5177<\/h3>\n<ul>\n<li>\u5b89\u88dd nodejs<\/li>\n<li>\u5b89\u88dd\u958b\u767c\u5de5\u5177 (WebStorm)<\/li>\n<li>\u5b89\u88dd Git<\/li>\n<li>\u5b89\u88dd Chrome \u64f4\u5145\u529f\u80fd\uff1aAngular Augury<\/li>\n<\/ul>\n<h3>\u5b89\u88dd\u00a0<a href=\"https:\/\/cli.angular.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular CLI<\/a><\/h3>\n<p><code class=\"language-bash\">npm install -g @angular\/cli \/\/@\u985e\u4f3c namespace \u529f\u80fd<br \/>\nng -v<\/code><\/p>\n<hr \/>\n<p><code class=\"language-bash\">ng new demo --routing<br \/>\ncd demo<br \/>\nnpm install @angular\/language-service --save-dev<br \/>\nng -v<\/code><\/p>\n<h3>\u57f7\u884c\u5c08\u6848\u5c08\u5c6c\u7684 TypeScript \u7de8\u8b6f\u7a0b\u5f0f<\/h3>\n<ul>\n<li><strong><span style=\"color: #0000ff;\">.\\node_modules\\.bin\\tsc<\/span><\/strong><\/li>\n<li>\u7de8\u8b6f <strong><span style=\"color: #0000ff;\">src\\main.ts<\/span><\/strong> \u70ba\u00a0<strong><span style=\"color: #0000ff;\">src\\main.js<\/span><\/strong><\/li>\n<li><strong><span style=\"color: #ff0000;\">-w<\/span><\/strong> : \u6301\u7e8c\u76e3\u8996 src\\main.ts\uff0c\u4e00\u6709\u8b8a\u52d5\uff0c\u5c31\u7acb\u5373\u7de8\u8b6f<\/li>\n<\/ul>\n<h4><strong><span style=\"color: #0000ff;\">.\\node_modules\\.bin\\tsc <\/span><\/strong><span style=\"color: #0000ff;\"><span style=\"color: #ff0000;\">src\\main<\/span><\/span><strong><span style=\"color: #0000ff;\"> -w<\/span><\/strong><\/h4>\n<hr \/>\n<p><a name=\"0510\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u30105\u670810\u65e5\u3011\uff1a<\/span><\/h2>\n<p><a href=\"#resource\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/a><a href=\"#0503\">\u30105\u67083\u65e5\u3011<\/a><strong><span style=\"color: #ff0000;\">\u30105\u670810\u65e5\u3011<\/span><\/strong><a href=\"#0517\">\u30105\u670817\u65e5\u3011<\/a><a href=\"#0524\">\u30105\u670824\u65e5\u3011<\/a><a href=\"#0531\">\u30105\u670831\u65e5\u3011<\/a><a href=\"#0607\">\u30106\u67087\u65e5\u3011<\/a><a href=\"#0614\">\u30106\u670814\u65e5\u3011<\/a><a href=\"#0621\">\u30106\u670821\u65e5\u3011<\/a><\/p>\n<h2>\u8ab2\u524d\u9810\u7fd2\uff1a<\/h2>\n<h3>\u66f4\u65b0\u00a0<a href=\"https:\/\/cli.angular.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular CLI<\/a><\/h3>\n<p>angular-cli \u66f4\u65b0\u5230 1.0.2 \u7248\u4e86\uff0c\u66f4\u65b0\u6b65\u9a5f\u5982\u4e0b\uff1a<\/p>\n<p>global \u7248\u672c\u66f4\u65b0\uff1a<\/p>\n<p>npm uninstall -g @angular\/cli<span class=\"text_exposed_show\"><br \/>\nnpm cache clean<br \/>\nnpm install -g @angular\/cli@latest<\/span><\/p>\n<div class=\"text_exposed_show\">\n<p>\u67e5\u770b angular-cli \u7248\u672c( \u5c08\u6848\u76ee\u9304\u4e4b\u5916\u57f7\u884c )\uff1a<br \/>\nng -v<\/p>\n<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<\/p>\n<p>\u820a\u7248 angular-cli \u7522\u751f\u7684\u5c08\u6848\u5167\u7684\u7248\u672c( local )\u66f4\u65b0\uff1a<\/p>\n<p>\u6ce8\u610f\uff01\uff01<br \/>\n\u4ee5\u4e0b\u6307\u4ee4\u8981\u5728\u5c08\u6848\u6839\u76ee\u9304\u4e0b\u57f7\u884c\uff0c\u4e5f\u6703\u5347\u7d1a\u5176\u4ed6 package<\/p>\n<p>Linux or Mac<br \/>\nrm -rf node_modules dist<\/p>\n<p>Windows \u547d\u4ee4\u63d0\u793a\u5b57\u5143<br \/>\nrmdir \/S\/Q node_modules dist<\/p>\n<p>Windows PowerShell<br \/>\nrm -r -fo node_modules,dist<\/p>\n<p>\u6240\u6709\u4f5c\u696d\u7cfb\u7d71<br \/>\nnpm install &#8211;save-dev @angular\/cli@latest<br \/>\nnpm install<\/p>\n<p>\u55ae\u7368\u5347\u7d1a\u5c08\u6848\u5167\u7684 angular-cli<\/p>\n<p>npm uninstall @angular\/cli &#8211;save-dev<br \/>\nnpm install &#8211;save-dev @angular\/cli<\/p>\n<p>\u67e5\u770b local angular-cli \u8207 angular \u76f8\u95dc package \u7248\u672c( \u5c08\u6848\u76ee\u9304\u4e0b\u57f7\u884c )\uff1a<br \/>\nng -v<\/p>\n<\/div>\n<hr \/>\n<h4><a href=\"https:\/\/www.youtube.com\/watch?v=aMeF8ksXv7o&amp;list=PLpuDiZGfLNIhhdcrbDGUnYs_febOZ49Xw&amp;index=4\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u4f7f\u7528 Angular 2 \u958b\u767c TodoMVC \u61c9\u7528\u7a0b\u5f0f\u5b8c\u6574\u5be6\u4f5c\u6559\u5b78<\/a><\/h4>\n<div class=\"epyt-video-wrapper\"><iframe  style=\"display: block; margin: 0px auto;\"  id=\"_ytid_83493\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\"  data-relstop=\"1\" src=\"https:\/\/www.youtube.com\/embed\/aMeF8ksXv7o?enablejsapi=1&autoplay=0&cc_load_policy=0&cc_lang_pref=&iv_load_policy=1&loop=0&rel=0&fs=1&playsinline=0&autohide=2&theme=dark&color=red&controls=1&disablekb=0&\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div>\n<h3>\u64cd\u4f5c\u6307\u4ee4\uff1a<\/h3>\n<p><strong><span style=\"color: #000080;\">ng new todomvc<\/span><\/strong><\/p>\n<p><strong><span style=\"color: #000080;\">cd todomvc<\/span><\/strong><\/p>\n<p><strong><span style=\"color: #000080;\">code .<\/span><\/strong> ==&gt; \u555f\u7528 Visual Studio Code\uff0c\u4e26\u958b\u555f\u7576\u524d\u6240\u5728\u7684\u8cc7\u6599\u593e(todomvc)<\/p>\n<p><strong><span style=\"color: #000080;\">cd ..<\/span><\/strong><\/p>\n<p><strong><span style=\"color: #000080;\">git clone https:\/\/github.com\/coolrare\/todomvc-template.git<\/span><\/strong><\/p>\n<ul>\n<li>\u8907\u88fd todomvc-template\/assets\/css \u8cc7\u6599\u593e\u81f3 todomvc\/src\/assets \u4e0b<\/li>\n<li>\u958b\u555f todomvc-template\/index.html \u5c07\u5167\u5bb9\u6574\u500b\u8907\u88fd\u81f3 todomvc\/src\/index.html \u5167\u505a\u7de8\u8f2f\u3002<\/li>\n<li>\u5c07\u539f todomvc-template\/index.html \u4e2d &lt;head&gt; \u4e2d\u7684\u5167\u5bb9\uff1a\n<ul>\n<li>&lt;title&gt; \u53d6\u4ee3 \u539f todomvc\/src\/index.html \u4e2d\u7684 &lt;title&gt;<\/li>\n<li>\u5169\u500b &lt;link&gt; \u8907\u88fd\u81f3\u539f todomvc\/index.html &lt;head&gt; \u4e2d<\/li>\n<\/ul>\n<\/li>\n<li>\u5c07\u539f todomvc-template\/index.html \u4e2d &lt;body&gt; \u7684\u5167\u5bb9\u53d6\u4ee3 todomvc\/src\/app\/app.component.html \u4e2d\u7684\u5167\u5bb9\u3002<\/li>\n<\/ul>\n<p><span style=\"color: #000080;\"><strong>npm start<\/strong><\/span> ==&gt; \u555f\u7528\u7db2\u9801\u4f3a\u670d\u5668 http:\/\/localhost:4200\uff0c\u4e26\u76e3\u8996\u7db2\u9801\u66f4\u65b0\u60c5\u5f62\uff0c\u4e00\u6709\u66f4\u65b0\u7acb\u5373\u91cd\u65b0\u7de8\u8b6f\uff0c\u4e26\u66f4\u65b0\u7db2\u9801<\/p>\n<p><span style=\"color: #000080;\"><strong>ng g c title<\/strong><\/span><\/p>\n<p><span style=\"color: #000080;\"><strong>ng g c rooter<\/strong><\/span><\/p>\n<p><span style=\"color: #000080;\"><strong>ng g pipe filter<\/strong><\/span><\/p>\n<p><span style=\"color: #000080;\"><strong>ng g service data<\/strong><\/span><\/p>\n<hr \/>\n<h2>\u8ab2\u7a0b\u6d3b\u52d5\uff1a<\/h2>\n<h2>\u8b1b\u7fa9\uff1a<a href=\"https:\/\/docs.google.com\/presentation\/d\/12Sz82TDKlxKTHHXkqYmtSDq5zeDG_tGXfAkLe6sPrTQ\/edit#slide=id.g1c53a05b9d_0_7\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u7c21\u4ecb<\/a><\/h2>\n<h3>\u53c3\u8003\u7db2\u7ad9\uff1a\u4e0d\u5c08\u696d\u7db2\u7ba1\u7b46\u8a18 | \u6797\u58eb\u7acb\u8001\u5e2b<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6619\" src=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template1.png\" alt=\"\" width=\"1027\" height=\"665\" srcset=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template1.png 1027w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template1-600x389.png 600w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template1-768x497.png 768w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template1-150x97.png 150w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template1-400x259.png 400w\" sizes=\"(max-width: 1027px) 100vw, 1027px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6620\" src=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template2.png\" alt=\"\" width=\"1326\" height=\"695\" srcset=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template2.png 1326w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template2-600x314.png 600w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template2-768x403.png 768w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template2-150x79.png 150w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060510_Template2-400x210.png 400w\" sizes=\"(max-width: 1326px) 100vw, 1326px\" \/><\/p>\n<hr \/>\n<h2>\u5be6\u4f5c\uff1a<\/h2>\n<h3>\u7bc4\u4f8b\u7a0b\u5f0f\u4e0b\u8f09\uff1a<a href=\"https:\/\/drive.google.com\/drive\/folders\/0B_wx0SuvjnGWd1pyZmY3Zi1memM\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/drive.google.com\/drive\/folders\/0B_wx0SuvjnGWd1pyZmY3Zi1memM<\/a><\/h3>\n<h3>\u53c3\u8003\u8cc7\u6599\uff1a<\/h3>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=doggy8088.angular-extension-pack\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Extension Pack\uff1aPopular Visual Studio Code extensions for Angular Development &#8211;\u00a0Will \u4fdd\u54e5<\/a><\/li>\n<li>\u7bc4\u4f8b\u7a0b\u5f0f\u6a94\uff1a<a href=\"https:\/\/bitbucket.org\/t301000\/toh-ntpc-coder-2017\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/bitbucket.org\/t301000\/toh-ntpc-coder-2017<\/a><\/li>\n<li><a href=\"https:\/\/youtu.be\/tz845F8LLdU\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">WebStorm \u8a2d\u5b9a\u8abf\u6574<\/a><\/li>\n<\/ul>\n<h3>\u64cd\u4f5c\u6307\u4ee4\u53ca\u6b65\u9a5f\uff1a<\/h3>\n<ul>\n<li><span style=\"color: #0000ff;\"><strong>ng new toh-demo &#8211;routing\u00a0<span style=\"color: #ff0000;\">(\u6ce8\u610f\uff1arouting\u524d\u6709\u5169\u500b &#8211; \u865f)<\/span><\/strong><\/span><\/li>\n<li>\u958b\u555f WebStrom<\/li>\n<li><span style=\"color: #0000ff;\"><strong>npm start<\/strong><\/span>\u00a0 =&gt; \u555f\u7528\u7db2\u9801\u4f3a\u670d\u5668 http:\/\/localhost:4200\uff0c\u4e26\u76e3\u8996\u7db2\u9801\u66f4\u65b0\u60c5\u5f62\uff0c\u4e00\u6709\u66f4\u65b0\u7acb\u5373\u91cd\u65b0\u7de8\u8b6f\uff0c\u4e26\u66f4\u65b0\u7db2\u9801<\/li>\n<li>\u7bc4\u4f8b\u6a94\u6848\u4e0b\u8f09\u89e3\u58d3\u7e2e\u81f3\u5c08\u6848\u6839\u76ee\u9304\u4e0b<\/li>\n<li><span style=\"color: #0000ff;\"><strong>ng g c navbar<\/strong><\/span>\u00a0(ng generate component navbar) =&gt; \u7522\u751f src\/app\/navbar \u8cc7\u6599\u593e<\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">installing component<br \/>\ncreate src\\app\\navbar\\navbar.component.css<br \/>\ncreate src\\app\\navbar\\navbar.component.html<br \/>\ncreate src\\app\\navbar\\navbar.component.spec.ts<br \/>\ncreate src\\app\\navbar\\navbar.component.ts<br \/>\nupdate src\\app\\app.module.ts<\/p>\n<ul>\n<li>\u5c07\u7bc4\u4f8b\u6a94 <strong><span style=\"color: #0000ff;\">heroes.html<\/span><\/strong> \u4e2d<strong><span style=\"color: #0000ff;\">&lt;nav&gt; (\u542b)<\/span><\/strong>\u7db2\u9801\u5167\u5bb9\u53d6\u4ee3 <strong><span style=\"color: #0000ff;\">navbar.component.html<\/span><\/strong> \u4e2d\u6240\u6709\u7684\u7db2\u9801\u5167\u5bb9\u3002<\/li>\n<li>\u5c07\u7bc4\u4f8b\u6a94 <strong><span style=\"color: #0000ff;\">heroes.html<\/span><\/strong>\u00a0\u4e0b\u5217\u8cc7\u6599\u8907\u88fd\u81f3<strong><span style=\"color: #0000ff;\"> index.html <\/span><\/strong>\u76f8\u5c0d\u4f4d\u7f6e<\/li>\n<\/ul>\n<pre>&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.7\/css\/bootstrap.min.css\"&gt;<\/pre>\n<pre>&lt;script src=\"https:\/\/code.jquery.com\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.7\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<ul>\n<li><strong><span style=\"color: #0000ff;\">ng g c heroes<\/span><\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\">installing component<br \/>\ncreate src\\app\\heroes\\heroes.component.css<br \/>\ncreate src\\app\\heroes\\heroes.component.html<br \/>\ncreate src\\app\\heroes\\heroes.component.spec.ts<br \/>\ncreate src\\app\\heroes\\heroes.component.ts<br \/>\nupdate src\\app\\app.module.ts<\/p>\n<ul>\n<li>\u5c07\u7bc4\u4f8b\u6a94 <strong><span style=\"color: #0000ff;\">heroes.html<\/span><\/strong> \u4e2d <strong><span style=\"color: #0000ff;\">&lt;div class=\"container\"&gt; (\u4e0d\u542b)<\/span><\/strong>\u7db2\u9801\u5167\u5bb9\u53d6\u4ee3 <strong><span style=\"color: #0000ff;\">heroes<\/span><span style=\"color: #0000ff;\">.component.html<\/span><\/strong> \u4e2d\u6240\u6709\u7684\u7db2\u9801\u5167\u5bb9\u3002<\/li>\n<li><strong><span style=\"color: #0000ff;\">ng g cl Hero<\/span><\/strong><br \/>\ninstalling class<br \/>\ncreate <strong><span style=\"color: #ff0000;\">src\\app\\hero.ts<\/span><\/strong><\/li>\n<li>\u8907\u88fd\u00a0<span style=\"color: #0000ff;\"><strong>mock-heroes.ts<\/strong><\/span> \u81f3 <strong><span style=\"color: #ff0000;\">src\/app<\/span><\/strong> \u4e0b<\/li>\n<\/ul>\n<hr \/>\n<h3>\u4fee\u6539\u00a0<strong><span style=\"color: #0000ff;\">heroes<\/span><span style=\"color: #0000ff;\">.component.html <\/span><\/strong>\u5167\u5bb9<\/h3>\n<pre>&lt;!-- \u6e05\u55ae --&gt;\r\n&lt;div class=\"list-group\"&gt;\r\n  &lt;a class=\"list-group-item my-item\" <span style=\"color: #ff0000;\"><strong>*ngFor=\"let hero of heroes\"<\/strong><\/span>&gt;\r\n    &lt;span&gt;<strong><span style=\"color: #ff0000;\">{{ hero.id }}<\/span><\/strong>&lt;\/span&gt;<strong><span style=\"color: #ff0000;\">{{ hero.name }}<\/span><\/strong>&lt;span class=\"badge\"&gt;X&lt;\/span&gt;\r\n  &lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;!-- \u6e05\u55ae\u7d50\u675f --&gt;<\/pre>\n<h3><span style=\"color: #0000ff;\"><strong>hero.ts\u00a0<\/strong><\/span>\u5167\u5bb9<\/h3>\n<pre>export class Hero {\r\n  id: number;\r\n  name: string;\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">app.component.html<\/span><\/strong> \u7db2\u9801\u5167\u5bb9<\/h3>\n<pre><strong><span style=\"color: #0000ff;\">&lt;app-navbar&gt;&lt;\/app-navbar&gt;<\/span><\/strong>\r\n&lt;div class=\"container\"&gt;\r\n  <strong><span style=\"color: #0000ff;\">&lt;app-heroes&gt;&lt;\/app-heroes&gt;<\/span><\/strong>\r\n&lt;\/div&gt;<\/pre>\n<hr \/>\n<h3>Angular \u7cfb\u7d71\u904b\u4f5c\u8aaa\u660e\uff1a<\/h3>\n<h3><strong><span style=\"color: #ff0000;\">main.ts \u8aaa\u660e\uff1a<\/span><\/strong><\/h3>\n<pre>import { enableProdMode } from '@angular\/core';\r\nimport { platformBrowserDynamic } from '@angular\/platform-browser-dynamic';\r\n\r\nimport { AppModule } from '.\/app\/app.module';\r\nimport { environment } from '.\/environments\/environment';\r\n\r\nif (environment.production) {\r\n  enableProdMode();\r\n}\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule);<\/pre>\n<h3><strong><span style=\"color: #ff0000;\">app.module.ts \u8aaa\u660e\uff1a<\/span><\/strong><\/h3>\n<pre>import { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { HttpModule } from '@angular\/http';\r\nimport { CommonModule } from '@angular\/common';\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { NavbarComponent } from '.\/navbar\/navbar.component';\r\nimport { HeroesComponent } from \".\/heroes\/heroes.component\";\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    NavbarComponent,\r\n    HeroesComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    HttpModule,\r\n    CommonModule,\r\n    AppRoutingModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/pre>\n<h3><strong><span style=\"color: #ff0000;\">app.component.ts \u8aaa\u660e\uff1a<\/span><\/strong><\/h3>\n<pre>import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',  \/\/ <strong><span style=\"color: #0000ff;\">HTML Tag<\/span><\/strong>\r\n  templateUrl: '.\/app.component.html',  \/\/ \u6a23\u677f\u7db2\u9801\u7f6e\u65bc\u53e6\u4e00\u500b\u6a94\u6848\r\n\/*\r\n<span style=\"color: #993300;\">  template: `&lt;app-navbar&gt;&lt;\/app-navbar&gt;`,  \/\/<\/span><span style=\"color: #993300;\"> \u6a23\u677f\u7db2\u9801\u5167\u5bb9\u7f6e\u65bc\u5012\u55ae\u5f15\u865f\u300c<span style=\"color: #ff00ff;\"><strong>`<\/strong><span style=\"color: #993300;\">\u300d<\/span><\/span>\u4e2d<\/span>\r\n*\/\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n}<\/pre>\n<hr \/>\n<p><a name=\"0517\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u30105\u670817\u65e5\u3011\uff1a<\/span><\/h2>\n<p><a href=\"#resource\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/a><a href=\"#0503\">\u30105\u67083\u65e5\u3011<\/a><a href=\"#0510\">\u30105\u670810\u65e5\u3011<\/a><strong><span style=\"color: #ff0000;\">\u30105\u670817\u65e5\u3011<\/span><\/strong><a href=\"#0524\">\u30105\u670824\u65e5\u3011<\/a><a href=\"#0531\">\u30105\u670831\u65e5\u3011<\/a><a href=\"#0607\">\u30106\u67087\u65e5\u3011<\/a><a href=\"#0614\">\u30106\u670814\u65e5\u3011<\/a><a href=\"#0621\">\u30106\u670821\u65e5\u3011<\/a><\/p>\n<h3>\u8ab2\u524d\u9810\u7fd2\uff1a<\/h3>\n<ul>\n<li>Angular \u6838\u5fc3\u6982\u5ff5\u7c21\u5831\uff1a<a href=\"https:\/\/drive.google.com\/drive\/folders\/0B_wx0SuvjnGWd1pyZmY3Zi1memM\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/drive.google.com\/drive\/folders\/0B_wx0SuvjnGWd1pyZmY3Zi1memM<\/a><\/li>\n<li>JavaScript\uff1a<a href=\"https:\/\/www.youtube.com\/watch?v=pr7JFQaAYjg\" target=\"_blank\" rel=\"noopener noreferrer\">[\u7dda\u4e0a\u8b80\u66f8\u6703] andy \u4e3b\u8b1b javascript \u5165\u9580 \u706b\u529b\u52a0\u5f37\u7248<\/a><\/li>\n<li>TypeScript\uff1a<a href=\"https:\/\/www.youtube.com\/watch?v=yhjWDUGnFks\" target=\"_blank\" rel=\"noopener noreferrer\">[\u7dda\u4e0a\u8b80\u66f8\u6703] TypeScript \u5165\u9580 &#8211; \u62c9\u62c9 \u4e3b\u8b1b<br \/>\n<\/a><\/li>\n<li><a href=\"https:\/\/youtu.be\/SDgX00fHos0\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u958b\u767c\u5be6\u6230\uff1a\u9032\u968e\u958b\u767c\u7bc7 &#8211; RxJS \u65b0\u624b\u5165\u9580<\/a><\/li>\n<\/ul>\n<h3>\u4e0a\u8ab2\u8b1b\u7fa9\uff1a<\/h3>\n<ul>\n<li>\u8b1b\u7fa9\u3001\u7bc4\u4f8b\u6a94\u3001\u9304\u5f71\u6a94\uff1a<a href=\"http:\/\/bit.ly\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/bit.ly\/toh-ntpc-coder2017<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-\u555f\u52d5\u6d41\u7a0b.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u555f\u52d5\u6d41\u7a0b<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-\u958b\u767c\u74b0\u5883\u5efa\u7f6e-angular-cli.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u958b\u767c\u74b0\u5883\u5efa\u7f6e &amp; angular-cli<\/a>\n<ul>\n<li><a href=\"https:\/\/gist.github.com\/doggy8088\/15e434b43992cf25a78700438743774a\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 4 \u958b\u767c\u74b0\u5883\u8aaa\u660e by \u4fdd\u54e5<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/angular\/angular-cli\" target=\"_blank\" rel=\"noopener noreferrer\">angular-cli GitHub<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Component-\u6982\u8ff0\uff06Decorator.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Component \u6982\u8ff0\uff06Decorator<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/data-binding-\u8cc7\u6599\u7e6b\u7d50.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">data binding \u8cc7\u6599\u7e6b\u7d50<\/a><\/li>\n<\/ul>\n<h3>Angular2 Binding: \u7d44\u5408\u9375<\/h3>\n<p>keydown.a<br \/>\nkeydown.b<br \/>\nkeydown.c<br \/>\nkeydown.dot<br \/>\nkeydown.Spacebar<br \/>\nkeydown.meta.Enter \u00a0<strong><span style=\"color: #ff0000;\">&lt;= meta: Windows Key<\/span><\/strong><br \/>\nkeydown.alt.Enter<br \/>\nkeydown.control.Enter<br \/>\nkeydown.shift.Enter<br \/>\nkeydown.meta.o<br \/>\nkeydown.meta.s<br \/>\nkeydown.meta.f<br \/>\nkeydown.escape<br \/>\nkeydown.ArrowLeft<br \/>\nkeydown.ArrowRight<br \/>\nkeydown.ArrowUp<br \/>\nkeydown.ArrowDown<br \/>\nkeydown.0<br \/>\nkeydown.1<br \/>\nkeydown.2<br \/>\nkeydown.3<br \/>\nkeydown.4<br \/>\nkeydown.5<br \/>\nkeydown.6<br \/>\nkeydown.7<br \/>\nkeydown.8<br \/>\nkeydown.9<\/p>\n<h4>\u4f7f\u7528 keyup \u4e5f\u884c\uff0c\u53ea\u662f\u89f8\u767c\u6642\u9593\u9ede\u4e0d\u540c\u800c\u5df2\u3002<\/h4>\n<h3>\u8ab2\u5802\u7df4\u7fd2\u53ca\u7fd2\u4f5c\u89e3\u7b54\uff1a\u50c5\u4f9b\u53c3\u8003<\/h3>\n<h3><strong><span style=\"color: #0000ff;\">app.component.html<\/span><\/strong><\/h3>\n<pre>&lt;h1&gt;<strong><span style=\"color: #ff0000;\">{{<\/span><span style=\"color: #ff0000;\"><span style=\"color: #0000ff;\">title<\/span><\/span><span style=\"color: #ff0000;\">}}<\/span><\/strong>&lt;\/h1&gt;\r\n&lt;input type=\"text\" <strong><span style=\"color: #0000ff;\">#newurl<\/span> <span style=\"color: #ff0000;\">(keydown.control.enter)=\"changeUrl(<\/span><\/strong><span style=\"color: #0000ff;\">newurl.value<\/span><strong><span style=\"color: #ff0000;\">)\"<\/span><\/strong>&gt;\r\n&lt;button <strong><span style=\"color: #ff0000;\">(click)=\"changeUrl(<\/span><span style=\"color: #ff0000;\"><span style=\"color: #0000ff;\">newurl.value<\/span><\/span><span style=\"color: #ff0000;\">)\"<\/span><\/strong>&gt;submit&lt;\/button&gt;\r\n&lt;img <strong><span style=\"color: #ff0000;\">[src]=\"<span style=\"color: #0000ff;\">url<\/span>\"<\/span> <span style=\"color: #ff0000;\">[width]=\"<span style=\"color: #0000ff;\">w<\/span>\"<\/span><\/strong>&gt;\r\n&lt;hr&gt;\r\n\u5bec\uff1a{{<strong><span style=\"color: #0000ff;\">divx<\/span><\/strong>}}&lt;input type=\"range\" min=0 max=200 <strong><span style=\"color: #ff0000;\">[value]=\"<\/span><span style=\"color: #ff0000;\"><span style=\"color: #0000ff;\">divx<\/span><\/span><span style=\"color: #ff0000;\">\"<\/span><\/strong> style=\"width: 200px;\" <strong><span style=\"color: #ff0000;\">[(ngModel)]=\"<\/span><span style=\"color: #ff0000;\"><span style=\"color: #0000ff;\">divx<\/span><\/span><span style=\"color: #ff0000;\">\"<\/span><\/strong>&gt;\r\n\u9ad8\uff1a{{<strong><span style=\"color: #0000ff;\">divy<\/span><\/strong>}}&lt;input type=\"range\" min=0 max=200 <strong><span style=\"color: #ff0000;\">[value]=\"<\/span><span style=\"color: #ff0000;\"><span style=\"color: #0000ff;\">divy<\/span><\/span><span style=\"color: #ff0000;\">\"<\/span><\/strong> style=\"width: 200px;\" <strong><span style=\"color: #ff0000;\">[(ngModel)]=\"<\/span><span style=\"color: #ff0000;\"><span style=\"color: #0000ff;\">divy<\/span><\/span><span style=\"color: #ff0000;\">\"<\/span><\/strong>&gt;\r\n&lt;br&gt;\r\n&lt;div style=\"border: 1px red solid;\" <strong><span style=\"color: #ff0000;\">[style.width.px]=\"<span style=\"color: #0000ff;\">divx<\/span>\"<\/span> <span style=\"color: #ff0000;\">[style.height.px]=\"<span style=\"color: #0000ff;\">divy<\/span>\"<\/span><\/strong>&gt;&lt;\/div&gt;<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">app.component.ts<\/span><\/strong><\/h3>\n<pre>import { Component } from '@angular\/core';<\/pre>\n<pre>@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n title = 'app works!';\r\n url = 'https:\/\/angular.io\/resources\/images\/logos\/angular\/angular.svg';\r\n w = 100;\r\n divx = 100;\r\n divy = 100;\r\n\r\n changeUrl(newUrl) {\r\n   this.url = newUrl;\r\n }\r\n}\r\n<\/pre>\n<hr \/>\n<p><a name=\"0524\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u30105\u670824\u65e5\u3011\uff1a<\/span><\/h2>\n<p><a href=\"#resource\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/a><a href=\"#0503\">\u30105\u67083\u65e5\u3011<\/a><a href=\"#0510\">\u30105\u670810\u65e5\u3011<\/a><a href=\"#0517\">\u30105\u670817\u65e5\u3011<\/a><strong><span style=\"color: #ff0000;\">\u30105\u670824\u65e5\u3011<\/span><\/strong><span style=\"color: #ff0000;\"><a href=\"#0531\">\u30105\u670831\u65e5\u3011<\/a><\/span><a href=\"#0607\">\u30106\u67087\u65e5\u3011<\/a><a href=\"#0614\">\u30106\u670814\u65e5\u3011<\/a><a href=\"#0621\">\u30106\u670821\u65e5\u3011<\/a><\/p>\n<hr \/>\n<h3>\u5206\u4eab\u91cd\u9ede\uff1a<\/h3>\n<ul>\n<li>Angular \u4e2d\u7684 css \u6a23\u5f0f\u8655\u7406<\/li>\n<li>NgIf \u3001 NgFor \u3001 NgSwitch \u5bb6\u65cf<\/li>\n<\/ul>\n<h3>\u4e0a\u8ab2\u8b1b\u7fa9\uff1a<\/h3>\n<ul>\n<li>\u8b1b\u7fa9\u3001\u7bc4\u4f8b\u6a94\u3001\u9304\u5f71\u6a94\uff1a<a href=\"http:\/\/bit.ly\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/bit.ly\/toh-ntpc-coder2017<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-\u555f\u52d5\u6d41\u7a0b.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u555f\u52d5\u6d41\u7a0b<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/data-binding-\u8cc7\u6599\u7e6b\u7d50.pdf\">data binding \u8cc7\u6599\u7e6b\u7d50<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Attribute\u3001class\u3001style-binding.pdf\">Attribute\u3001class\u3001style binding<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/NgIf\u3001NgFor\u3001NgSwitch-\u57fa\u790e.pdf\">NgIf\u3001NgFor\u3001NgSwitch \u57fa\u790e<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Directive-\u6307\u4ee4\u3001Pipe-\u7ba1\u9053.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Directive \u6307\u4ee4\u3001Pipe \u7ba1\u9053<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/NgModule-\u6982\u8ff0\u3001Service-\u670d\u52d9\u8207-DI-\u4f9d\u8cf4\u6ce8\u5165.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">NgModule \u6982\u8ff0\u3001Service \u670d\u52d9\u8207 DI \u4f9d\u8cf4\u6ce8\u5165<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/\u7236\u5b50-Component-\u4e4b\u901a\u8a0a.pdf\">\u7236\u5b50 Component \u4e4b\u901a\u8a0a<\/a><\/li>\n<\/ul>\n<h3>Directive \u4e2d\u6587\u53c3\u8003\u8cc7\u6599\uff1a<\/h3>\n<ul>\n<li><u><a href=\"https:\/\/jeffwu85182.github.io\/2017\/03\/25\/angular-directive-reaserch\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Directive \u521d\u63a2 &#8211; Part.1<\/a><\/u><\/li>\n<li><u><a href=\"https:\/\/jeffwu85182.github.io\/2017\/04\/08\/angular-directive-reaserch-part-2\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Directive \u521d\u63a2 &#8211; Part.2<\/a><\/u><\/li>\n<li><u><a href=\"https:\/\/jeffwu85182.github.io\/2017\/04\/09\/angular-directive-research-part-3\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Directive \u521d\u63a2 &#8211; Part.3<\/a><\/u><\/li>\n<li><u><a href=\"https:\/\/www.gitbook.com\/book\/t301000\/structural-directive\/details\" target=\"_blank\" rel=\"noopener noreferrer\">Structural Directive @ \u7dda\u4e0a\u8b80\u66f8\u6703<\/a><\/u><\/li>\n<\/ul>\n<h3>\u53c3\u8003\u8cc7\u6599\uff1a<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.telerik.com\/kendo-angular-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kendo UI for Angular<\/a><\/li>\n<li>Angular API \u53c3\u8003\u624b\u518a<\/li>\n<\/ul>\n<h3>\u4e0a\u8ab2\u7b46\u8a18\uff1a<\/h3>\n<h3><strong><span style=\"color: #0000ff;\">app.component.html<\/span><\/strong><\/h3>\n<pre>&lt;table border=\"2\"&gt;\r\n  &lt;tr&gt;\r\n    &lt;td [attr.colspan]=\"cols\"&gt;1&lt;\/td&gt;\r\n    &lt;td&gt;2&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;4&lt;\/td&gt;\r\n    &lt;td&gt;5&lt;\/td&gt;\r\n    &lt;td&gt;6&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n&lt;br \/&gt;\r\n\r\n&lt;div class=\"abc\"\r\n     [class.active]=\"active\"\r\n     [class.title]=\"active\"&gt;&lt;\/div&gt;\r\n\r\n&lt;button (click)=\"active = !active\"&gt;{{active}}&lt;\/button&gt;\r\n\r\n&lt;div class=\"abc active inactive\"\r\n     [ngClass]=\"getObj()\"&gt;&lt;\/div&gt;\r\n\r\n&lt;textarea [(ngModel)]=\"msg\" *ngIf=\"true\"&gt;&lt;\/textarea&gt;\r\n\r\n&lt;textarea [(ngModel)]=\"msg\" *ngIf=\"false\"&gt;&lt;\/textarea&gt;\r\n&lt;textarea [(ngModel)]=\"msg\" [hidden]=\"true\"&gt;&lt;\/textarea&gt;\r\n\r\n&lt;button *ngFor=\"let item of array1\" (click)=\"handle(item)\"&gt;\r\n  {{item}}\r\n&lt;\/button&gt;\r\n\r\n&lt;br \/&gt;\r\n\r\n&lt;button (click)=\"color='red'\"&gt;red&lt;\/button&gt;\r\n&lt;button (click)=\"color='blue'\"&gt;blue&lt;\/button&gt;\r\n\r\n&lt;div *ngIf=\"color==='red'; then thenblock; else other\"&gt;&lt;\/div&gt;\r\n\r\n&lt;ng-template #thenblock&gt;\r\n  &lt;div style=\"background-color: red; width: 100px; height: 100px;\"&gt;&lt;\/div&gt;\r\n&lt;\/ng-template&gt;\r\n\r\n&lt;ng-template #other&gt;\r\n  &lt;div style=\"background-color: blue; width: 100px; height: 100px;\"&gt;&lt;\/div&gt;\r\n&lt;\/ng-template&gt;<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">app.component.ts<\/span><\/strong><\/h3>\n<pre>export class AppComponent {\r\n  cols = 2;\r\n  active = true;\r\n  msg = '';\r\n  array1 = ['aa', 'bb', 'cc', 'dd'];\r\n  color = 'red';\r\n\r\n  getObj() {\r\n    return {\r\n      active: this.active,\r\n      inactive: !this.active,\r\n      myTitle: true\r\n    };\r\n  }\r\n\r\n  handle(m: string) {\r\n    this.msg += this.msg ? (',' + m) : m;\r\n  }\r\n\r\n}<\/pre>\n<hr \/>\n<p><a name=\"0531\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u30105\u670831\u65e5\u3011\uff1a<\/span><\/h2>\n<p><a href=\"#resource\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/a><a href=\"#0503\">\u30105\u67083\u65e5\u3011<\/a><a href=\"#0510\">\u30105\u670810\u65e5\u3011<\/a><a href=\"#0517\">\u30105\u670817\u65e5\u3011<\/a><a href=\"#0524\">\u30105\u670824\u65e5\u3011<\/a><strong><span style=\"color: #ff0000;\">\u30105\u670831\u65e5\u3011<\/span><\/strong><a href=\"#0607\">\u30106\u67087\u65e5\u3011<\/a><a href=\"#0614\">\u30106\u670814\u65e5\u3011<\/a><a href=\"#0621\">\u30106\u670821\u65e5\u3011<\/a><\/p>\n<hr \/>\n<h3>\u4e0a\u8ab2\u8b1b\u7fa9\u3001\u7bc4\u4f8b\u3001\u9304\u5f71\u6a94\uff1a<\/h3>\n<ul>\n<li><a href=\"https:\/\/gist.github.com\/anonymous\/573691b169ab8550b99bebdd66039bd0\" target=\"_blank\" rel=\"noopener noreferrer\">\u7bc4\u4f8b\uff1a\u8abf\u8272\u76e4 \u53e6\u5916\u5169\u7a2e\u53c3\u8003\u5beb\u6cd5<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/NgIf\u3001NgFor\u3001NgSwitch-\u57fa\u790e.pdf\">NgIf\u3001NgFor\u3001NgSwitch \u57fa\u790e<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/\u7236\u5b50-Component-\u4e4b\u901a\u8a0a.pdf\">\u7236\u5b50 Component \u4e4b\u901a\u8a0a<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/drive\/folders\/0B_wx0SuvjnGWTzRYMzJrMGxGWjA\" target=\"_blank\" rel=\"noopener noreferrer\">\u4e0a\u8ab2\u9304\u5f71\u6a94<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/drive\/folders\/0B_wx0SuvjnGWd1pyZmY3Zi1memM\" target=\"_blank\" rel=\"noopener noreferrer\">\u4e0a\u8ab2\u8b1b\u7fa9<\/a><\/li>\n<li><a href=\"https:\/\/gist.github.com\/t301000\/cecc8f09105683e576599419b852c690\" target=\"_blank\" rel=\"noopener noreferrer\">\u4eca\u5929\u7684\u7c21\u6613\u8a08\u6578\u5668\u7bc4\u4f8b<\/a><\/li>\n<\/ul>\n<h3>\u5be6\u4f5c\uff1a<\/h3>\n<h3><span style=\"color: #ff0000;\"><strong>ng g c child<\/strong><\/span><\/h3>\n<h3><span style=\"color: #0000ff;\"><strong>child\\child.component.html<\/strong><\/span><\/h3>\n<pre>&lt;h2&gt;<strong><span style=\"color: #ff00ff;\">{{ title }}<\/span><\/strong>&lt;\/h2&gt;\r\n&lt;button <span style=\"color: #ff00ff;\"><strong>(click)=\"send('msg from child');\"<\/strong><\/span>&gt;\u9ede\u6211\uff01\u9ede\u6211&lt;\/button&gt;<\/pre>\n<h3><span style=\"color: #0000ff;\"><strong>child\\child.component.ts<\/strong><\/span><\/h3>\n<pre>export class ChildComponent implements OnInit {\r\n  <strong><span style=\"color: #ff00ff;\">@Input() title = 'default child title';<\/span>\r\n\r\n  <span style=\"color: #ff00ff;\">@Output() sendmsg = new EventEmitter&lt;string&gt;();<\/span><\/strong>\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  <strong><span style=\"color: #ff00ff;\">send(msg)<\/span><\/strong> {\r\n    console.log(msg);\r\n    <strong><span style=\"color: #ff00ff;\">this.sendmsg.emit(msg);<\/span><\/strong>\r\n  }\r\n\r\n}\r\n\r\n<\/pre>\n<hr \/>\n<h3><span style=\"color: #ff0000;\"><strong>ng g c counter-button<\/strong><\/span><\/h3>\n<h3><strong><span style=\"color: #0000ff;\">counter-button\\counter-button.component.html<\/span><\/strong><\/h3>\n<pre>&lt;button <strong><span style=\"color: #ff00ff;\">(click)=\"count();\"<\/span><\/strong>&gt;<strong><span style=\"color: #ff00ff;\">{{ value }}<\/span><\/strong>&lt;\/button&gt;<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">counter-button\\counter-button.component.ts<\/span><\/strong><\/h3>\n<pre>export class CounterButtonComponent implements OnInit {\r\n  <span style=\"color: #ff00ff;\"><strong>@Input('step') value = 1;<\/strong>\r\n\r\n <strong> @Output('changed') valueChange = new EventEmitter&lt;number&gt;();<\/strong><\/span>\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n<strong><span style=\"color: #ff00ff;\">  count() {\r\n    this.valueChange.emit(this.value);\r\n  }<\/span><\/strong>\r\n\r\n}\r\n\r\n<\/pre>\n<hr \/>\n<h3><strong><span style=\"color: #0000ff;\">app.component.html<\/span><\/strong><\/h3>\n<pre>&lt;app-child\r\n  [title]=\"'this is new title'\"\r\n  (sendmsg)=\"log($event)\"&gt;\r\n&lt;\/app-child&gt;\r\n&lt;br&gt;\r\n&lt;app-counter-button [value]=\"-2\" (changed)=\"change($event);\"&gt;&lt;\/app-counter-button&gt;\r\n{{ counter }}\r\n&lt;app-counter-button [value]=\"+5\" (changed)=\"change($event);\"&gt;&lt;\/app-counter-button&gt;<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">app.component.ts<\/span><\/strong><\/h3>\n<pre>counter = 10;<\/pre>\n<pre>log(e) {\r\n  console.log(e);\r\n}\r\n\r\nchange(v: number) {\r\n  this.counter += v;\r\n}<\/pre>\n<hr \/>\n<h3>\u4f5c\u696d\uff1a<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6874\" src=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060531_homework.png\" alt=\"\" width=\"885\" height=\"349\" srcset=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060531_homework.png 885w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060531_homework-600x237.png 600w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060531_homework-768x303.png 768w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060531_homework-150x59.png 150w, https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/1060531_homework-400x158.png 400w\" sizes=\"(max-width: 885px) 100vw, 885px\" \/><\/p>\n<ul>\n<li>\u6309\u4e0b\u65b9\u5716\u584a\uff0c\u5716\u584a\u7684\u984f\u8272\u6703\u986f\u793a\u5728\u4e0a\u65b9<\/li>\n<li>\u6309\u4e0b\u65b9\u5716\u584a\u7684\u6309\u9215[edit]\uff0c\u6703\u51fa\u73fe\u6309\u9215[close]\u53ca\u8272\u5f69\u4e09\u539f\u8272(\u7d05\u3001\u7da0\u3001\u85cd)\u62c9\u9738\uff0c\u53ef\u6df7\u8272\u70ba\u5728\u5176\u4e0a\u65b9\u7684\u5716\u584a\u984f\u8272\uff0c\u539f\u6309\u9215[edit]\u6703\u6d88\u5931\u3002<\/li>\n<li>\u6309\u4e0b\u65b9\u5716\u584a\u7684\u6309\u9215[close]\uff0c\u6703\u51fa\u73fe\u6309\u9215[edit]\uff0c\u539f\u6309\u9215[close]\u53ca\u8272\u5f69\u4e09\u539f\u8272(\u7d05\u3001\u7da0\u3001\u85cd)\u62c9\u9738\u6703\u6d88\u5931\u3002<\/li>\n<\/ul>\n<h3>\u25ce\u6797\u58eb\u7acb\u8001\u5e2b\u4f5c\u696d\u5be6\u4f5c\u53c3\u8003\uff1a<\/h3>\n<h4 style=\"padding-left: 30px;\"><a href=\"https:\/\/gist.github.com\/t301000\/fa692be5208abdf6b793e94901c20b57\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/gist.github.com\/t301000\/fa692be5208abdf6b793e94901c20b57<\/a><\/h4>\n<h3>\u90b1\u662d\u58eb\u8001\u5e2b\u4f5c\u696d\u5be6\u4f5c\u53c3\u8003\uff1a<\/h3>\n<h3><span style=\"color: #ff0000;\"><strong>ng g c color-panel<\/strong><\/span><\/h3>\n<h3><strong><span style=\"color: #0000ff;\">color-panel\\color-panel.component.html<\/span><\/strong><\/h3>\n<pre>&lt;div style=\"width: 100px; height: 100px;\" [style.backgroundColor]=\"getMyStyle()\" (click)=\"setStyle()\"&gt;&lt;\/div&gt;\r\n&lt;div *ngIf=\"edit; then thenBlock; else otherBlock\"&gt;&lt;\/div&gt;\r\n&lt;ng-template #thenBlock&gt;\r\n  &lt;button (click)=\"edit=false;\"&gt;close&lt;\/button&gt;\r\n  &lt;input type=\"range\" min=\"0\" max=\"255\" style=\"background-color: red;\" [(ngModel)]=\"color.r\"&gt;\r\n  &lt;input type=\"range\" min=\"0\" max=\"255\" style=\"background-color: green;\" [(ngModel)]=\"color.g\"&gt;\r\n  &lt;input type=\"range\" min=\"0\" max=\"255\" style=\"background-color: blue;\" [(ngModel)]=\"color.b\"&gt;\r\n&lt;\/ng-template&gt;\r\n\r\n&lt;ng-template #otherBlock&gt;\r\n  &lt;button (click)=\"edit=true;\"&gt;edit&lt;\/button&gt;\r\n&lt;\/ng-template&gt;<\/pre>\n<h3><strong style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;\"><span style=\"color: #0000ff;\">color-panel\\color-panel.component.css<\/span><\/strong><\/h3>\n<pre>input[type=\"range\"]{\r\n  -webkit-appearance: none;\r\n  overflow:hidden;     \/* \u9650\u5b9a\u7bc4\u570d *\/\r\n  width:90px;\r\n  height:15px;\r\n  outline : none;      \/* \u907f\u514d\u9ede\u9078\u6703\u6709\u85cd\u7dda\u6216\u865b\u7dda *\/\r\n  background:none;\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">color-panel\\color-panel.component.ts<\/span><\/strong><\/h3>\n<pre>import {Component, EventEmitter, Input, OnInit, Output} from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-color-panel',\r\n  templateUrl: '.\/color-panel.component.html',\r\n  styleUrls: ['.\/color-panel.component.css']\r\n})\r\nexport class ColorPanelComponent implements OnInit {\r\n edit = false;\r\n @Input() color = {r: 255, g: 255, b: 255};\r\n @Output() colorSet = new EventEmitter&lt;string&gt;();\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n getMyStyle() {\r\n   return `rgb(${this.color.r}, ${this.color.g}, ${this.color.b})`;\r\n }\r\n\r\n setStyle() {\r\n   this.colorSet.emit(this.getMyStyle());\r\n }\r\n\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">app.component.html<\/span><\/strong><\/h3>\n<pre>&lt;table border=\"1\"&gt;\r\n  &lt;tr&gt;\r\n    &lt;td [attr.colspan]=\"colors.length\"&gt;\r\n      &lt;div style=\"width: 100%; height: 100px;\" [style.backgroundColor]=\"myColor\"&gt;&lt;\/div&gt;\r\n    &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr style=\"vertical-align: top;\"&gt;\r\n    &lt;td *ngFor=\"let color of colors\"&gt;\r\n      &lt;app-color-panel [color]=\"color\" (colorSet)=\"myColor=$event\"&gt;&lt;\/app-color-panel&gt;\r\n    &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<h3><strong style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;\"><span style=\"color: #0000ff;\">app.component.ts<\/span><\/strong><\/h3>\n<pre>export class AppComponent {\r\n  colors = [\r\n    {r: 0, g: 0, b: 0},\r\n    {r: 255, g: 0, b: 0},\r\n    {r: 255, g: 255, b: 0},\r\n    {r: 255, g: 0, b: 255},\r\n    {r: 0, g: 255, b: 0},\r\n    {r: 0, g: 255, b: 255},\r\n    {r: 0, g: 0, b: 255},\r\n  ];\r\n  myColor = `rgb(255, 0, 0)`;\r\n\r\n}\r\n\r\n<\/pre>\n<h3>\u53c3\u8003\u8cc7\u6599\uff1a<\/h3>\n<ul>\n<li>Touch. Draw. Share\uff1aA Web Whiteboard<\/li>\n<li><a href=\"http:\/\/www.telerik.com\/kendo-angular-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kendo UI for Angular<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/t301000\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/t301000\/toh-ntpc-coder2017<\/a><\/li>\n<\/ul>\n<hr \/>\n<p><a name=\"0607\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u30106\u67087\u65e5\u3011\uff1a<\/span><\/h2>\n<p><a href=\"#resource\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/a><a href=\"#0503\">\u30105\u67083\u65e5\u3011<\/a><a href=\"#0510\">\u30105\u670810\u65e5\u3011<\/a><a href=\"#0517\">\u30105\u670817\u65e5\u3011<\/a><a href=\"#0524\">\u30105\u670824\u65e5\u3011<\/a><a href=\"#0531\">\u30105\u670831\u65e5\u3011<\/a><span style=\"color: #ff0000;\"><strong>\u30106\u67087\u65e5\u3011<\/strong><\/span><a href=\"#0614\">\u30106\u670814\u65e5\u3011<\/a><a href=\"#0621\">\u30106\u670821\u65e5\u3011<\/a><\/p>\n<hr \/>\n<h3>\u4e0a\u8ab2\u8b1b\u7fa9\u3001\u7bc4\u4f8b\u3001\u9304\u5f71\u6a94\uff1a<\/h3>\n<ul>\n<li><a href=\"http:\/\/bit.ly\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">\u7dda\u4e0a\u6559\u5b78\u6587\u4ef6\u3001\u9304\u5f71\u6a94<\/a><\/li>\n<li>\u7dda\u4e0a Demo \u7a0b\u5f0f\u78bc<br \/>\n<a href=\"https:\/\/github.com\/t301000\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/t301000\/toh-ntpc-coder2017<\/a><\/li>\n<li>\u7dda\u4e0a Demo \u7ad9<br \/>\n<a class=\"\" dir=\"ltr\" href=\"https:\/\/l.facebook.com\/l.php?u=https%3A%2F%2Ft301000.github.io%2Ftoh-ntpc-coder2017&amp;h=ATPIn4sJPlQdk04LnCSg0NHA-9khBtU-4O2OVdfyVPzf_UO2oaAnSfKtqQ2edS-S7Uhs6cp581TYSjk91LkXl4JbKOiu0H4_0h2jAqpUUDydum9NsGrQmK22CxBkY0o-iyr90J6HWQH77cmpsdert303Dor1\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/t301000.github.io\/toh-ntpc-coder2017<\/a><\/li>\n<li>20170531 \u4f5c\u696d\u5be6\u505a\u53c3\u8003\u7a0b\u5f0f\u78bc<br \/>\n<a class=\"\" dir=\"ltr\" href=\"https:\/\/gist.github.com\/t301000\/fa692be5208abdf6b793e94901c20b57\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/gist.github.com\/t301000\/fa692be5208abdf6b793e94901c20b57<\/a><\/li>\n<li><a href=\"https:\/\/paper.dropbox.com\/doc\/Workshop-Topic-Outline-Basic-12-weeks-bY2H6slN0FxzjLwT6uy0S\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u7dda\u4e0a\u8b80\u66f8\u6703 &#8211; Workshop Topic Outline (Basic) &#8211; 12 weeks<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/NgModule-\u6982\u8ff0\u3001Service-\u670d\u52d9\u8207-DI-\u4f9d\u8cf4\u6ce8\u5165.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">NgModule \u6982\u8ff0\u3001Service \u670d\u52d9\u8207 DI \u4f9d\u8cf4\u6ce8\u5165<\/a><\/li>\n<\/ul>\n<hr \/>\n<p><a name=\"0614\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u30106\u670814\u65e5\u3011\uff1a<\/span><\/h2>\n<p><a href=\"#resource\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/a><a href=\"#0503\">\u30105\u67083\u65e5\u3011<\/a><a href=\"#0510\">\u30105\u670810\u65e5\u3011<\/a><a href=\"#0517\">\u30105\u670817\u65e5\u3011<\/a><a href=\"#0524\">\u30105\u670824\u65e5\u3011<\/a><a href=\"#0531\">\u30105\u670831\u65e5\u3011<\/a><a href=\"#0607\">\u30106\u67087\u65e5\u3011<\/a><strong><span style=\"color: #ff0000;\">\u30106\u670814\u65e5\u3011<a href=\"#0621\">\u30106\u670821\u65e5\u3011<\/a><\/span><\/strong><\/p>\n<hr \/>\n<h3>\u4e0a\u8ab2\u8b1b\u7fa9\u3001\u7bc4\u4f8b\u3001\u9304\u5f71\u6a94\uff1a<\/h3>\n<ul>\n<li>\u6559\u7a0b\uff1a\u82f1\u96c4\u6307\u5357<\/li>\n<li><a href=\"http:\/\/bit.ly\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">\u7dda\u4e0a\u6559\u5b78\u6587\u4ef6\u3001\u9304\u5f71\u6a94<\/a><\/li>\n<li>\u7dda\u4e0a Demo \u7a0b\u5f0f\u78bc<br \/>\n<a href=\"https:\/\/github.com\/t301000\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/t301000\/toh-ntpc-coder2017<\/a><\/li>\n<li>\u7dda\u4e0a Demo \u7ad9<br \/>\n<a class=\"\" dir=\"ltr\" href=\"https:\/\/l.facebook.com\/l.php?u=https%3A%2F%2Ft301000.github.io%2Ftoh-ntpc-coder2017&amp;h=ATPIn4sJPlQdk04LnCSg0NHA-9khBtU-4O2OVdfyVPzf_UO2oaAnSfKtqQ2edS-S7Uhs6cp581TYSjk91LkXl4JbKOiu0H4_0h2jAqpUUDydum9NsGrQmK22CxBkY0o-iyr90J6HWQH77cmpsdert303Dor1\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/t301000.github.io\/toh-ntpc-coder2017<\/a><\/li>\n<\/ul>\n<h3>\u5be6\u4f5c\uff1a<\/h3>\n<h3><span style=\"color: #0000ff;\"><strong>index.html<\/strong><\/span><\/h3>\n<pre>&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;title&gt;Tour Of Heroes&lt;\/title&gt;\r\n  <span style=\"color: #ff0000;\"><strong>&lt;base href=\"\/\"&gt;<\/strong><\/span>\r\n\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n  &lt;link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.7\/css\/bootstrap.min.css\"&gt;\r\n  &lt;!--[if lt IE 9]&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html5shiv\/3.7.3\/html5shiv.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/respond.js\/1.4.2\/respond.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;![endif]--&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  <strong><span style=\"color: #ff0000;\">&lt;app-root&gt;Loading...&lt;\/app-root&gt;<\/span><\/strong>\r\n\r\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.7\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h3><span style=\"color: #0000ff;\"><strong>app.component.html<\/strong><\/span><\/h3>\n<pre><strong><span style=\"color: #ff0000;\">&lt;app-navbar&gt;&lt;\/app-navbar&gt;<\/span><\/strong>\r\n\r\n&lt;div class=\"container\"&gt;\r\n  <strong><span style=\"color: #ff0000;\">&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/span><\/strong>\r\n&lt;\/div&gt;<\/pre>\n<h3><span style=\"color: #0000ff;\"><strong>app-routing.module.ts<\/strong><\/span><\/h3>\n<pre><strong><span style=\"color: #ff0000;\">import { NgModule } from '@angular\/core';<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">import { Routes, RouterModule } from '@angular\/router';<\/span><\/strong>\r\n\r\nimport { HeroesComponent } from '.\/heroes\/heroes.component';\r\nimport { DashboardComponent } from '.\/dashboard\/dashboard.component';\r\nimport { PageNotFoundComponent } from '.\/page-not-found\/page-not-found.component';\r\nimport { HeroDetailComponent } from '.\/hero-detail\/hero-detail.component';\r\n\r\n<span style=\"color: #ff00ff;\"><strong>const routes: Routes<\/strong><\/span> = [\r\n  {\r\n    <strong><span style=\"color: #008000;\">path: '',\r\n    redirectTo: 'heroes',\r\n    pathMatch: 'full'<\/span><\/strong>\r\n  },\r\n  { path: 'heroes', component: HeroesComponent },\r\n  { path: 'heroes\/:id', component: HeroDetailComponent },\r\n  { path: 'dashboard', component: DashboardComponent },\r\n  { path: '**', component: PageNotFoundComponent }\r\n];\r\n\r\n@NgModule({\r\n  imports: <strong><span style=\"color: #008000;\">[RouterModule.forRoot(routes)]<\/span><\/strong>,\r\n  exports: <strong><span style=\"color: #008000;\">[RouterModule]<\/span><\/strong>\r\n})\r\nexport class AppRoutingModule { }<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">hero.service.ts<\/span><\/strong><\/h3>\n<pre>import { <strong><span style=\"color: #ff00ff;\">Injectable<\/span><\/strong> } from '@angular\/core';\r\nimport { <strong><span style=\"color: #008000;\">Headers, Http, RequestOptions, Response<\/span><\/strong> } from '@angular\/http';\r\n\r\nimport { Hero } from '.\/hero';\r\nimport { <span style=\"color: #ff00ff;\"><strong>Observable<\/strong><\/span> } from <span style=\"color: #008000;\">'<strong><span style=\"color: #ff00ff;\">rxjs\/Observable<\/span><\/strong>'<\/span>;\r\nimport 'rxjs\/add\/<strong><span style=\"color: #ff00ff;\">operator\/map<\/span><\/strong>';\r\nimport 'rxjs\/add\/<strong><span style=\"color: #ff00ff;\">operator\/catch<\/span><\/strong>';\r\nimport 'rxjs\/add\/<strong><span style=\"color: #ff00ff;\">operator\/do<\/span><\/strong>';\r\nimport 'rxjs\/add\/<strong><span style=\"color: #ff00ff;\">observable\/throw<\/span><\/strong>';\r\nimport 'rxjs\/add\/<strong><span style=\"color: #ff00ff;\">observable\/of<\/span><\/strong>';\r\n\r\n<strong><span style=\"color: #ff0000;\">@Injectable()<\/span><\/strong>\r\nexport class HeroService {\r\n  <strong><span style=\"color: #ff0000;\">baseUrl = '\/api\/heroes';<\/span><\/strong>\r\n\r\n  constructor(<strong><span style=\"color: #ff0000;\">private http: Http<\/span><\/strong>) { }\r\n\r\n  <strong><span style=\"color: #008000;\">getHeroes(): Observable&lt;Hero[]&gt;<\/span><\/strong> {\r\n    return this.http.get(this.baseUrl)\r\n              .map((res: Response) =&gt; res.json().data || {})\r\n              .catch(this.handleError);\r\n  }\r\n\r\n  <strong><span style=\"color: #008000;\">addHero(name: string): Observable&lt;Hero&gt;<\/span><\/strong> {\r\n    const headers = new Headers({\r\n      'Content-Type': 'application\/json'\r\n    });\r\n    const options = new RequestOptions({headers});\r\n    return this.http.post(this.baseUrl, {name}, options)\r\n              .map((res: Response) =&gt; res.json().data)\r\n              .catch(this.handleError);\r\n  }\r\n\r\n  <span style=\"color: #008000;\"><strong>deleteHero(id: number): Observable&lt;any&gt;<\/strong><\/span> {\r\n    return this.http.delete(`${this.baseUrl}\/${id}`)\r\n              .map((res: Response) =&gt; null)\r\n              .catch(this.handleError);\r\n  }\r\n\r\n  <strong><span style=\"color: #008000;\">getHero(id: number): Observable&lt;Hero&gt;<\/span><\/strong> {\r\n    return this.http.get(`${this.baseUrl}\/${id}`)\r\n              .map((res: Response) =&gt; res.json().data || {})\r\n              .catch(this.handleError);\r\n  }\r\n\r\n  <strong><span style=\"color: #008000;\">updateHero(id: number, name: string): Observable&lt;any&gt;<\/span><\/strong> {\r\n    const headers = new Headers({\r\n      'Content-Type': 'application\/json'\r\n    });\r\n    const options = new RequestOptions({headers});\r\n    return this.http.put(`${this.baseUrl}\/${id}`, {id, name}, options)\r\n              .map(() =&gt; null)\r\n              .catch(this.handleError);\r\n  }\r\n\r\n <strong><span style=\"color: #008000;\"> searchHero(keyword: string): Observable&lt;Hero[]&gt;<\/span><\/strong> {\r\n    return this.http.get(`${this.baseUrl}\/?name=${keyword}`).do(() =&gt; console.log(keyword))\r\n               .map((res: Response) =&gt; res.json().data as Hero[] || [])\r\n               .catch(this.handleError);\r\n  }\r\n\r\n  <strong><span style=\"color: #008000;\">private handleError(error: Response | any): Observable&lt;any&gt;<\/span><\/strong> {\r\n    \/\/ console.log(error);\r\n    let errMsg: string;\r\n    if (error instanceof Response) {\r\n      const body = error.json() || '';\r\n      const err = body.error || JSON.stringify(body);\r\n      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;\r\n    } else {\r\n      errMsg = error.message ? error.message : error.toString();\r\n    }\r\n    console.error(errMsg);\r\n    return Observable.throw(errMsg);\r\n  }\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">hero.ts<\/span><\/strong><\/h3>\n<pre>export class Hero {\r\n  id: number;\r\n  name: string;\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">heroes.data.ts<\/span><\/strong><\/h3>\n<pre><strong><span style=\"color: #ff0000;\">import { InMemoryDbService } from 'angular-in-memory-web-api';<\/span><\/strong>\r\nimport { Hero } from '.\/hero';\r\n\r\nexport class HeroDB implements <strong><span style=\"color: #ff0000;\">InMemoryDbService<\/span><\/strong> {\r\n  createDb(): {[key: string]: Hero[]} {\r\n    const heroes: Hero[] = [\r\n      {id: 11, name: 'Mr. Nice'},\r\n      {id: 12, name: 'Narco'},\r\n      {id: 13, name: 'Bombasto'},\r\n      {id: 14, name: 'Celeritas'},\r\n      {id: 15, name: 'Magneta'},\r\n      {id: 16, name: 'RubberMan'},\r\n      {id: 17, name: 'Dynama'},\r\n      {id: 18, name: 'Dr IQ'},\r\n      {id: 19, name: 'Magma'},\r\n      {id: 20, name: 'Tornado'}\r\n    ];\r\n    return {heroes};\r\n  }\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">heroes\\<\/span><\/strong><strong><span style=\"color: #0000ff;\">heroes.component.html<\/span><\/strong><\/h3>\n<pre>&lt;div class=\"page-header\"&gt;\r\n  &lt;h1&gt;My Heroes&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n\r\n<strong><span style=\"color: #ff0000;\">&lt;app-new-hero (createHero)=\"addHero($event)\"&gt;&lt;\/app-new-hero&gt;<\/span><\/strong>\r\n&lt;hr \/&gt;\r\n\r\n&lt;!-- \u6e05\u55ae --&gt;\r\n&lt;div class=\"list-group\"&gt;\r\n  &lt;a class=\"list-group-item my-item\"\r\n      <strong><span style=\"color: #ff0000;\">*ngFor=\"let hero of heroes\"<\/span><\/strong>\r\n      <strong><span style=\"color: #ff0000;\">(click)=\"selectedHero = hero\"<\/span><\/strong>\r\n      <strong><span style=\"color: #ff0000;\">[class.active]=\"selectedHero === hero\"<\/span><\/strong>&gt;\r\n    &lt;span&gt;<strong><span style=\"color: #ff0000;\">{{ hero.id }}<\/span><\/strong>&lt;\/span&gt;<strong><span style=\"color: #ff0000;\">{{ hero.name }}<\/span><\/strong>\r\n    &lt;span class=\"badge\" <strong><span style=\"color: #ff0000;\">(click)=\"deleteHero(hero); $event.stopPropagation()\"<\/span><\/strong>&gt; X &lt;\/span&gt;\r\n  &lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;!-- \u6e05\u55ae\u7d50\u675f --&gt;\r\n&lt;div <strong><span style=\"color: #ff0000;\">*ngIf=\"errorMessage\"<\/span><\/strong>&gt;<strong><span style=\"color: #ff0000;\">{{ errorMessage }}<\/span><\/strong>&lt;\/div&gt;\r\n<strong><span style=\"color: #ff0000;\">&lt;app-mini-detail [hero]=\"selectedHero\" *ngIf=\"selectedHero\"&gt;&lt;\/app-mini-detail&gt;<\/span><\/strong><\/pre>\n<h3><strong><span style=\"color: #0000ff;\">heroes\\heroes.component.ts<\/span><\/strong><\/h3>\n<pre>import { Component, OnInit } from '@angular\/core';\r\n\r\n<strong><span style=\"color: #ff0000;\">import { Hero } from '..\/hero';<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">import { HeroService } from '..\/hero.service';<\/span><\/strong>\r\n\r\n@Component({\r\n  selector: 'app-heroes',\r\n  templateUrl: '.\/heroes.component.html',\r\n  styleUrls: ['.\/heroes.component.css']\r\n})\r\nexport class HeroesComponent implements OnInit {\r\n<strong><span style=\"color: #ff0000;\">  heroes: Hero[] = [];<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  selectedHero: Hero = null;<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  errorMessage: string = null;<\/span><\/strong>\r\n\r\n  constructor(<strong><span style=\"color: #ff0000;\">private heroService: HeroService<\/span><\/strong>) { }\r\n\r\n<strong><span style=\"color: #ff0000;\"><span style=\"color: #008000;\">  ngOnInit()<\/span> {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    this.heroService.getHeroes()<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">        .subscribe(<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">          heroes =&gt; this.heroes = heroes,<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">          this.showError.bind(this)<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">        );<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  }<\/span><\/strong>\r\n\r\n<strong><span style=\"color: #ff0000;\"><span style=\"color: #008000;\">  addHero(name: string)<\/span> {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    this.heroService.addHero(name)<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">        .subscribe(<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">          hero =&gt; this.heroes.push(hero),<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">          this.showError.bind(this)<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">        );<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  }<\/span><\/strong>\r\n\r\n<span style=\"color: #ff0000;\"><span style=\"color: #008000;\">  deleteHero(hero: Hero)<\/span><\/span><strong><span style=\"color: #ff0000;\"> {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    this.heroService.deleteHero(hero.id)<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">        .subscribe(<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">          () =&gt; {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">            this.heroes = this.heroes.filter(item =&gt; item !== hero);<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">            this.resetSelectedHero(hero);<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">          },<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">          this.showError.bind(this)<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">        );<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  }<\/span><\/strong>\r\n\r\n<span style=\"color: #ff0000;\"><span style=\"color: #008000;\">  private resetSelectedHero(hero: Hero)<\/span><\/span><strong><span style=\"color: #ff0000;\"> {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    if (this.selectedHero &amp;&amp; this.selectedHero === hero) {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">      this.selectedHero = null;<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    }<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  }<\/span><\/strong>\r\n\r\n<span style=\"color: #ff0000;\"><span style=\"color: #008000;\">  private showError(error: string)<\/span><\/span><strong><span style=\"color: #ff0000;\"> {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    this.errorMessage = error;<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  }<\/span><\/strong>\r\n\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">new-hero\\new-hero.component.html<\/span><\/strong><\/h3>\n<pre>&lt;div class=\"form-inline\"&gt;\r\n  &lt;div class=\"form-group\"&gt;\r\n    &lt;label for=\"name\"&gt;Hero Name: &lt;\/label&gt;\r\n    &lt;input type=\"text\" class=\"form-control\" id=\"name\"\r\n           <strong><span style=\"color: #ff0000;\">[placeholder]=\"hintWord\" [(ngModel)]=\"name\"<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">           (keydown.enter)=\"addHero()\"<\/span><\/strong>&gt;\r\n  &lt;\/div&gt;\r\n  &lt;button class=\"btn btn-primary\"\r\n          <strong><span style=\"color: #ff0000;\">(click)=\"addHero()\" [disabled]=\"!name.trim()\"<\/span><\/strong>&gt;\u65b0\u589e&lt;\/button&gt;\r\n&lt;\/div&gt;<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">new-hero\\new-hero.component.ts<\/span><\/strong><\/h3>\n<pre>import { Component, <strong><span style=\"color: #ff0000;\">EventEmitter<\/span><\/strong>, OnInit, <strong><span style=\"color: #ff0000;\">Output<\/span><\/strong> } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-new-hero',\r\n  templateUrl: '.\/new-hero.component.html',\r\n  styleUrls: ['.\/new-hero.component.css']\r\n})\r\nexport class NewHeroComponent implements OnInit {\r\n<strong><span style=\"color: #ff0000;\">  name = '';<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  hintWord = 'New Hero\\'s name';<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  @Output() createHero = new EventEmitter&lt;string&gt;();<\/span><\/strong>\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n<strong><span style=\"color: #ff0000;\">  addHero() {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    const name = this.name.trim();<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    if (name) {<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">      this.createHero.emit(name);<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">      this.name = '';<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">    }<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">  }<\/span><\/strong>\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">mini-detail\\mini-detail.component.html<\/span><\/strong><\/h3>\n<pre>&lt;h2&gt;<strong><span style=\"color: #ff0000;\">{{ hero.name }}<\/span><\/strong> is my hero.&lt;\/h2&gt;\r\n&lt;div class=\"btn btn-info\" <strong><span style=\"color: #ff0000;\">(click)=\"goDetail()\"<\/span><\/strong>&gt;View Details&lt;\/div&gt;<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">mini-detail.component.ts<\/span><\/strong><\/h3>\n<pre>import { Component, <strong><span style=\"color: #ff0000;\">Input,<\/span><\/strong> OnInit } from '@angular\/core';\r\n<strong><span style=\"color: #ff0000;\">import { Hero } from '..\/hero';<\/span><\/strong>\r\n<strong><span style=\"color: #ff0000;\">import { Router } from '@angular\/router';<\/span><\/strong>\r\n\r\n@Component({\r\n  selector: 'app-mini-detail',\r\n  templateUrl: '.\/mini-detail.component.html',\r\n  styleUrls: ['.\/mini-detail.component.css']\r\n})\r\nexport class MiniDetailComponent implements OnInit {\r\n  <strong><span style=\"color: #ff0000;\">@Input() hero: Hero;<\/span><\/strong>\r\n\r\n  constructor(<strong><span style=\"color: #ff0000;\">private router: Router<\/span><\/strong>) { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  goDetail() {\r\n    this.router.navigate(['\/heroes', this.hero.id]);\r\n  }\r\n\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">navbar\\navbar.component.html<\/span><\/strong><\/h3>\n<pre>&lt;nav class=\"navbar navbar-inverse\" role=\"navigation\"&gt;\r\n  &lt;div class=\"container\"&gt;\r\n    &lt;!-- Brand and toggle get grouped for better mobile display --&gt;\r\n    &lt;div class=\"navbar-header\"&gt;\r\n      &lt;button type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\" data-target=\".navbar-ex1-collapse\"&gt;\r\n        &lt;span class=\"sr-only\"&gt;Toggle navigation&lt;\/span&gt;\r\n        &lt;span class=\"icon-bar\"&gt;&lt;\/span&gt;\r\n        &lt;span class=\"icon-bar\"&gt;&lt;\/span&gt;\r\n        &lt;span class=\"icon-bar\"&gt;&lt;\/span&gt;\r\n      &lt;\/button&gt;\r\n      &lt;span class=\"navbar-brand glyphicon glyphicon-text-background\"&gt;&lt;\/span&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;\r\n    &lt;div class=\"collapse navbar-collapse navbar-ex1-collapse\"&gt;\r\n      &lt;ul class=\"nav navbar-nav\"&gt;\r\n        &lt;li <strong><span style=\"color: #ff0000;\">routerLinkActive=\"active\"<span style=\"color: #008000;\"> [routerLinkActiveOptions]=\"{exact: true}\"<\/span><\/span><\/strong>&gt;\r\n        &lt;!-- <strong><span style=\"color: #0000ff;\">\u8def\u7531\u9023\u7d50 (\u4e0d\u52a0\u4e0a\u4e2d\u62ec\u865f\u7684\u5c6c\u6027\u7e6b\u7d50\uff0c\u53ea\u80fd\u7e6b\u7d50\u56fa\u5b9a\u7684\u5b57\u4e32\u8cc7\u6599)<\/span><\/strong> --&gt;\r\n          <strong><span style=\"color: #ff0000;\">&lt;a [routerLink]=\"['\/']\"&gt;<\/span><\/strong>Home<strong><span style=\"color: #ff0000;\">&lt;\/a&gt;<\/span><\/strong>\r\n        &lt;\/li&gt;\r\n        &lt;li <strong><span style=\"color: #ff0000;\">routerLinkActive=\"active\"<\/span><\/strong>&gt;\r\n          <strong><span style=\"color: #ff0000;\">&lt;a [routerLink]=\"['\/dashboard']\"&gt;<\/span><\/strong>Dashboard<strong><span style=\"color: #ff0000;\">&lt;\/a&gt;<\/span><\/strong>\r\n        &lt;\/li&gt;\r\n        &lt;li <strong><span style=\"color: #ff0000;\">routerLinkActive=\"active\"<\/span><\/strong>&gt;\r\n          <strong><span style=\"color: #ff0000;\">&lt;a [routerLink]=\"['\/heroes']\"&gt;<\/span><\/strong>Heroes<strong><span style=\"color: #ff0000;\">&lt;\/a&gt;<\/span><\/strong>\r\n        &lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n    &lt;\/div&gt;&lt;!-- \/.navbar-collapse --&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/nav&gt;<\/pre>\n<hr \/>\n<p><a name=\"0621\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u30106\u670821\u65e5\u3011\uff1a<\/span><\/h2>\n<p><a href=\"#resource\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/a><a href=\"#0503\">\u30105\u67083\u65e5\u3011<\/a><a href=\"#0510\">\u30105\u670810\u65e5\u3011<\/a><a href=\"#0517\">\u30105\u670817\u65e5\u3011<\/a><a href=\"#0524\">\u30105\u670824\u65e5\u3011<\/a><a href=\"#0531\">\u30105\u670831\u65e5\u3011<\/a><a href=\"#0607\">\u30106\u67087\u65e5\u3011<\/a><a href=\"#0614\">\u30106\u670814\u65e5\u3011<\/a><span style=\"color: #ff0000;\"><strong>\u30106\u670821\u65e5\u3011<\/strong><\/span><\/p>\n<hr \/>\n<h3>\u4e0a\u8ab2\u8b1b\u7fa9\u3001\u7bc4\u4f8b\u3001\u9304\u5f71\u6a94\uff1a<\/h3>\n<ul>\n<li>Angular\u5b98\u65b9\u4e2d\u6587\u7248<\/li>\n<li>Angular\u5b98\u65b9\u4e2d\u6587\u6559\u7a0b\uff1a\u82f1\u96c4\u6307\u5357<\/li>\n<li>Angular 2 \u958b\u767c\u5be6\u6230\uff1a\u9032\u968e\u958b\u767c\u7bc7 &#8211; RxJS \u65b0\u624b\u5165\u9580<\/li>\n<li><a href=\"http:\/\/ithelp.ithome.com.tw\/users\/20103367\/ironman\/1199\" target=\"_blank\" rel=\"noopener noreferrer\">30 \u5929\u7cbe\u901a RxJS \u7cfb\u5217\u6587\u7ae0 &#8211; 2017 iT \u90a6\u5e6b\u5fd9\u9435\u4eba\u8cfd<\/a><\/li>\n<li><a href=\"http:\/\/bit.ly\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">\u7dda\u4e0a\u6559\u5b78\u6587\u4ef6\u3001\u9304\u5f71\u6a94<\/a><\/li>\n<li>\u7dda\u4e0a Demo \u7a0b\u5f0f\u78bc<br \/>\n<a href=\"https:\/\/github.com\/t301000\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/t301000\/toh-ntpc-coder2017<\/a><\/li>\n<li>\u7dda\u4e0a Demo \u7ad9<br \/>\n<a class=\"\" dir=\"ltr\" href=\"https:\/\/l.facebook.com\/l.php?u=https%3A%2F%2Ft301000.github.io%2Ftoh-ntpc-coder2017&amp;h=ATPIn4sJPlQdk04LnCSg0NHA-9khBtU-4O2OVdfyVPzf_UO2oaAnSfKtqQ2edS-S7Uhs6cp581TYSjk91LkXl4JbKOiu0H4_0h2jAqpUUDydum9NsGrQmK22CxBkY0o-iyr90J6HWQH77cmpsdert303Dor1\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/t301000.github.io\/toh-ntpc-coder2017<\/a><\/li>\n<\/ul>\n<h3>\u8def\u7531\u8aaa\u660e\uff1a<\/h3>\n<pre>const routes: Routes = [\r\n  \/\/{ path: '', redirectTo: 'heroes', pathMatch: 'full'}, <strong><span style=\"color: #ff0000;\">\/\/pathMatch \u9810\u8a2d\u503c\u70ba 'prefix'<\/span><\/strong>\r\n  {path: 'heroes', component: HeroesComponent},\r\n  {path: 'heroes\/hello', component: HeroHelloComponent}, <strong><span style=\"color: #ff0000;\">\/\/\u4e00\u5b9a\u8981\u64fa\u5728 'heroes\/:id' \u4e4b\u524d\uff0c\u5426\u5247\u6703\u6c38\u9060\u6bd4\u5c0d\u4e0d\u5230\uff0c\u56e0\u70ba\u7cfb\u7d71\u6703\u8aa4\u8a8d:id='hello'<\/span><\/strong>\r\n  {path: 'heroes\/:id', component: HeroDetailComponent},\r\n  {path: 'dashboard', component: DashboardComponent},\r\n  {path: '**', component: PageNotFoundComponent}\r\n];<\/pre>\n<h3>\u5be6\u4f5c\uff1a<\/h3>\n<h4>\u5b89\u88dd\u00a0angular-in-memory-web-api<\/h4>\n<ul>\n<li>npm i angular-in-memory-web-api &#8211;save-dev<\/li>\n<li>angular2\u7cfb\u5217\u6559\u7a0b\uff08\u516b\uff09In-memory web api\u3001HTTP\u670d\u52a1\u3001\u4f9d\u8d56\u6ce8\u5165\u3001Observable<\/li>\n<\/ul>\n<h3><strong><span style=\"color: #0000ff;\">hero.service.ts<\/span><\/strong><\/h3>\n<pre>import { <strong><span style=\"color: #ff00ff;\">Injectable<\/span><\/strong> } from '<strong><span style=\"color: #ff00ff;\">@angular\/core<\/span><\/strong>';\r\nimport { <strong><span style=\"color: #ff00ff;\">Headers, Http, RequestOptions, Response<\/span><\/strong> } from '<strong><span style=\"color: #ff00ff;\">@angular\/http<\/span><\/strong>';\r\n\r\nimport { Hero } from '.\/hero';\r\nimport { <strong><span style=\"color: #ff00ff;\">Observable<\/span><\/strong> } from '<strong><span style=\"color: #ff00ff;\">rxjs\/Observable<\/span><\/strong>';\r\nimport '<strong><span style=\"color: #ff00ff;\">rxjs\/add\/operator\/map<\/span><\/strong>';\r\nimport '<strong><span style=\"color: #ff00ff;\">rxjs\/add\/operator\/catch<\/span><\/strong>';\r\nimport '<strong><span style=\"color: #ff00ff;\">rxjs\/add\/operator\/do<\/span><\/strong>';\r\nimport 'rxjs\/add\/observable\/throw';\r\nimport 'rxjs\/add\/observable\/of';\r\n\r\n<strong><span style=\"color: #ff00ff;\">@Injectable()<\/span><\/strong>\r\nexport class HeroService {\r\n  <strong><span style=\"color: #0000ff;\">baseUrl = '\/api\/heroes';<\/span><\/strong>\r\n\r\n  constructor(<strong><span style=\"color: #ff00ff;\">private http: Http<\/span><\/strong>) { }\r\n\r\n  <strong><span style=\"color: #008000;\">getHeroes(): Observable&lt;Hero[]&gt;<\/span> {\r\n    return <span style=\"color: #ff00ff;\">this.http.get(this.baseUrl)<\/span>\r\n              .map((res: Response) =&gt; res.json().data || {})\r\n              .catch(this.handleError);\r\n  }\r\n\r\n<span style=\"color: #008000;\">  addHero(name: string): Observable&lt;Hero&gt;<\/span><\/strong> {\r\n    const headers = new Headers({\r\n      'Content-Type': 'application\/json'\r\n    });\r\n    const options = new RequestOptions({headers});\r\n    return <strong><span style=\"color: #ff00ff;\">this.http.post(this.baseUrl, {name}, options)<\/span><\/strong>\r\n              .map((res: Response) =&gt; res.json().data)\r\n              .catch(this.handleError);\r\n  }\r\n\r\n<strong><span style=\"color: #008000;\">  deleteHero(id: number): Observable&lt;any&gt;<\/span><\/strong> {\r\n    return <strong><span style=\"color: #ff00ff;\">this.http.delete(`${this.baseUrl}\/${id}`)  <span style=\"color: #ff0000;\">\/\/ this.baseUrl + '\/' + id<\/span><\/span><\/strong>\r\n              .map((res: Response) =&gt; null)\r\n              .catch(this.handleError);\r\n  }\r\n\r\n<strong><span style=\"color: #008000;\">  getHero(id: number): Observable&lt;Hero&gt;<\/span><\/strong> {\r\n    return <strong><span style=\"color: #ff00ff;\">this.http.get(`${this.baseUrl}\/${id}`)<\/span><\/strong>\r\n              .map((res: Response) =&gt; res.json().data || {})\r\n              .catch(this.handleError);\r\n  }\r\n\r\n<strong><span style=\"color: #008000;\">  updateHero(id: number, name: string): Observable&lt;any&gt;<\/span><\/strong> {\r\n    const headers = new Headers({\r\n      'Content-Type': 'application\/json'\r\n    });\r\n    const options = new RequestOptions({headers});\r\n    return <strong><span style=\"color: #ff00ff;\">this.http.put(`${this.baseUrl}\/${id}`, {id, name}, options)<\/span><\/strong>\r\n              .map(() =&gt; null)\r\n              .catch(this.handleError);\r\n  }\r\n\r\n<strong><span style=\"color: #008000;\">  searchHero(keyword: string): Observable&lt;Hero[]&gt;<\/span><\/strong> {\r\n    return <strong><span style=\"color: #ff00ff;\">this.http.get(`${this.baseUrl}\/?name=${keyword}`).do(() =&gt; console.log(keyword))<\/span><\/strong>\r\n               .map((res: Response) =&gt; res.json().data as Hero[] || [])\r\n               .catch(this.handleError);\r\n  }\r\n\r\n<strong><span style=\"color: #008000;\">  private handleError(error: Response | any): Observable&lt;any&gt;<\/span><\/strong> {\r\n    \/\/ console.log(error);\r\n    let errMsg: string;\r\n    if (error instanceof Response) {\r\n      const body = error.json() || '';\r\n      const err = body.error || JSON.stringify(body);\r\n      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;\r\n    } else {\r\n      errMsg = error.message ? error.message : error.toString();\r\n    }\r\n    console.error(errMsg);\r\n    return Observable.throw(errMsg);\r\n  }\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">heroes.data.ts<\/span><\/strong><\/h3>\n<pre>import { <strong><span style=\"color: #ff00ff;\">InMemoryDbService<\/span><\/strong> } from '<strong><span style=\"color: #ff00ff;\">angular-in-memory-web-api<\/span><\/strong>';\r\nimport { Hero } from '.\/hero';\r\n\r\nexport class HeroDB <strong><span style=\"color: #ff00ff;\">implements InMemoryDbService <\/span><\/strong>{<\/pre>\n<pre><strong><span style=\"color: #ff00ff;\">  const HEROES: Hero[]<\/span><\/strong> = [\r\n      {id: 11, name: 'Mr. Nice'},\r\n      {id: 12, name: 'Narco'},\r\n      {id: 13, name: 'Bombasto'},\r\n      {id: 14, name: 'Celeritas'},\r\n      {id: 15, name: 'Magneta'},\r\n      {id: 16, name: 'RubberMan'},\r\n      {id: 17, name: 'Dynama'},\r\n      {id: 18, name: 'Dr IQ'},\r\n      {id: 19, name: 'Magma'},\r\n      {id: 20, name: 'Tornado'}\r\n    ];<\/pre>\n<pre> createDb(): {\r\n   return {<strong><span style=\"color: #ff00ff;\">heroes: this.HEROES<\/span><\/strong>};\r\n }\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">heroes\\<\/span><\/strong><strong><span style=\"color: #0000ff;\">heroes.component.html<\/span><\/strong><\/h3>\n<pre>&lt;div class=\"page-header\"&gt;\r\n  &lt;h1&gt;My Heroes&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n\r\n<span style=\"color: #008000;\"><strong>&lt;app-new-hero (createHero)=\"addHero($event)\"&gt;&lt;\/app-new-hero&gt;<\/strong><\/span>\r\n&lt;hr \/&gt;\r\n\r\n&lt;!-- \u6e05\u55ae --&gt;\r\n&lt;div class=\"list-group\"&gt;\r\n  &lt;a class=\"list-group-item my-item\"\r\n      <strong><span style=\"color: #ff0000;\">*ngFor=\"let hero of heroes\"<\/span><\/strong>\r\n      <strong><span style=\"color: #ff0000;\">(click)=\"selectedHero = hero\"<\/span><\/strong>\r\n      <strong><span style=\"color: #ff0000;\">[class.active]=\"selectedHero === hero\"<\/span><\/strong>&gt;\r\n    &lt;span&gt;<span style=\"color: #0000ff;\"><strong>{{ hero.id }}<\/strong><\/span>&lt;\/span&gt;<span style=\"color: #0000ff;\"><strong>{{ hero.name }}<\/strong><\/span>\r\n    &lt;span class=\"badge\" <span style=\"color: #ff00ff;\"><strong>(click)=\"deleteHero(hero); $event.stopPropagation()\"<\/strong><\/span>&gt; X &lt;\/span&gt;\r\n  &lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;!-- \u6e05\u55ae\u7d50\u675f --&gt;\r\n&lt;div *ngIf=\"errorMessage\"&gt;{{ errorMessage }}&lt;\/div&gt;\r\n&lt;app-mini-detail [hero]=\"selectedHero\" *ngIf=\"selectedHero\"&gt;&lt;\/app-mini-detail&gt;<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">heroes\\heroes.component.ts<\/span><\/strong><\/h3>\n<pre>import { Component, OnInit } from '@angular\/core';\r\n\r\nimport { <span style=\"color: #ff00ff;\"><strong>Hero<\/strong><\/span> } from '..\/hero';\r\nimport { <strong><span style=\"color: #ff00ff;\">HeroService<\/span><\/strong> } from '..\/hero.service';\r\n\r\n@Component({\r\n  selector: 'app-heroes',\r\n  templateUrl: '.\/heroes.component.html',\r\n  styleUrls: ['.\/heroes.component.css']\r\n})\r\nexport class HeroesComponent implements OnInit {\r\n  heroes: Hero[] = [];\r\n  selectedHero: Hero = null;\r\n  errorMessage: string = null;\r\n\r\n  constructor(<strong><span style=\"color: #0000ff;\">private heroService: HeroService<\/span><\/strong>) { }\r\n\r\n  ngOnInit() {\r\n    <strong><span style=\"color: #ff00ff;\">this.heroService.getHeroes()<\/span>\r\n<span style=\"color: #0000ff;\">        .subscribe(<\/span><\/strong>\r\n<strong><span style=\"color: #0000ff;\">          heroes =&gt; this.heroes = heroes, <span style=\"color: #ff0000;\">\/\/\u6210\u529f success ==&gt; onNext<\/span><\/span><\/strong>\r\n<strong><span style=\"color: #0000ff;\">          this.showError.bind(this)       <\/span><span style=\"color: #ff0000;\">\/\/\u5931\u6557 error   ==&gt; onError\r\n<\/span>                                          <span style=\"color: #ff0000;\">\/\/\u5df2\u5b8c\u6210 completed ==&gt; onCompleted<\/span><\/strong>\r\n<strong><span style=\"color: #0000ff;\">        );<\/span><\/strong>\r\n  }\r\n\r\n  <strong><span style=\"color: #008000;\">addHero(name: string)<\/span><\/strong> {\r\n    <strong><span style=\"color: #ff00ff;\">this.heroService.addHero(name)<\/span><\/strong>\r\n        .subscribe(\r\n          hero =&gt; this.heroes.push(hero),\r\n          this.showError.bind(this)\r\n        );\r\n  }\r\n\r\n  <strong><span style=\"color: #008000;\">deleteHero(hero: Hero)<\/span><\/strong> {\r\n    <strong><span style=\"color: #ff00ff;\">this.heroService.deleteHero(hero.id)<\/span><\/strong>\r\n        .subscribe(\r\n          () =&gt; {\r\n            this.heroes = this.heroes.filter(item =&gt; item !== hero);\r\n            this.resetSelectedHero(hero);\r\n          },\r\n          this.showError.bind(this)\r\n        );\r\n  }\r\n\r\n  <strong><span style=\"color: #008000;\">private resetSelectedHero(hero: Hero)<\/span><\/strong> {\r\n    if (this.selectedHero &amp;&amp; this.selectedHero === hero) {\r\n      this.selectedHero = null;\r\n    }\r\n  }\r\n\r\n  <strong><span style=\"color: #008000;\">private showError(error: string)<\/span><\/strong> {\r\n    this.errorMessage = error;\r\n  }\r\n\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">app.module.ts<\/span><\/strong><\/h3>\n<pre>import { <strong><span style=\"color: #ff00ff;\">InMemoryWebApiModule<\/span><\/strong> } from '<strong><span style=\"color: #ff00ff;\">angular-in-memory-web-api<\/span><\/strong>';<\/pre>\n<pre>import { <strong><span style=\"color: #ff00ff;\">HeroService<\/span><\/strong> } from '<span style=\"color: #ff00ff;\"><strong>.\/hero.service<\/strong><\/span>';\r\nimport { <strong><span style=\"color: #ff00ff;\">HeroDB<\/span><\/strong> } from '<strong><span style=\"color: #ff00ff;\">.\/heroes.data<\/span><\/strong>';\r\n\r\n<\/pre>\n<pre>@NgModule({\r\n  declarations: [\r\n   ...\r\n  ],\r\n  imports: [\r\n    ...\r\n    HttpModule,\r\n    <strong><span style=\"color: #ff00ff;\">InMemoryWebApiModule.forRoot(HeroDB, {delay: 500})<\/span><\/strong>, \/\/ must after HttpModule, default delay 500ms\r\n    AppRoutingModule\r\n  ],\r\n  providers: [<strong><span style=\"color: #ff00ff;\">HeroService<\/span><\/strong>],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }<\/pre>\n<hr \/>\n<p><a name=\"resource\"><\/a><\/p>\n<h2><span style=\"color: #ff0000;\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011\uff1a<\/span><\/h2>\n<p><strong><span style=\"color: #ff0000;\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011<\/span><\/strong><a href=\"#0503\">\u30105\u67083\u65e5\u3011<\/a><a href=\"#0510\">\u30105\u670810\u65e5\u3011<\/a><a href=\"#0517\">\u30105\u670817\u65e5\u3011<\/a><a href=\"#0524\">\u30105\u670824\u65e5\u3011<\/a><a href=\"#0531\">\u30105\u670831\u65e5\u3011<\/a><a href=\"#0607\">\u30106\u67087\u65e5\u3011<\/a><a href=\"#0614\">\u30106\u670814\u65e5\u3011<\/a><a href=\"#0621\">\u30106\u670821\u65e5\u3011<\/a><\/p>\n<h3>\u4e0a\u8ab2\u8b1b\u7fa9\uff1a<\/h3>\n<ul>\n<li>\u8b1b\u7fa9\u3001\u7bc4\u4f8b\u6a94\u3001\u9304\u5f71\u6a94\uff1a<a href=\"http:\/\/bit.ly\/toh-ntpc-coder2017\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/bit.ly\/toh-ntpc-coder2017<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-\u555f\u52d5\u6d41\u7a0b.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u555f\u52d5\u6d41\u7a0b<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-\u958b\u767c\u74b0\u5883\u5efa\u7f6e-angular-cli.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u958b\u767c\u74b0\u5883\u5efa\u7f6e &amp; angular-cli<\/a>\n<ul>\n<li><a href=\"https:\/\/gist.github.com\/doggy8088\/15e434b43992cf25a78700438743774a\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 4 \u958b\u767c\u74b0\u5883\u8aaa\u660e by \u4fdd\u54e5<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/angular\/angular-cli\" target=\"_blank\" rel=\"noopener noreferrer\">angular-cli GitHub<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Component-\u6982\u8ff0\uff06Decorator.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Component \u6982\u8ff0\uff06Decorator<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/data-binding-\u8cc7\u6599\u7e6b\u7d50.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">data binding \u8cc7\u6599\u7e6b\u7d50<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Attribute\u3001class\u3001style-binding.pdf\">Attribute\u3001class\u3001style binding<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Directive-\u6307\u4ee4\u3001Pipe-\u7ba1\u9053.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Directive \u6307\u4ee4\u3001Pipe \u7ba1\u9053<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/NgIf\u3001NgFor\u3001NgSwitch-\u57fa\u790e.pdf\">NgIf\u3001NgFor\u3001NgSwitch \u57fa\u790e<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/NgModule-\u6982\u8ff0\u3001Service-\u670d\u52d9\u8207-DI-\u4f9d\u8cf4\u6ce8\u5165.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">NgModule \u6982\u8ff0\u3001Service \u670d\u52d9\u8207 DI \u4f9d\u8cf4\u6ce8\u5165<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/\u7236\u5b50-Component-\u4e4b\u901a\u8a0a.pdf\">\u7236\u5b50 Component \u4e4b\u901a\u8a0a<\/a><\/li>\n<\/ul>\n<h4>\u6295\u5f71\u7247\uff1a<a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-2-\u65b0\u624b\u6025\u6551\u7ad9.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u65b0\u624b\u6025\u6551\u7ad9<\/a><\/h4>\n<div class=\"epyt-video-wrapper\"><iframe  style=\"display: block; margin: 0px auto;\"  id=\"_ytid_17229\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\"  data-relstop=\"1\" src=\"https:\/\/www.youtube.com\/embed\/LexXU9A7brY?enablejsapi=1&autoplay=0&cc_load_policy=0&cc_lang_pref=&iv_load_policy=1&loop=0&rel=0&fs=1&playsinline=0&autohide=2&theme=dark&color=red&controls=1&disablekb=0&\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div>\n<hr \/>\n<h4>\u6295\u5f71\u7247\uff1aAngular 2 \u958b\u767c\u5be6\u6230\uff1a\u9032\u968e\u958b\u767c\u7bc7 &#8211; RxJS \u65b0\u624b\u5165\u9580<\/h4>\n<div class=\"epyt-video-wrapper\"><iframe  style=\"display: block; margin: 0px auto;\"  id=\"_ytid_85944\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\"  data-relstop=\"1\" src=\"https:\/\/www.youtube.com\/embed\/SDgX00fHos0?enablejsapi=1&autoplay=0&cc_load_policy=0&cc_lang_pref=&iv_load_policy=1&loop=0&rel=0&fs=1&playsinline=0&autohide=2&theme=dark&color=red&controls=1&disablekb=0&\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div>\n<hr \/>\n<div class=\"epyt-video-wrapper\"><iframe  style=\"display: block; margin: 0px auto;\"  id=\"_ytid_38538\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\"  data-relstop=\"1\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&listType=playlist&list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&autoplay=0&cc_load_policy=0&cc_lang_pref=&iv_load_policy=1&loop=0&rel=0&fs=1&playsinline=0&autohide=2&theme=dark&color=red&controls=1&disablekb=0&\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div>\n<hr \/>\n<h2><span style=\"color: #ff0000;\">\u3010\u7db2\u8def\u8cc7\u6e90\u3011<\/span><\/h2>\n<ul>\n<li>Angular User Group Taiwan<\/li>\n<li><a href=\"https:\/\/gist.github.com\/doggy8088\/15e434b43992cf25a78700438743774a\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 4 \u958b\u767c\u74b0\u5883\u8aaa\u660e by \u4fdd\u54e5<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/angular\/angular-cli\" target=\"_blank\" rel=\"noopener noreferrer\">angular-cli GitHub<\/a><\/li>\n<li><a href=\"https:\/\/www.typescriptlang.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">TypeScript \u5b98\u65b9\u7db2\u7ad9<\/a>\n<ul>\n<li><a href=\"https:\/\/www.typescriptlang.org\/play\">TypeScript \u5b98\u7db2 playground<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/zhongsp.gitbooks.io\/typescript-handbook\/content\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">TypeScript Handbook\uff08\u4e2d\u6587\u7248\uff09<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u5b98\u65b9\u7db2\u7ad9<\/a>\n<ul>\n<li><a href=\"https:\/\/embed.plnkr.co\/?show=preview\" target=\"_blank\" rel=\"noopener noreferrer\">Angular Example &#8211; Tour of Heroes: Part 6<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Angular \u5b98\u65b9\u4e2d\u6587\u7248<\/li>\n<li><a href=\"https:\/\/angularjs.blogspot.tw\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular \u90e8\u843d\u683c<\/a><\/li>\n<li><a href=\"http:\/\/blog.miniasp.com\/post\/2016\/07\/26\/Introduction-to-Angular-2.aspx\" target=\"_blank\" rel=\"noopener noreferrer\">\u524d\u7aef\u5de5\u7a0b\u7684\u5922\u5e7b\u9038\u54c1\uff1aAngular 2 \u958b\u767c\u6846\u67b6\u4ecb\u7d39<\/a><\/li>\n<li><a href=\"https:\/\/gist.github.com\/doggy8088\/e0cb494aa28d40a0fb651559a7933dd8\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u958b\u767c\u5be6\u6230\uff1a\u65b0\u624b\u5165\u9580\u7bc7 \u5be6\u4f5c\u74b0\u5883\u8aaa\u660e<\/a><\/li>\n<li><a href=\"https:\/\/gist.github.com\/doggy8088\/e0cb494aa28d40a0fb651559a7933dd8\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u958b\u767c\u5be6\u6230\uff1a\u65b0\u624b\u5165\u9580\u7bc7 \u5be6\u4f5c\u74b0\u5883\u8aaa\u660e<\/a><\/li>\n<li><a href=\"https:\/\/www.facebook.com\/will.fans\/\" target=\"_blank\" rel=\"noopener noreferrer\">Will \u4fdd\u54e5\u7684\u6280\u8853\u4ea4\u6d41\u4e2d\u5fc3 | Facebook<\/a><\/li>\n<li><a href=\"http:\/\/blog.miniasp.com\/post\/2016\/07\/05\/TypeScript-tsc-path-problem-on-Windows.aspx\" target=\"_blank\" rel=\"noopener noreferrer\">\u5982\u4f55\u89e3\u6c7a\u5728 Windows \u7528 npm \u5b89\u88dd TypeScript \u4e4b\u5f8c tsc \u9084\u662f\u820a\u7248\u7684\u554f\u984c<\/a><\/li>\n<li><a href=\"https:\/\/docs.google.com\/document\/d\/1XkXHWvruS66aPcLu6RQP0kAF5cqXfOiWNcgPTw8i4ks\" target=\"_blank\" rel=\"noopener noreferrer\">\u8907\u88fd\u7269\u4ef6\u6216\u77e9\u9663\u7684\u503c \uff1a\u5433\u9cf3\u840d\u8001\u5e2b\u5be6\u4f5c\u5fc3\u5f97<\/a><\/li>\n<li><a href=\"https:\/\/www.facebook.com\/groups\/angularstudygroup\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u7dda\u4e0a Angular \u8b80\u66f8\u6703 | Facebook<\/a><\/li>\n<li><a href=\"http:\/\/ithelp.ithome.com.tw\/users\/20103367\/ironman\/1199\" target=\"_blank\" rel=\"noopener noreferrer\">30 \u5929\u7cbe\u901a RxJS \u7cfb\u5217\u6587\u7ae0 &#8211; 2017 iT \u90a6\u5e6b\u5fd9\u9435\u4eba\u8cfd<\/a><\/li>\n<li><a href=\"http:\/\/blog.techbridge.cc\/2016\/05\/28\/reactive-programming-intro-by-rxjs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Reactive Programming \u7c21\u4ecb\u8207\u6559\u5b78(\u4ee5 RxJS \u70ba\u4f8b)<\/a><\/li>\n<li>Touch. Draw. Share\uff1aA Web Whiteboard<\/li>\n<li><a href=\"http:\/\/www.telerik.com\/kendo-angular-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kendo UI for Angular<\/a><\/li>\n<li>\u5feb\u5feb\u6a02\u6a02\u5b78 Angular 2 \u958b\u767c\u6846\u67b6 &#8211; \u4fdd\u54e5<\/li>\n<li>\u5feb\u5feb\u6a02\u6a02\u5b78\u6703 Angular 2 \u7db2\u7ad9\u958b\u767c\u6846\u67b6 (Modern Web 2016) &#8211; \u4fdd\u54e5<\/li>\n<li>Angular \u8207 jQuery \u5171\u821e\uff1a\u6574\u5408\u7b2c\u4e09\u65b9\u5957\u4ef6\u7684\u6280\u5de7\u3001\u9677\u9631\u8207\u89e3\u6c7a\u65b9\u6848 &#8211; \u4fdd\u54e5<\/li>\n<li>\u4f7f\u7528 Angular 2 \u8207 Firebase \u5be6\u73fe Serverless \u7db2\u7ad9\u67b6\u69cb (JSDC.tw 2016) &#8211; \u4fdd\u54e5<\/li>\n<li>\u4f7f\u7528 Angular 2 Router \u5feb\u901f\u5efa\u69cb SPA \u7db2\u7ad9 &#8211; \u4fdd\u54e5<\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-2-\u65b0\u624b\u6025\u6551\u7ad9.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u65b0\u624b\u6025\u6551\u7ad9 &#8211; \u4fdd\u54e5<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-2-\u958b\u767c\u5be6\u6230_\u65b0\u624b\u5165\u9580\u7bc7-\u9069\u7528-Angular-2.0.0-final-\u7248\u672c-.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u958b\u767c\u5be6\u6230_\u65b0\u624b\u5165\u9580\u7bc7 ( \u9069\u7528 Angular 2.0.0-final \u7248\u672c ) &#8211; \u4fdd\u54e5<\/a><\/li>\n<li>Angular 2 \u958b\u767c\u5be6\u6230\uff1a\u9032\u968e\u958b\u767c\u7bc7 &#8211; RxJS \u65b0\u624b\u5165\u9580 &#8211; \u4fdd\u54e5<\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-2-\u958b\u767c\u5be6\u6230_\u9032\u968e\u958b\u767c\u7bc7-\u5b8c\u6574\u7248.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u958b\u767c\u5be6\u6230_\u9032\u968e\u958b\u767c\u7bc7 (\u5b8c\u6574\u7248) &#8211; \u4fdd\u54e5<\/a><\/li>\n<li>\u4f7f\u7528 TypeScript \u99d5\u99ad Web \u4e16\u754c\u7684\u812b\u97c1\u91ce\u99ac\uff1a\u4ee5 Angular 2 \u958b\u767c\u6846\u67b6\u70ba\u4f8b &#8211; \u4fdd\u54e5<\/li>\n<li>TypeScript \u958b\u767c\u5be6\u6230\uff1a\u958b\u767c\u5373\u6642\u4e92\u52d5\u7684 html5 websocket \u804a\u5929\u5ba4\u61c9\u7528\u7a0b\u5f0f &#8211; \u4fdd\u54e5<\/li>\n<li>JavaScript \u7269\u4ef6\u5c0e\u5411\u89c0\u5ff5\u5165\u9580 v.s. TypeScript \u958b\u767c\u5be6\u6230 (\u5fae\u8edf\u5be6\u6230\u8ab2\u7a0b\u65e5) &#8211; \u4fdd\u54e5<\/li>\n<li>\u4f7f\u7528 Visual Studio Code \u5efa\u69cb JavaScript \u61c9\u7528\u7a0b\u5f0f &#8211; \u4fdd\u54e5<\/li>\n<li>\u4f7f\u7528 ASP.NET 5 \u5be6\u6230\u958b\u767c\u96f2\u7aef\u61c9\u7528\u7a0b\u5f0f &#8211; \u4fdd\u54e5<\/li>\n<li>ASP.NET MVC 5 \u65b0\u529f\u80fd\u63a2\u7d22 &#8211; \u4fdd\u54e5<\/li>\n<li>ASP.NET MVC 6 \u65b0\u529f\u80fd\u63a2\u7d22 &#8211; \u4fdd\u54e5<\/li>\n<li>\u4fdd\u54e5\u7dda\u4e0a\u8b1b\u5802\uff1aLINQ \u5feb\u901f\u4e0a\u624b<\/li>\n<li>\u4f7f\u7528 JSON Server \u5feb\u901f\u5efa\u7f6e Fake REST API \u670d\u52d9 &#8211; \u4fdd\u54e5<\/li>\n<li>Visual Studio 2017 \u65b0\u529f\u80fd\u63a2\u7d22 (Study4.TW) &#8211; \u4fdd\u54e5<\/li>\n<li>\u521d\u5b78\u8005\u90fd\u8a72\u4e86\u89e3\u7684 HTTP \u901a\u8a0a\u5354\u5b9a\u57fa\u790e &#8211; \u4fdd\u54e5\n<ul>\n<li>\u6295\u5f71\u7247<\/li>\n<li><a href=\"https:\/\/www.facebook.com\/will.fans\/videos\/1727290680633402\/\" target=\"_blank\" rel=\"noopener noreferrer\">Facebook\u00a0\u76f4\u64ad\u5f71\u7247<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>\u6d3b\u52d5\u7167\u7247\uff1a<\/h2>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-6512 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140123_HDR.jpg'><img width=\"150\" height=\"150\" src=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140123_HDR-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140201.jpg'><img width=\"150\" height=\"150\" src=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140201-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140144.jpg'><img width=\"150\" height=\"150\" src=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140144-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140113.jpg'><img width=\"150\" height=\"150\" src=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140113-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140132.jpg'><img width=\"150\" height=\"150\" src=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140132-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140152.jpg'><img width=\"150\" height=\"150\" src=\"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/IMG_20170503_140152-150x150.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" loading=\"lazy\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>\u65e5\u671f\uff1a106\u5e745\u67083\u65e5~6\u670821\u65e5 \u6642\u9593\uff1a\u6bcf\u9031\u4e09\u4e0b\u5348 \u5730\u9ede\uff1a\u65b0\u5317\u5e02\u6559\u7814\u4e2d\u5fc3 \u516c\u6587\u8207\u8a08\u756b\uff1a \u516c\u6587\uff1a106E0001588 \u65b0\u5317\u5e02106\u5e74\u5ea6\u81ea\u7531\u8edf\u9ad4\u63a8\u5ee3\u66a8\u7a0b\u5f0f\u61c9\u7528\u7814\u767c\u4e2d\u5fc3\u5de5\u4f5c\u8a08\u756b \u8ab2\u7a0b\u4e3b\u984c\uff1aAngular \u8b1b\u5e2b\uff1a\u6797\u58eb\u7acb\u8001\u5e2b <\/p>\n<p> \u30105\u67083\u65e5\u3011\uff1a <\/p>\n<p>\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011\u30105\u67083\u65e5\u3011\u30105\u670810\u65e5\u3011\u30105\u670817\u65e5\u3011\u30105\u670824\u65e5\u3011\u30105\u670831\u65e5\u3011\u30106\u67087\u65e5\u3011\u30106\u670814\u65e5\u3011\u30106\u670821\u65e5\u3011<\/p>\n<p> \u8ab2\u524d\u9810\u7fd2\uff1a [\u7dda\u4e0a\u8b80\u66f8\u6703] andy \u4e3b\u8b1b javascript \u5165\u9580 \u706b\u529b\u52a0\u5f37\u7248 [\u7dda\u4e0a\u8b80\u66f8\u6703] TypeScript \u5165\u9580 &#8211; \u62c9\u62c9 \u4e3b\u8b1b Angular \u7c21\u4ecb \u958b\u767c\u74b0\u5883\u8207\u5de5\u5177\uff1a Visual Studio Code (1.13.1) Node.js (v6.11.0 LTS, v8.1.2 Current) WebStorm (2017.1.4) Git (2.13.1) Angular CLI GitHub &#8211; angular\/angular-cli: CLI tool for Angular Angular Augury \u5b89\u88dd\u958b\u767c\u74b0\u5883\u8207\u5de5\u5177 \u5b89\u88dd nodejs \u5b89\u88dd\u958b\u767c\u5de5\u5177 [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[34],"tags":[],"_links":{"self":[{"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/posts\/6512"}],"collection":[{"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/comments?post=6512"}],"version-history":[{"count":0,"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/posts\/6512\/revisions"}],"wp:attachment":[{"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/media?parent=6512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/categories?post=6512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/tags?post=6512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}