<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Angular &#8211; Larry的午茶時光</title>
	<atom:link href="https://blog.yuyansoftware.com.tw/tag/angular/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.yuyansoftware.com.tw</link>
	<description></description>
	<lastBuildDate>Mon, 14 Apr 2025 04:34:19 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.3</generator>

<image>
	<url>https://blog.yuyansoftware.com.tw/wp-content/uploads/2022/10/favicon-45x45.png</url>
	<title>Angular &#8211; Larry的午茶時光</title>
	<link>https://blog.yuyansoftware.com.tw</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>AngularJS (4)</title>
		<link>https://blog.yuyansoftware.com.tw/2016/03/angularjs-4/</link>
		
		<dc:creator><![CDATA[Larry]]></dc:creator>
		<pubDate>Mon, 21 Mar 2016 15:56:00 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[前端工程]]></category>
		<category><![CDATA[Angular]]></category>
		<guid isPermaLink="false">http://test234.yuyansoftware.com.tw/2016/03/21/angularjs-4/</guid>

					<description><![CDATA[這兩天試了一下 Angular 2. 與其說是 Angular 的二代，倒不如說整個打掉重練 XD 1. 首先 &#8230; ]]></description>
										<content:encoded><![CDATA[<p><span style="font-size: large;">這兩天試了一下 Angular 2. 與其說是 Angular 的二代，倒不如說整個打掉重練 XD</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">1. 首先，Angular 2 是一個 component based UI framework, 而 Angular 1 還算是 html driven 的框架。這幾年前端的演進很快，就這個時間點而言，似乎 component based 的架構是主流。</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">2. Angular 2 與套件管理工具 npm 有強相關。包含後續會提到的 TypeScript 編譯執行和 local server watching.</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">3. 導入了 TypeScript. TypeScript 是微軟 host 的一個 JavaScript 的再包裝語言(需要 compile 成 JavaScript)。TypeScript 就編寫上可以為 JavaScript 帶來 OO (object oriented) 的概念，它提供了 interface, class 等 keyword, static type check 的概念。值得一提的是，TypeScript 的 project leader 是C#之父 Anders Hejlsberg, 連結是他去年底拜訪中國(推廣TypeScript)的一些會議記錄，非常值得一讀 <a href="https://segmentfault.com/a/1190000003944860" target="_blank" rel="noopener noreferrer">https://segmentfault.com/a/1190000003944860</a></span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">4. 因為導入了 TypeScript, 有很強的 class 的設計概念在裡面。拿掉了 Angular 1 的 controller/scope, Angular 2 的每個 class 就代表一個 scope 的概念。</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">5. Angular 2 的每個 component 就檔案結構上可以擺成 component.html/css/ts(TypeScript). 有 Angular 1 客製化 directive 的感覺，但架構上更正式化。&nbsp;</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">6. 呈5, 正因為這樣所以碎檔很多，官方教程的範例甚至做到了資料程式分離(good practice)，碎檔就更多了。在實戰上會不會比較難管理？是日後可以關注的地方。</span></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AngularJS (3)</title>
		<link>https://blog.yuyansoftware.com.tw/2015/12/angularjs-3/</link>
		
		<dc:creator><![CDATA[Larry]]></dc:creator>
		<pubDate>Tue, 15 Dec 2015 13:06:00 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[前端工程]]></category>
		<category><![CDATA[Angular]]></category>
		<guid isPermaLink="false">http://test234.yuyansoftware.com.tw/2015/12/15/angularjs-3/</guid>

					<description><![CDATA[https://docs.angularjs.org/tutorial&#160; 一直以來沒有真正走過官方教 &#8230; ]]></description>
										<content:encoded><![CDATA[<p><span style="font-size: large;"><a href="https://docs.angularjs.org/tutorial" target="_blank" rel="noopener noreferrer">https://docs.angularjs.org/tutorial</a>&nbsp; </span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">一直以來沒有真正走過官方教程。其實這官方教程有一些很基本扎實的東西，尤其是 coding convention 的部分可以參考。</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">1. ng-app 宣告在 html tag, ng-controller 宣告在 body tag.</span><br />
<span style="font-size: large;">2. object array 換行，indent 的方式 </span></p>
<pre>$scope.phones = [
  {'name': 'Nexus S',
   'snippet': 'Fast just got faster with Nexus S.'},
  {'name': 'Motorola XOOM&#x2122; with Wi-Fi',
   'snippet': 'The Next, Next Generation tablet.'},
  {'name': 'MOTOROLA XOOM&#x2122;',
   'snippet': 'The Next, Next Generation tablet.'}
];
</pre>
<p><span style="font-size: large;">3. Filtering Repeaters. ng-repeat 可以加上 filter. 另外也可以選擇 sort &#8216;orderBy&#8217;</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">4. $http. 首先教程上 sample code&nbsp;$http.get(&#8216;url&#8217;).success(&#8230;</span><br />
<span style="font-size: large;"><a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank" rel="noopener noreferrer">https://docs.angularjs.org/api/ng/service/$http</a>&nbsp;有提到</span><br />
<span style="font-size: large;"><span style="color: #999999;">&#8220;The $http legacy promise methods success and error have been deprecated. Use the standard then method instead.&#8221;</span></span><br />
<span style="font-size: large;">=&gt; 用 then 而不是 success / error.</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">get 回來的 data 一定要是 json 格式，如果 callback function input 是 &#8216;response&#8217;, url 上放的 data 是 {&#8220;PPP&#8221;: &#8220;QQQ&#8221;}, 則在 callback function 中 response.data.PPP 中存的就是 &#8220;QQQ&#8221;. 另外要特別注意的是 json 的 object array 最後不能有逗點。上述 $scope.phones array 最後一個 object 的後方加逗號是 ok 的，但在 json 不行。另外如果 json 中要直接指定 array 的話，直接用上述 object array 的格式即可，中括號開頭，中括號結尾。Again, 如果 callback function input 是 &#8216;response&#8217;, response.data 存的就是該 array.</span></p>
<p><a name="more"></a><a href="https://docs.angularjs.org/tutorial/step_05" target="_blank" rel="noopener noreferrer"><span style="font-size: large;">https://docs.angularjs.org/tutorial/step_05</span></a><br />
<span style="color: #999999; font-size: large;">&#8220;$ Prefix Naming Convention</span><br />
<span style="color: #999999; font-size: large;">As a naming convention, Angular&#39;s built-in services, Scope methods and a few other Angular APIs have a $ prefix in front of the name.&nbsp;</span><br />
<span style="color: #999999; font-size: large;"><br />
</span><span style="font-size: large;"><span style="color: #999999;">The $ prefix is there to namespace Angular-provided services. To prevent collisions it&#39;s best to avoid naming your services and models anything that begins with a $.&#8221;</span></span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">也是 Coding convention 的東西，inject service to controller 方法一： </span></p>
<pre>function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
</pre>
<p><span style="font-size: large;">方法二 </span></p>
<pre>phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);
</pre>
<p><span style="font-size: large;">因為 $scope, $http 是 Angular 內建 services, 可以省略 </span></p>
<pre>phonecatApp.controller('PhoneListCtrl', function($scope, $http) {...});
</pre>
<p><span style="font-size: large;">5. ng-route.&nbsp;<a href="https://docs.angularjs.org/tutorial/step_07" target="_blank" rel="noopener noreferrer">https://docs.angularjs.org/tutorial/step_07</a></span><br />
<span style="color: #999999; font-size: large;">&#8220;Providers can only be injected into config functions. Thus you could not inject $routeProvider into PhoneListCtrl. </span><br />
<span style="font-size: large;"><span style="color: #999999;">Starti</span><span style="color: #999999;">n</span></span><span style="color: #999999; font-size: large;">g with AngularJS version 1.2, ngRoute is in its own module and must be loaded by loading the additional angular-route.js file.&#8221;</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">這章節的 sample 新增一個 module &#8216;phonecatControllers&#8217;, 將多個 view 的 controller 設定在 &#8216;phonecatControllers&#8217; 底下，再將 &#8216;phonecatControllers&#8217; inject 進 app module &#8216;phonecatApp&#8217;, 在 &#8216;phonecatApp&#8217; config 中就可以指定 route templateUrl 和 controller 了。</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">6. custom filter. Add filter module, add filter name, add the filter module to the dependencies of app module, then html can use the filter.</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">7. REST and Custom Services&nbsp;<a href="https://docs.angularjs.org/tutorial/step_11" target="_blank" rel="noopener noreferrer">https://docs.angularjs.org/tutorial/step_11</a></span><br />
<span style="font-size: large;">首先 inject 進 controller 時，如果有自定的 services, 即使是 Angular 內建的 services 也要列出 (下例中 $scope 要列出，不能省略)</span></p>
<pre>phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function ($scope, Phone) {

}]);
</pre>
<p><span style="color: #666666;"><span style="color: #999999; font-size: large;">&#8220;An important thing to notice in the code above is that we don&#39;t pass any callback functions when invoking methods of our Phone service. Although it looks as if the result were returned synchronously, that is not the case at all. What is returned synchronously is a &#8220;future&#8221; — an object, which will be filled with data when the XHR response returns.&#8221;</span></span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">有些人會認為&#8221;當下 return 後來填上&#8221;的方式&nbsp;ambiguous, 所以教程上也提供了設定 callback 的方式。</span></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AngularJS (2)</title>
		<link>https://blog.yuyansoftware.com.tw/2015/08/angularjs-2/</link>
		
		<dc:creator><![CDATA[Larry]]></dc:creator>
		<pubDate>Sat, 15 Aug 2015 15:38:00 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[前端工程]]></category>
		<category><![CDATA[Angular]]></category>
		<guid isPermaLink="false">http://test234.yuyansoftware.com.tw/2015/08/15/angularjs-2/</guid>

					<description><![CDATA[1. 開發環境 Sublime, install AngularJS and AngularJS Snippe &#8230; ]]></description>
										<content:encoded><![CDATA[<p><span style="font-size: large;">1. 開發環境 Sublime, install AngularJS and AngularJS Snippets</span><br />
<span style="font-size: large;">2. Use ex: &#8220;myCtrl as m&#8221; and then use m.ooo, m.xxx in html.&nbsp;</span><span style="font-size: large;">利用這方式在 html 提供一個 scope, 這樣 controller 和 child controllers 的變數就不會混淆.</span><br />
<span style="font-size: large;">3. 不管在 parent/child controller 注入 $scope 設定變數 ex: $scope.name = &#8220;ABC&#8221;, name 變數是屬於整個 module 的 (不屬於個別 controller scope), 因為 $scope 是 global singleton.</span><br />
<span style="font-size: large;">4. html 中在 child controller 範圍可以拿到 parent controller 的變數 (當然 parent 不能拿 child controller 的變數)</span><br />
<span style="font-size: large;">5. value, factory, service, provider 的關係. Refer to Anuglar source &#8220;// $provider&#8221; block. 基本上都是 provider 的不同包裝, 階層關係是 value, service -&gt; factory -&gt; provider.</span><br />
<span style="font-size: large;">provider 必須定義 this.$get, which returns an object in it.</span><br />
<span style="font-size: large;">factory directly returns an object.</span><br />
<span style="font-size: large;">service 有更強的物件化, ex: this.prop1 = &#8220;ooo&#8221;, this.prop2 = &#8220;xxx&#8221;</span><br />
<span style="font-size: large;">value 是最簡化的包裝.</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">6. Services 可以在 angular.module.config 初始化, 在 angular.module.run 指定給 $rootScope. 或是注入 controller 指定給 controller member.</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">7. 如何從 view (html) 觸發 service? 對於 native javascript, button handler 裡 $injector.get(&#8216;service_name&#8217;) 可以拿到 service object. 另外 ng-click handler 可以調用 controller scope 底下的 function, 在 controller 中可以指定 service function 為 controller scope 底下的 function.</span></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AngularJS (1)</title>
		<link>https://blog.yuyansoftware.com.tw/2015/06/angularjs-1/</link>
		
		<dc:creator><![CDATA[Larry]]></dc:creator>
		<pubDate>Sun, 14 Jun 2015 07:48:00 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[前端工程]]></category>
		<category><![CDATA[Angular]]></category>
		<guid isPermaLink="false">http://test234.yuyansoftware.com.tw/2015/06/14/angularjs-1/</guid>

					<description><![CDATA[初探 AngularJS 的一些心得: 1. 當然他是 UI 拿來做 data binding 的一個 fra &#8230; ]]></description>
										<content:encoded><![CDATA[<p><span style="font-size: large;">初探 AngularJS 的一些心得:</span><br />
<span style="font-size: large;"><br />
</span><span style="font-size: large;">1. 當然他是 UI 拿來做 data binding 的一個 framework.</span><br />
<span style="font-size: large;">2. Modularization. 宣告 html 區塊成為模組, 底下的 JavaScript 函式與變數都給上 scope, 改善 JS source files, functions, variables 基本上都是 global (in a page) 的問題.</span><br />
<span style="font-size: large;">3. 承上, nested controller 是被鼓勵的. Nested controller 可以達成 scope inheritance 的效果, 在指定區塊自行開一個 scope.</span><br />
<span style="font-size: large;">4. Inline JavaScript. Angular 有自己的 template engine. 但須注意 Angular template language 有時會與其他 template language 衝突, ex: Jinja2, 此時要更改 Angular template 的 starting / ending symbol.</span><br />
<span style="font-size: large;">5. Dependency injection. 之前有談過 dependency injection (<a href="http://larrysmatchawaffle.blogspot.tw/2013/12/inversion-of-control.html" target="_blank" rel="noopener noreferrer">link</a>). Dependency injection 旨在解除相依性, 在開發當下模組時不用考慮相依模組的進度. Angular 自 controller 以下基本上都是 dependency injection 的概念.</span><br />
<span style="font-size: large;">6. ng-repeat 是一個 powerful directive. 在前端動態增減 table 項目時完全不需對 html component 做操作.</span></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
