發表文章

目前顯示的是 7月, 2014的文章

AngularJS (5) ng-controller 批次宣告

如果你想要在一個app內快速定義多個控制器,好比說印出不同的歡迎字串,你可以試看看批次的 相依注入宣告 。 ng-controller 批次的相依注入宣告 <head> <script> var app1 = angular.module("app1",[]); app1.controller({ "HelloController": ['$scope', function($scope){ $scope.words = "Hello! I'm Lily."; }], "HelloController2": ['$scope', function($scope){ $scope.words = "GoodBye. See you tomorrow."; }] }); </script> </head> <body ng-app="app1"> <div ng-controller="HelloController"> {{words}} </div> <div ng-controller="GoodByeController"> {{words}} </div> </body> {{words}} {{words}} 如果你只想要簡單定義一個控制器,可以參考看看我的前一篇 AngularJS (4) ng-controller宣告 。

AngularJS (4) ng-controller 宣告

以下完整程式碼: Plunker Demo 先由ng-app劃出了整個網頁內angularJS的運作範圍,再由ng-controller決定要執行的事件。 ng-controller在 AngularJS (1) 宣告ng-app 、 AngularJS 用$filter(2) 已經出現幾次,多是用來存放在HTML顯示的變數數值、或是對變數的處理。所以啦,先了解控制器的宣告方式,之後就可以隨你需要去寫控制器的內容嚕。 簡單的例子總是比較好入手,我們希望能印出歡迎字樣: "Hello! I'm Lily." <body> <body ng-app="app1"> <div ng-controller="HelloController"> {{ greet }} </div> </body> 寫好了body,接下來就來看看ng-controller的宣告方式 ng-controller 直接宣告 <head> <script> var app1 = angular.module("app1",[]); function HelloController($scope){ $scope.greet = "Hello! I'm Lily."; } </script> </head> $scope 引數為HelloController的物件指標, $scope.greet 也就是HelloController的物件的內部變數。 HelloController被宣告為全域的控制器。網頁內若有多個app都可以呼叫它。可以更直接的,宣告&ltbody ng-app>表明angularJS的有效範圍包含整個&ltbody>即可,不需要指定&ltbody ng-app="app1">也不用在<script>宣告app1。 <head

AngularJS (1) 宣告ng-app

圖片
angularJS 官網 在要開始學習angularJS之前,先玩一下這個範例吧↓ 你輸入的是: {{ greet }} 玩過上面的小程式後,就可以很明顯感覺到它的獨特之處 提供了資料的雙向綁定,讓使用者輸入後直接更新網頁程式的變數。 即時預覽,使用者輸入後不需要重新整頁,增加網頁的親合度。 Web 程式輕量化,減少開發負擔 再舉google搜尋和臉書為例,google圖片搜尋結果會隨著使用者往下瀏覽時,自動新增圖片。臉書也是,你可以在任意文章上面留下回應而不需要等待重整網頁,跳出新文章時也不影響你瀏覽其他文章。 介紹完angularjs後,接下來就要進入本文的重點寫程式啦。別擔心,我們當然會從簡單的開始學。 在<head>匯入AngularJS <head> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> </head> ng-app 的基本宣告 ng-app 宣告了angularJS在HTML的作用範圍。當angularJS看見ng-app時,就會自動初始化(auto-bootstrap)此範圍內的腳本程式。 請注意( ng-app的說明 )!原則上,一個網頁只可以宣告一次ng-app。若是你想要網頁上同時有多個ng-app,需要手動宣告。 在<html>或<body>宣告 <html ng-app> <body> <div> 1 + 2 = {{1+2}} </div> </body> </html> <html> <body ng-app> <div> 1 + 2 = {{1+2}} </div> &l

AngularJS (3) 讓網誌顯示angularjs程式碼

有的時候,你可能會讓整篇網誌都在ng-app的範圍內,方便寫出實際體驗的範例。但是當你用<pre>筆記angularJS程式碼的寫法,angularJS卻連<pre>內的{{...}} angular程式碼都一起計算了。為了讓網誌正常顯示angularjs程式碼,可以用ng-non-bindable。 原本 <pre class="prettyprint"> <body ng-app="app2"> <div ng-controller="XXX"> {{ 1+2 }} </div> </body> </pre> 這是網誌的原碼 &lt;pre class=&quot;prettyprint&quot;&gt; &lt;body ng-app="app2"&gt; &lt;div ng-controller=&quot;XXX&quot;&gt; {{1+2}} &lt;/div&gt; &lt;/body&gt; &lt;/pre&gt; 為了確保angularjs不會去計算 {{1+2}} , {{1+2}} 要改寫成 <span ng-non-bindable> {{1+2}} </span> 修改後的完整網誌原碼 &lt;pre class=&quot;prettyprint&quot;&gt; &lt;body ng-app="app2"&gt; &lt;div ng-controller=&quot;XXX&quot;&gt; <span ng-non-bindable> {{1+2}} </span> &lt;/div&gt; &am

AngularJS (2) 用 $filter 轉換數值和過濾

在前一篇( 宣告ng-app )用ng-app宣告網頁的AngularJS執行範圍, 基本上,ng-app宣告之後,就可以使用angularJS作一些基本運算,或是轉換。 filter 是angularJS提供的運算子,可以對數值作的轉換或是附加處理。它的寫法就像是LINUX的Shell script的pipe運算。 例如,currency幫你把數字標記成金額: <head> <script src="angular.js"></script> /*以下的例子視為已有此檔*/ </head> <body ng-app> {{ 1+2 }} 金額:{{ 1+2 | currency }} 新台幣:{{ 1+2 | currency:"NT$" }} </body> {{ 1+2 }} 金額:{{ 1+2 | currency }} 新台幣:{{ 1+2 | currency:"NT$" }} filter 在HTML和javascript的寫法 前面例子是 filter 在HTML的寫法     {{ currency_expression | currency : symbol }} javascript寫法      $filter ('currency')(symbol) javascript的完整寫法,是在控制器的引數列加入 $filter 的宣告,告訴angularJS此控制器需要用到filter功能。 <head> <script> var app1 = angular.module("app1",[]); app1.controller("MoneyController", function($scope,$filter){ $scope.pay = $filter("currency")(3); $scope.payNT = $filter(

讓Blogger的程式碼上色

圖片
在前一篇 ,可以看見程式碼是彩色的。 這是用到Google自己開發的 Prettify script,將程式碼上色。 加入Prettify script到網誌管理介面 到Blogger網誌管理介面「我的網誌」→「版面配置」→「新增小工具」的「HTML/JavaScript」 貼上這行程式碼 <script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> 在文章→撰寫html,將程式碼加上CSS樣式prettyprint 原本在Blogger的html如下: <pre class="codeblock"> <body ng-app> <div> <p>1 + 4 = {{ 1+4 }}</p> <input ng-model="ttt"/> <p>The input is: {{ttt}}</p> </div> </body> </pre> 加上 prettify後 <pre class="codeblock prettyprint"> <body ng-app> <div> <p>1 + 4 = {{ 1+4 }}</p> <input ng-model="ttt"/> <p>The input is: {{ttt}}</p> </div> </body> </pre>

Blogger放置程式碼

圖片
想要呈現這段程式碼 <body ng-app> <div> <p>1 + 4 = {{ 1+4 }}</p> <input ng-model="ttt"/> <p>The input is: {{ttt}}</p> </div> </body> 要在Blogger加入這段程式碼,請到 「我的網誌」→「發表文章」→ 選取你要編輯的文章 →「撰寫HTML」 中貼上程式碼。 建議使用<pre>而非<div>,維持程式碼的縮排。 <pre class="codeblock prettyprint"> <body ng-app> <div> <p>1 + 4 = {{ 1+4 }}</p> <input ng-model="ttt"/> <p>The input is: {{ttt}}</p> </div> </body> </pre> 因為角括號和引號在html裡面是特殊符號,不能直接貼上html編輯器的程式碼到Blogger。 若想手動修改html程式碼 <改成&lt; >改成&gt; " "改成&guot; &guot; 若嫌麻煩可以用 HTML Encoder ,可以很方便的轉換程式碼為Blogger可以顯示的內容。完成了Blogger的html如下:

書生與豬精

這是一個書生與豬精的淒美愛情故事.... 戲說台灣之 「人妖之戀 豬精非豬也」 妹妹:今仔日的哥哥看起來跟平常不太一樣,一定是想欲講什麼故事咧? 哥哥:沒錯!我今仔日欲跟大家講的,是一個咱台灣最淒美的、最可歌可泣的人與妖的愛情故事啊!~~ 妹妹:愛情故事?那這樣,一聽故事介紹......聽起來,這一定是非常精采的故事吧? 哥哥:沒錯!           而且妳聽清楚喔,這~不只是人妖之戀,還是「人與『豬精』」的愛情故事! 妹妹:欸‧欸‧欸,你是講笑還是練瘋話?哪有可能人去愛上豬咧?                     我係常常聽到有人講他愛吃豬肉,愛吃炸豬排,愛養迷你豬啦。           但人愛上豬精這實在是吼,你嘛拜託~笑死人喔? 哥哥:妳真是沒不識字還兼沒衛生捏。                      這段故事在花蓮這呢有名,妳是花蓮人,更加應該聽過啊! 妹妹:花蓮故事啊?好吧,這若是真的係花蓮故事,那的確是不得不知了。            人常說,「飲水思源」,要好好了解自己的家鄉的大小事,才真正叫花蓮人。 哥哥:沒錯沒錯,整欉好好! 妹妹:那接下來~~就 有請 哥哥你來好好講這個故事,幫你妹妹我增加一些地方知識嚕~~ 哥哥:就交給哥哥我吧。~~ 哥哥:欸~這故事一開始啊,就要從這豬精的原生家庭開始說起。 遏袂(a be) (未完待續) --- 如果不是為了血海深仇,一隻肉豬,怎麼會累積多年的怨恨而修練成妖精? 如果不是為了愛情,一名善良敦厚的男子,怎麼會為了弭平豬精內心的傷痛, 而拋棄原本光明美好的前途,甘於只當一名養豬戶? 到底豬精背後有什麼慘無人寰的身世背景,抑或豬精與男子又是否能得到一生的幸福呢? 下一回 戲說台灣「人妖之戀 豬精非豬也」,將會把故事完整重現!敬請期待!