{"id":7269,"date":"2017-07-12T23:20:35","date_gmt":"2017-07-12T15:20:35","guid":{"rendered":"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/?p=7269"},"modified":"2025-07-08T09:41:12","modified_gmt":"2025-07-08T01:41:12","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%8a-angular-2-%e9%80%b2%e9%9a%8e10607120714","status":"publish","type":"post","link":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/archives\/7269","title":{"rendered":"\u65b0\u5317\u5e02\u6559\u80b2\u5c40\u7a0b\u5f0f\u61c9\u7528\u7814\u767c\u793e\u7fa4\u5de5\u4f5c\u574a-Angular 2 \u9032\u968e(1060712~0714)"},"content":{"rendered":"<div class=\"post-headline\">\n<h3>\u65e5\u671f\uff1a106\u5e747\u670812\u65e5~7\u670814\u65e5<\/h3>\n<\/div>\n<div class=\"post-bodycopy clearfix\">\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\/%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 2 \u9032\u968e<\/h3>\n<h3>\u8b1b\u5e2b\uff1a\u6797\u58eb\u7acb\u8001\u5e2b<\/h3>\n<h2><strong><span style=\"color: #ff0000;\">\u3010\u8ab2\u7a0b\u5167\u5bb9\u3011\uff1a<\/span><\/strong><\/h2>\n<ul>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/archives\/6512\" target=\"_blank\" rel=\"noopener noreferrer\">\u65b0\u5317\u5e02\u6559\u80b2\u5c40\u7a0b\u5f0f\u61c9\u7528\u7814\u767c\u793e\u7fa4\u5de5\u4f5c\u574a-Angular(1060503~0621)<\/a><\/li>\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-2-%E9%96%8B%E7%99%BC%E5%AF%A6%E6%88%B0_%E9%80%B2%E9%9A%8E%E9%96%8B%E7%99%BC%E7%AF%87-%E5%AE%8C%E6%95%B4%E7%89%88.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u958b\u767c\u5be6\u6230_\u9032\u968e\u958b\u767c\u7bc7 (\u5b8c\u6574\u7248) \u2013 \u4fdd\u54e5<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83%E5%BB%BA%E7%BD%AE-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<\/ul>\n<h2>\u958b\u767c\u74b0\u5883\u8207\u5de5\u5177\uff1a<\/h2>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a>\u00a0(v6.11.1 LTS, v8.1.4 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.2)<\/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 \u2013 angular\/angular-cli: CLI tool for Angular<\/a><\/li>\n<li>Google Chrome \u64f4\u5145\u529f\u80fd\uff1aAngular Augury<\/li>\n<\/ul>\n<h3>\u5b89\u88dd\u958b\u767c\u74b0\u5883\u8207\u5de5\u5177<\/h3>\n<ul>\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>\u66f4\u65b0\u00a0Node.js, npm, Angular CLI<\/h3>\n<h4>Node.js \u91cd\u65b0\u5b89\u88dd\u5373\u53ef<\/h4>\n<p><code class=\"language-javascript\">npm i -g npm<\/code><\/p>\n<p><code class=\"language-javascript\">npm unstall -g @angular\/cli<\/code><\/p>\n<p><code class=\"language-javascript\">npm i -g @angular\/cli<\/code><\/p>\n<h2>\u5be6\u4f5c\u64cd\u4f5c\u6307\u4ee4\uff1a<\/h2>\n<h4>\u7df4\u7fd2\u5c08\u6848\u6a94\u4e0b\u8f09\uff1a<a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/07\/ng-demo-routing.7z\">ng-demo-routing<\/a><\/h4>\n<ul>\n<li>\u4e0b\u8f09\u89e3\u58d3\u7e2e\u5f8c\uff0c\u8acb\u81f3\u5c08\u6848\u8cc7\u6599\u593e\u4e2d\uff0c\u4e0b\u9054\u4e0b\u5217\u6307\u4ee4\uff1a\n<ul>\n<li>npm install\u00a0<strong><span style=\"color: #0000ff;\">=&gt; \u91cd\u5efa\u00a0node_modules\u00a0<\/span><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><code class=\"language-javascript\">ng new ng-demo-routing --routing<\/code><\/p>\n<p><code class=\"language-javascript\">npm start<\/code><\/p>\n<p><code class=\"language-javascript\">ng build --prod<\/code><\/p>\n<p><code class=\"language-javascript\">ng g c intro\/group1<\/code><\/p>\n<p><code class=\"language-javascript\">ng g c intro\/group2<\/code><\/p>\n<p><code class=\"language-javascript\">ng g c navbar<\/code><\/p>\n<p><code class=\"language-javascript\">ng g c home<\/code><\/p>\n<p><code class=\"language-javascript\">ng g c page-not-found<\/code><\/p>\n<p><code class=\"language-javascript\">ng g c intro\/intro<\/code><\/p>\n<p><code class=\"language-javascript\">ng g m intro --routing<\/code><\/p>\n<hr \/>\n<h2>\u5be6\u4f5c\u5ef6\u9072\u8f09\u5165\u53ca\u9810\u5148\u8f09\u5165\uff1a<\/h2>\n<h4>\u7df4\u7fd2\u5c08\u6848\u6a94\u4e0b\u8f09\uff1a<a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/07\/ng-demo-routing.7z\">ng-demo-routing<\/a>\u00a0(\u540c\u4e0a).<\/h4>\n<ul>\n<li>\u4e0b\u8f09\u89e3\u58d3\u7e2e\u5f8c\uff0c\u8acb\u81f3\u5c08\u6848\u8cc7\u6599\u593e\u4e2d\uff0c\u4e0b\u9054\u4e0b\u5217\u6307\u4ee4\uff1a\n<ul>\n<li>npm install <strong><span style=\"color: #0000ff;\">=&gt; \u91cd\u5efa\u00a0node_modules\u00a0<\/span><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><code class=\"language-javascript\">ng g m m2 --routing<\/code><\/p>\n<p>installing module<br \/>\ncreate src\\app\\m2\\m2-routing.module.ts<br \/>\ncreate src\\app\\m2\\m2.module.ts<br \/>\nWARNING Module is generated but not provided, it must be provided to be used<\/p>\n<p><code class=\"language-javascript\">ng g c m2\/demo1<\/code><\/p>\n<p>installing component<br \/>\ncreate src\\app\\m2\\demo1\\demo1.component.css<br \/>\ncreate src\\app\\m2\\demo1\\demo1.component.html<br \/>\ncreate src\\app\\m2\\demo1\\demo1.component.spec.ts<br \/>\ncreate src\\app\\m2\\demo1\\demo1.component.ts<br \/>\n<strong><span style=\"color: #ff0000;\">update src\\app\\m2\\m2.module.ts<\/span><\/strong><\/p>\n<p><code class=\"language-javascript\">ng g c m2<\/code><\/p>\n<p>installing component<br \/>\ncreate src\\app\\m2\\m2.component.css<br \/>\ncreate src\\app\\m2\\m2.component.html<br \/>\ncreate src\\app\\m2\\m2.component.spec.ts<br \/>\ncreate src\\app\\m2\\m2.component.ts<br \/>\n<strong><span style=\"color: #ff0000;\">update src\\app\\m2\\m2.module.ts<\/span><\/strong><\/p>\n<hr \/>\n<\/div>\n<h3>Module \u529f\u80fd\u4ecb\u7d39<\/h3>\n<h4>Feature Module =&gt; \u529f\u80fd<\/h4>\n<ul>\n<li>Lazy Loading Module<\/li>\n<li>Pre Loading Module<\/li>\n<\/ul>\n<h4>Core Module<\/h4>\n<h4>Share Module<\/h4>\n<hr \/>\n<h2>Angular Form \u5be6\u4f5c\u7df4\u7fd2\uff1a<\/h2>\n<h4>\u7df4\u7fd2\u5c08\u6848\u6a94\u4e0b\u8f09\uff1a<a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/07\/ng-demo-forms.7z\">ng-demo-forms<\/a><\/h4>\n<ul>\n<li>\u4e0b\u8f09\u89e3\u58d3\u7e2e\u5f8c\uff0c\u8acb\u81f3\u5c08\u6848\u8cc7\u6599\u593e\u4e2d\uff0c\u4e0b\u9054\u4e0b\u5217\u6307\u4ee4\uff1a\n<ul>\n<li>npm install\u00a0<strong><span style=\"color: #0000ff;\">=&gt; \u91cd\u5efa\u00a0node_modules<\/span><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><code class=\"language-javascript\">ng new ng-demo-forms --routing<\/code><\/p>\n<p><code class=\"language-javascript\">npm start<\/code><\/p>\n<p><code class=\"language-javascript\">ng g c\u00a0reactive<\/code><\/p>\n<hr \/>\n<div class=\"post-bodycopy clearfix\">\n<h3>WebStorm \u64cd\u4f5c\u6307\u4ee4\uff1a<\/h3>\n<ul>\n<li>Ctrl + Alt + o\uff1a\u79fb\u9664\u672a\u7528\u7684\u6307\u4ee4\u884c<\/li>\n<li>Ctrl + Shift + \u4e0a\u4e0b\u65b9\u5411\u9375\uff1a\u7a0b\u5f0f\u78bc\u4e0a\u4e0b\u79fb\uff0c\u82e5\u70ba\u9663\u5217\u5143\u7d20\uff0c\u70ba\u81ea\u52d5\u8abf\u6574 &#8220;,\" (\u9017\u865f)\u3002<\/li>\n<\/ul>\n<hr \/>\n<h2>Todo \u5c08\u6848\u524d\u3001\u5f8c\u7aef\u7a0b\u5f0f\u6574\u5408\u5be6\u4f5c<\/h2>\n<h3>\u5f8c\u7aef\u7a0b\u5f0f\u5b89\u88dd\uff1a<\/h3>\n<ul>\n<li><a href=\"https:\/\/getcomposer.org\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a><\/li>\n<li><a href=\"https:\/\/www.apachefriends.org\/zh_tw\/download.html\" target=\"_blank\" rel=\"noopener noreferrer\">XAMPP<\/a><\/li>\n<\/ul>\n<h4>\u5b89\u88dd\u00a0<a href=\"https:\/\/www.apachefriends.org\/zh_tw\/download.html\" target=\"_blank\" rel=\"noopener noreferrer\">XAMPP<\/a>\u00a0\u53ca\u00a0<a href=\"https:\/\/getcomposer.org\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a><\/h4>\n<h4>\u7bc4\u4f8b\u6a94\u4e0b\u8f09\uff1a<a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/07\/ng2-php-todo-demo.7z\">ng2-php-todo-demo<\/a>\u00a0<span style=\"color: #ff0000;\">(\u8a3b\uff1a\u5df2\u5c07\u539f vendor \u53ca\u00a0node_modules \u8cc7\u6599\u593e\u522a\u9664)<\/span><\/h4>\n<p>cd todo-php<\/p>\n<p>composer install <strong><span style=\"color: #0000ff;\">=&gt; \u91cd\u5efa\u00a0vendor \u8cc7\u6599\u593e<\/span><\/strong><\/p>\n<p><strong>\u5c07 todo-php\\app \u8a2d\u70ba Apache \u9996\u9801\u8def\u5f91<\/strong><\/p>\n<p>\u8a2d\u5b9a\u00a0todo-php\\.env <span style=\"color: #0000ff;\"><strong>=&gt; \u9023\u7dda\u81f3 MySQL \u8cc7\u6599\u5eab\u7684\u7d44\u614b\u8a2d\u5b9a<\/strong><\/span><\/p>\n<p>.\\vendor\\bin\\phinx migrate <strong><span style=\"color: #0000ff;\">=&gt; \u5efa\u7acb\u6e2c\u8a66\u8cc7\u6599\u8868<\/span><\/strong><\/p>\n<h4>\u4f7f\u7528 <strong><span style=\"color: #0000ff;\">http:\/\/localhost<\/span><\/strong> \u6e2c\u8a66\u7db2\u7ad9\u7cfb\u7d71<\/h4>\n<ul>\n<li>adminer.php <strong><span style=\"color: #0000ff;\">=&gt; MySQL \u7dda\u4e0a\u7ba1\u7406\u7a0b\u5f0f<\/span><\/strong><\/li>\n<li>todos.php <strong><span style=\"color: #0000ff;\">=&gt; \u986f\u793a\u6e2c\u8a66\u8cc7\u6599\u8868\u5167\u5bb9<\/span><\/strong><\/li>\n<\/ul>\n<h3>\u524d\u7aef Todo \u5c08\u6848\u5efa\u7acb\u5be6\u4f5c\uff1a<\/h3>\n<h4>\u7df4\u7fd2\u5c08\u6848\u6a94\u4e0b\u8f09\uff1a<a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/07\/ng-demo-todo.7z\">ng-demo-todo<\/a><\/h4>\n<ul>\n<li>\u4e0b\u8f09\u89e3\u58d3\u7e2e\u5f8c\uff0c\u8acb\u81f3\u5c08\u6848\u8cc7\u6599\u593e\u4e2d\uff0c\u4e0b\u9054\u4e0b\u5217\u6307\u4ee4\uff1a\n<ul>\n<li>npm install\u00a0<strong><span style=\"color: #0000ff;\">=&gt; \u91cd\u5efa\u00a0node_modules<\/span><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><code class=\"language-javascript\">ng new ng-demo-todo --routing<\/code><\/p>\n<p><code class=\"language-javascript\">npm start<\/code><\/p>\n<p><code class=\"language-javascript\">ng g s todo<\/code><\/p>\n<h3><strong><span style=\"color: #0000ff;\">app.component.ts<\/span><\/strong><\/h3>\n<pre class=\"language-javascript\">import { Component, OnInit } from '@angular\/core';\r\nimport { TodoService } from '.\/todo.service';<\/pre>\n<pre class=\"language-javascript\">@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n title = 'app';<\/pre>\n<pre class=\"language-javascript\">todos = []; \/\/ {id: 1, title: '...', content: '...'}<\/pre>\n<pre class=\"language-javascript\">constructor(private todoService: TodoService) {}<\/pre>\n<pre class=\"language-javascript\">ngOnInit(): void {\r\n this.todoService.getlist().subscribe(res =&gt; this.todos = res.data);\r\n}<\/pre>\n<pre class=\"language-javascript\">addTodo() {\r\n let newTodo = {\r\n   title: this.title,\r\n   content: this.title,\r\n }\r\n \/\/ this.todos.push(newTodo);\r\n this.todoService.add(newTodo).subscribe(\r\n \/\/ success\r\n   res =&gt; {\r\n     newTodo['id'] = res.data.id;\r\n     this.todos.push(newTodo)\r\n   }\r\n \/\/ error\r\n \/\/ complete\r\n )\r\n }\r\n}<\/pre>\n<h3><span style=\"color: #0000ff;\">todo.service.ts<\/span><\/h3>\n<pre class=\"language-javascript\">import { Injectable } from '@angular\/core';\r\nimport { Http, Headers, RequestOptions, Response } from '@angular\/http';\r\nimport 'rxjs\/add\/operator\/map'<\/pre>\n<pre class=\"language-javascript\">@Injectable()\r\nexport class TodoService {<\/pre>\n<pre class=\"language-javascript\">headers = new Headers({'Content-Type': 'application\/json'});\r\n options = new RequestOptions({headers: this.headers});<\/pre>\n<pre class=\"language-javascript\">constructor(private http: Http) { }<\/pre>\n<pre class=\"language-javascript\">add(todo) {\r\n return this.http.post(\r\n   'http:\/\/localhost\/todos.php?op=addTodo',\r\n   todo,\r\n   this.options\r\n ).map((res: Response) =&gt; res.json());\r\n}<\/pre>\n<pre class=\"language-javascript\">getlist() {\r\n return this.http.get(\r\n   'http:\/\/localhost\/todos.php'\r\n   ).map((res: Response) =&gt; res.json());\r\n }\r\n}<\/pre>\n<h3><strong><span style=\"color: #0000ff;\">\u00a0app.component.html<\/span><\/strong><\/h3>\n<pre class=\"language-markup\">Title:\r\n&lt;input type=\"text\" [(ngModel)]=\"title\"&gt;\r\n&lt;button (click)=\"addTodo()\"&gt;Submit&lt;\/button&gt;<\/pre>\n<pre class=\"language-markup\">&lt;hr \/&gt;<\/pre>\n<pre class=\"language-markup\">&lt;ul&gt;\r\n &lt;li *ngFor=\"let todo of todos\"&gt;\r\n   {{ todo.id }} - {{ todo.title }}\r\n &lt;\/li&gt;\r\n&lt;\/ul&gt;<\/pre>\n<h2><strong><span style=\"color: #ff0000;\">\u3010\u5b78\u7fd2\u8cc7\u6e90\u3011\uff1a<\/span><\/strong><\/h2>\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-2-%E9%96%8B%E7%99%BC%E5%AF%A6%E6%88%B0_%E9%80%B2%E9%9A%8E%E9%96%8B%E7%99%BC%E7%AF%87-%E5%AE%8C%E6%95%B4%E7%89%88.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u958b\u767c\u5be6\u6230_\u9032\u968e\u958b\u767c\u7bc7 (\u5b8c\u6574\u7248) \u2013 \u4fdd\u54e5<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-%E5%95%9F%E5%8B%95%E6%B5%81%E7%A8%8B.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-%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83%E5%BB%BA%E7%BD%AE-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-%E6%A6%82%E8%BF%B0%EF%BC%86Decorator.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-%E8%B3%87%E6%96%99%E7%B9%AB%E7%B5%90.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%E3%80%81class%E3%80%81style-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-%E6%8C%87%E4%BB%A4%E3%80%81Pipe-%E7%AE%A1%E9%81%93.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%E3%80%81NgFor%E3%80%81NgSwitch-%E5%9F%BA%E7%A4%8E.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-%E6%A6%82%E8%BF%B0%E3%80%81Service-%E6%9C%8D%E5%8B%99%E8%88%87-DI-%E4%BE%9D%E8%B3%B4%E6%B3%A8%E5%85%A5.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\/%E7%88%B6%E5%AD%90-Component-%E4%B9%8B%E9%80%9A%E8%A8%8A.pdf\">\u7236\u5b50 Component \u4e4b\u901a\u8a0a<br \/>\n<\/a><\/li>\n<\/ul>\n<hr \/>\n<h3>Angular \u7dda\u4e0a\u8b80\u66f8\u6703<\/h3>\n<div class=\"epyt-video-wrapper\"><iframe loading=\"lazy\"  style=\"display: block; margin: 0px auto;\"  id=\"_ytid_34314\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\"  data-relstop=\"1\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=0&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  epyt-is-override  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>\u6295\u5f71\u7247\uff1a<a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-2-%E6%96%B0%E6%89%8B%E6%80%A5%E6%95%91%E7%AB%99.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u65b0\u624b\u6025\u6551\u7ad9<\/a><\/h3>\n<div class=\"epyt-video-wrapper\"><iframe loading=\"lazy\"  style=\"display: block; margin: 0px auto;\"  id=\"_ytid_23994\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\"  data-relstop=\"1\" src=\"https:\/\/www.youtube.com\/embed\/LexXU9A7brY?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=0&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  epyt-is-override  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>\u6295\u5f71\u7247\uff1aAngular 2 \u958b\u767c\u5be6\u6230\uff1a\u9032\u968e\u958b\u767c\u7bc7 \u2013 RxJS \u65b0\u624b\u5165\u9580<\/h3>\n<div class=\"epyt-video-wrapper\"><iframe loading=\"lazy\"  style=\"display: block; margin: 0px auto;\"  id=\"_ytid_59031\"  width=\"640\" height=\"360\"  data-origwidth=\"640\" data-origheight=\"360\"  data-relstop=\"1\" src=\"https:\/\/www.youtube.com\/embed\/SDgX00fHos0?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=0&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  epyt-is-override  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 \u2013 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 \u2013 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>\u5feb\u5feb\u6a02\u6a02\u5b78 Angular 2 \u958b\u767c\u6846\u67b6 \u2013 \u4fdd\u54e5<\/li>\n<li>\u5feb\u5feb\u6a02\u6a02\u5b78\u6703 Angular 2 \u7db2\u7ad9\u958b\u767c\u6846\u67b6 (Modern Web 2016) \u2013 \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 \u2013 \u4fdd\u54e5<\/li>\n<li>\u4f7f\u7528 Angular 2 \u8207 Firebase \u5be6\u73fe Serverless \u7db2\u7ad9\u67b6\u69cb (JSDC.tw 2016) \u2013 \u4fdd\u54e5<\/li>\n<li>\u4f7f\u7528 Angular 2 Router \u5feb\u901f\u5efa\u69cb SPA \u7db2\u7ad9 \u2013 \u4fdd\u54e5<\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-2-%E6%96%B0%E6%89%8B%E6%80%A5%E6%95%91%E7%AB%99.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u65b0\u624b\u6025\u6551\u7ad9 \u2013 \u4fdd\u54e5<\/a><\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-2-%E9%96%8B%E7%99%BC%E5%AF%A6%E6%88%B0_%E6%96%B0%E6%89%8B%E5%85%A5%E9%96%80%E7%AF%87-%E9%81%A9%E7%94%A8-Angular-2.0.0-final-%E7%89%88%E6%9C%AC-.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 ) \u2013 \u4fdd\u54e5<\/a><\/li>\n<li>Angular 2 \u958b\u767c\u5be6\u6230\uff1a\u9032\u968e\u958b\u767c\u7bc7 \u2013 RxJS \u65b0\u624b\u5165\u9580 \u2013 \u4fdd\u54e5<\/li>\n<li><a href=\"http:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-content\/uploads\/2017\/05\/Angular-2-%E9%96%8B%E7%99%BC%E5%AF%A6%E6%88%B0_%E9%80%B2%E9%9A%8E%E9%96%8B%E7%99%BC%E7%AF%87-%E5%AE%8C%E6%95%B4%E7%89%88.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">Angular 2 \u958b\u767c\u5be6\u6230_\u9032\u968e\u958b\u767c\u7bc7 (\u5b8c\u6574\u7248) \u2013 \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 \u2013 \u4fdd\u54e5<\/li>\n<li>\u521d\u5b78\u8005\u90fd\u8a72\u4e86\u89e3\u7684 HTTP \u901a\u8a0a\u5354\u5b9a\u57fa\u790e \u2013 \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<\/div>\n","protected":false},"excerpt":{"rendered":"<p> \u65e5\u671f\uff1a106\u5e747\u670812\u65e5~7\u670814\u65e5 \u5730\u9ede\uff1a\u65b0\u5317\u5e02\u6559\u7814\u4e2d\u5fc3 \u516c\u6587\u8207\u8a08\u756b\uff1a \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 2 \u9032\u968e \u8b1b\u5e2b\uff1a\u6797\u58eb\u7acb\u8001\u5e2b \u3010\u8ab2\u7a0b\u5167\u5bb9\u3011\uff1a \u65b0\u5317\u5e02\u6559\u80b2\u5c40\u7a0b\u5f0f\u61c9\u7528\u7814\u767c\u793e\u7fa4\u5de5\u4f5c\u574a-Angular(1060503~0621) \u8b1b\u7fa9\u3001\u7bc4\u4f8b\u6a94\u3001\u9304\u5f71\u6a94\uff1ahttp:\/\/bit.ly\/toh-ntpc-coder2017 Angular 2 \u958b\u767c\u5be6\u6230_\u9032\u968e\u958b\u767c\u7bc7 (\u5b8c\u6574\u7248) \u2013 \u4fdd\u54e5 Angular \u958b\u767c\u74b0\u5883\u5efa\u7f6e &amp; angular-cli Angular 4 \u958b\u767c\u74b0\u5883\u8aaa\u660e by \u4fdd\u54e5 angular-cli GitHub \u958b\u767c\u74b0\u5883\u8207\u5de5\u5177\uff1a Node.js (v6.11.1 LTS, v8.1.4 Current) WebStorm (2017.1.4) Git (2.13.2) Angular CLI GitHub \u2013 angular\/angular-cli: CLI tool for Angular Google Chrome \u64f4\u5145\u529f\u80fd\uff1aAngular Augury \u5b89\u88dd\u958b\u767c\u74b0\u5883\u8207\u5de5\u5177 \u5b89\u88dd\u958b\u767c\u5de5\u5177 (WebStorm) [&#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\/7269"}],"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=7269"}],"version-history":[{"count":0,"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/posts\/7269\/revisions"}],"wp:attachment":[{"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/media?parent=7269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/categories?post=7269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnas.bhes.ntpc.edu.tw\/wordpress\/wp-json\/wp\/v2\/tags?post=7269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}