發表文章

目前顯示的是 2014的文章

AngularJS (18) ng-include 匯入外部HTML

本篇範例的( Plunker Demo ) ng-include用來匯入外部HTML。 網頁隨著開發,會越來越冗長,所以將網頁模組化能增加維護的效率。 方式一, 直接輸入網址字串 'header.html' <body ng-app="app1"> <div ng-include src="'header.html'"></div> </body> 要注意需要 '  ' 方式二, 也可以先在controller定義網址的字串變數。 .controller('MyController', function($scope){ $scope.headerUrl = 'header.html'; }); 然後在MyController的範圍內呼叫就可以了。 <div ng-include src="headerUrl"></div> 也可以省略src <div ng-include="headerUrl"></div> 要注意的是, ng-include官方文件 說明ng-include只能插入同網域的網頁 By default, the template URL is restricted to the same domain and protocol as the application document. For example, ngInclude won't work for cross-domain requests on all browsers and for file:// access on some browsers.

AngularJS (17) value

在 第16篇的AngularJS 談到factory()和service(),它們叫做「服務提供者(provider)」,可以包裹函式再提供給控制器使用。 value()也是一個服務提供者,讓你可以包裹一些常用的值,字串、數字、json都可以。 例如: myApp.value("intValue", 100); myApp.value("strValue", "This is a string."); myApp.value("jsonValue", [{name:'Lily'}]); 需要value時,就匯入value名稱到控制器即可。 myApp.controller("myController", ['$scope', 'strValue','intValue','jsonValue', function($scope, strValue, intValue, jsonValue){ $scope.str = strValue; $scope.integer = intValue; $scope.myjson = jsonValue; }]); This is a string. 100 Lily 範例程式碼( Plunker ) 同樣地,value()只能給控制器用,不能在HTML呼叫value()。

AngularJS (16) factory 和 service

本篇範例程式碼( Plunker ) 我們可以在控制器裡面寫函式,這一點你應該知道。你也許會發現當你有太多的成員函式時,會讓控制器程式碼變得太長。 app1.controller("myController", ['$scope', function($scope){ $scope.add = function(val1, val2){return val1+val2;}; $scope.sub = function(val1, val2){return val1-val2;}; $scope.int1 = $scope.add(10,20); $scope.int2 = $scope.sub(50,30); }]); 為了方便管理程式碼,AngularJS提供了factory()和service(),把函式包在一個「服務提供者(provider)」。 Factory 改寫上面的例子,我們宣告Maths為factory物件,負責提供add和sub這兩個函式。 myApp.factory("Maths", function(){ var fact = {}; fact.add = function(a, b) { return a + b; }; fact.sub = function(a, b) { return a - b; }; return fact; }); 或是可以批次定義 myApp.factory("Maths", function(){ return { add: function(a, b) { return a + b ;} sub: function(a, b) { return a - b; }; } }); Service 我們也可以用service() myApp.service("Maths", function(){ this.add = function(a, b) { return a + b; }; this.sub = function(a, b) { return a - b; }; });

AngularJS (15) UI Bootstrap

本篇範例的( Plunker Demo ) 大致上,Bootstrap這個網頁框架只支援JQUERY。不過現在,AngularJS 團隊做了網頁框架Bootstrap的擴件,UI Bootstrap,用AngularJS取代了 bootstrap.js jquery.js 所以,當你想要使用UI Bootstrap的元素時,你只需要匯入bootstrap.css、Angular.js、和ui-bootstrap.js。 <!-- bootstrap.css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Angular.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script> <!-- ui-bootstrap.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script> 標籤集(tabset) {{tt.content}} 程式碼 <div ng-app="app15"> <div class="container" ng-controller="MyController"> <tabset> <!-- 頁面 --> <tab ng-repeat="tt in tabs"

AngularJS (14) <form required> 欄位是否為空

本篇程式碼請看( Plunkr ) 名字不可為空 地址不可以為空 作法 首先,幫你的表格取名 <body ng-app="app1"> <form name="myform"> <!-- 待會要寫<input> --> </form> </body> 先加入一組<input>、以及警告訊息。 首先,<input>必須有name和required這兩個屬性: name: 建立欄位和警告訊息的對應關係。 required: AngularJS 提供的檢查子,對應的驗證變數是 $error.required。 <input name="aa" ng-model="myform.username" required/> 接著,當myform的aa欄位為空字串時,我們希望出現它的警告訊息。 所以我們利用required,當欄位為空 →→ required = true →→ 顯示對應的警告訊息。 <span ng-show="myform.aa.$error.required">名字不可為空</span> 剛剛為什麼要取名?因為要保證這行警告訊息只會取決於myform.aa是否是空欄位。 另外一組就是如法炮製啦!只是將<input>取名為bb。 <input name="bb" ng-model="myform.address" required/> <span ng-show="myform.bb.$error.required">地址不可以為空</span>

AngularJS (13) <form name=""> 區分所屬表格

大家應該都看過表格取名,name <form name="form1"> 這有什麼幫助嗎?當然!當你撰寫多個表格時,如果沒有name,你可能要不時翻找這筆輸入來自哪個表格。 好比說,你做了三個表格: <body ng-app="app1" ng-controller="Controller1"> <form><input ng-model="username"/></form> <form><input ng-model="address"/></form> <form><input ng-model="phone"/></form> ...(這中間你可能還有一長串的html) {{username}} {{address}} {{phone}} <!--糟糕,這幾個東西來自哪個表格?--> </body> 這可能造成你不容易修改表格,或是得反覆確認表格的值對應到哪個函式,例如:表格一的輸入要給變數甲,但是表格二的要給乙。挺累人吧? 若是表格加入name,AngularJS會把表格的名稱做為「區域名稱」,就能大大改善前述問題。 <body ng-app="app1" ng-controller="Controller1"> <form name="form1"><input ng-model="form1.username"/></form> <form name="form2"><input ng-model="form2.address"/></form> <form name="form3"><input ng-model="form3.

AngularJS (10-2) $http.get 讀json

本篇完整程式碼:( Plunkr ) $http.get('XXX.json') 就可以讀取json檔了。若你不清楚$http.get()或是.success(),請看前一篇文章: AngularJS (10) $http.get 讀檔 實例 我有兩個人的資料,人名和地址。我想把他們顯示在網頁上。 Lily, ooh Ihc, lala test.json text.json 用到兩種括號,意義是 [] = array,{} = list。字串要有" "。 [ { "name":"Lily", "addr":"Hualien" }, { "name":"Ihc", "addr":"Taipei" } ] HTML 假設我們只是想要印出人名和地址,這樣寫就夠了。注意,不管在HTML或是JS,json變數的.name, .addr不需要" "。 <body ng-app="app1" ng-controller="HelloController"> <p ng-repeat="item in list"> {{item.name}}, {{item.addr}} </p> </body> JS 初始化一個空陣列$scope.list,再用$http.get()讀取text.json。 var app = angular.module("app1",[]) app.controller("HelloController", ['$scope','$http',function($scope, $http){ $scope.list=[]; $http.get('test.json').success(function(data

AngularJS (11) $http.get + templateUrl + scope 讀檔後匯入樣版

本篇完整程式碼請看 Plunkr 我們在前一篇也說過,控制器可以定義值,再透過它範疇內的宣告標籤傳值到樣版。範疇的大致概念如下: <div ng-controller="某控制器"> <宣告標籤></宣告標籤> </div> 而樣版就像是句型一樣,讓我們可以餵值進去。 但是,如果餵進去的數值很多時,有沒有可能用讀檔的方式把大量的值傳給樣版呢?答案是可以。 大致解法是,先用$http.get()讀變數檔,再透過宣告標籤的templateUrl、scope將$http.get()的值餵給樣版。這麼說有點籠統(掩面),我們來看實例吧。 實例 今天你有了六個朋友的資訊,人名、地址,希望把他們照某個樣版顯示。 Lily Hualien Ihc TsiongHua Suisui2 Hualien Suisui Hualien Piggu Hualien Chhueh TsiongHua I'm ________, and I come from ________.  這是你想要的樣版。 朋友資訊那麼多,而且以後還會一直增加新好友,你當然就不希望把朋友資訊寫死在script,以免不容易維護程式。所以,最好的解法就是把你朋友的資料寫在一個文字檔,並用script去讀取它。 朋友資訊.txt Lily Hualien Ihc TsiongHua Suisui2 Hualien Suisui Hualien Piggu Hualien Chhueh TsiongHua template.html I'm {{friendName}}, and I come from {{friendAddr}}.<br/> 它存了句型 I'm ________, and I come from ________. 。 人名和地址的填空處用樣版變數friendName,friendAddr表示。 JS 第一步:在控制器用$http.get()讀檔 要能夠顯示朋友的資料,當然首要做的就是讀出朋友資訊.txt的值,存到某個陣列變數內。作法如下 app = angular.module("app1",[])

AngularJS (10) $http.get 讀檔

有時候,你可能希望一些變數的數值或是文字資料能夠用匯入網頁的方式,方便隨時修改或更新資料,那麼$http.get()可以幫助你。 $http.get(檔名) 幫你讀取檔案到script內,不論是.txt 或是 .json。 實例 ( Plunkr ) 假設你今天想在網站上,秀出六位好友的名單。 Lily Ihc Suisui2 Suisui Piggu Chhueh 你可以把他們的名字直接寫成一個陣列,但以後就得不斷到此更新朋友名單,並不是很方便。所以,乾脆把他們的名字存成一個文字檔吧! 朋友名單.txt Lily Ihc Suisui2 Suisui Piggu Chhueh index.html 我們先決定一下要怎麼呈現朋友名單,那......直接印出來吧!同時也宣告ng-app和ng-controller。 <body ng-app="app1"> <div ng-controller="NameController"> <p ng-repeat="name in list">{{name}}</p> </div> </body> list 是控制器NameController的陣列變數,用來儲存朋友名字。 JS 我們在控制器用$http.get(...)讀出一個個名字,並丟進變數list中,才能讓index.html正常顯示朋友名字。 var app = angular.module("app1",[]); app.controller('NameController', ['$scope', '$http', function($scope, $http) { $scope.list = []; $http.get('朋友名單.txt').success(function(data){ angular.forEach(data.split('\n'), function(name, ind){ $

Bootstrap3.2.0 起首用container還是container-fliud?

圖片
我個人啦,認為寫網站第一步,比較麻煩的就是定出網頁最外圍的版面大小。 有時,為了寫滿版的網頁,需要先確定body的高度是100%。 body { height:100%; } ... 有時,可能得先寫出某個適當寬度的外框,不是寫死寬度,就是寫好相對寬度的百分比之後,還得設min-height以防網頁縮小後跑版。 .wrapper { width:793px; } 或是 .wrapper { width:50%; height:50%; min-width:400px; min-height:50px; } /*可能還得加上 @media screen and (min-width:???px)...唉 @_@*/ 不過,Bootstrap3框架已經幫我們定義好網頁大小的基本版型,所以上面的問題都能輕鬆解決囉。 .container <body> <div class="container"> ... </div> </body> .container 幫我們定義了適當寬度(適不適當就見仁見智啦...),也就是左右有稍微留白。很適合簡單的網誌或是小型網站。 螢幕寬度>768px,.container 750px 螢幕寬度>992px,.container 970px 螢幕寬度>1200px,.container 1170px .container-fluid <body> <div class="container-fluid"> ... </div> </body> .container-fluid沒有設寬度,所以一直是滿版,適合用在需要一直滿版的網站。 以上介紹到這,來看看兩者實際上的差異。 .container vs .container-fluid ( Plunkr ) <body> <div class="container-fluid">...</div> <d

AngularJS (9) directive templateUrl與scope

圖片
本篇完整程式碼請看 Plunkr HTML樣版,既然是為了讓HTML更有組織性、更好管理,除了像 AngularJS (8) directive templateUrl 儲存一般的字串,其實樣版就像中文句型一樣,可以替換文字。 以中文句型來說, 我的名字是     Lily   我的名字是     Ihc   我的名字是  _____ 這個句型其實就是一個樣版。 要丟進樣版的值從哪裡來?宣告標籤會沿用控制器的作用範疇,連結控制器的變數到樣版的變數。簡單來說 <div ng-controller="控制器1"> <宣告標籤></宣告標籤> </div> 和 <div ng-controller="控制器2"> <宣告標籤></宣告標籤> </div> 雖然都用同一個宣告標籤,但是上面的宣告標籤沿用控制器1的scope,下面的宣告標籤則是沿用控制器2的scope。 什麼是「宣告標籤沿用控制器的作用範疇」? 延續 AngularJS (8) 用樣版顯示兩次歡迎文字後,我們還想要在第一頁印出兩位網誌作者的名字。 Hi, I'm the author LILY. Hi, I'm the author IHC. 當然嚕,你不覺得Hi, I'm the author  _____ 可以做成一個樣版嗎?就來做吧! 作者樣版.html The author {{authorInfo.name}}.<br /> authorInfo是要替換文字的變數,authorInfo.name則是要替換的name值。 JS 控制器 樣板只是句型,要替換的作者名字存在控制器裡,為了方便直接用兩個變數分別存名字。 app.controller('myControl', ['$scope', function($scope) { $scope.lily = { name: 'LILY' }; $scope.ihc = { name: 'IHC' }; }]);

AngularJS (8) directive templateUrl

本篇完整程式碼請看( Plunkr ) 當HTML很長或是有重複的內容時,為了讓HTML更好管理、更有組織,所以將很長的內文或是重複的內容抽出放到樣版(template)裡,讓HTML模組化。 AngularJS的宣告標籤有個參數,templateUrl,指定要匯入哪份樣版到HTML頁面。而且,宣告標籤的位置,就決定了樣版匯入到HTML的地方。 舉個例子,我們想在網頁第一頁的開頭顯示一段歡迎文,讓網友覺得親切。 Hello, everyone. Welcome to Titiau. 如果是一般的HTML寫法: <body ng-app="app1"> <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> </body> 問題是,這個歡迎文可能很常用,總不能一直複製貼上吧? <body ng-app="app1"> <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> ... <p> Hello, everyone.<br/> Welcome to Titiau.<br/> </p> ... <!--看起來好像蠻冗長的?^_^"--> </body> 所以我們不直接寫死在第一頁,而是把歡迎文字寫到一個樣版。 歡迎文字的樣版 greet.html Hello, everyone.<br/> Welcome to Titiau.<br/> <br/> JS 為了能夠匯入歡迎樣版到第一頁,我們得定義一個連結到歡迎樣版的宣告標籤。 var app = angular.module("app1",[]); app.directive(&

ng-repeat無法顯示重複元素的解法

<p ng-repeat="num in [1,1,1]">{{num}}</p> 會出現ERROR訊息"duplicates in a repeater are not allowed", 因為ng-repeat不允許重複元素。 解決方法 <p ng-repeat="num in [1,1,1] track by $index">{{num}}</p> 1 1 1

Bootstrap3.2.0 導覽列寫法拆解

圖片
最基本的導覽列框架整理如下,因為我自己被表太多次了(XD)。至於導覽列的內容請再參考 bootstrap3的navbar ,若有機會再補上。 .navbar 起手式 <body> <div class="navbar" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body> .navbar .navbar-default 基本背景樣式 .navbar-default 使得導覽列有淺灰漸層的背景。 <body> <div class="navbar navbar-default" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body> .navbar .navbar-static-top 置上 .navbar-static-top 置上,不過它會增加1px的border,讓導覽列稍微被撐寬。 <body> <div class="navbar navbar-static-top" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body> .navbar .navbar-fixed-top 置上 <body> <div class="navbar navbar-fixed-top" role="navigation"> <a class="navbar-bran

AngularJS (7) directive 自定元素

directive的基本介紹 有提到,directive宣告子可以讓我們 自定屬性  <div my-dir> 自定元素  <my-dir> 自定CSS  <div class="my-dir"> 注意到自定元素不同於自定屬性,可以直接當作<...>。但其實,自定元素只要比自定屬性多一個restrict參數就好了! Restrict 官方的宣告子說明 提到,預設宣告子只可以自定屬性,所以若是要自定元素或是CSS樣式,必須要修改restrict。以下為restrict的選項: 'A' - 只能用在 自定屬性 'E' - 只能用在 自定元素 'C' - 只能用在 自定CSS 也可以合併使用 'AEC' - 用在 自定屬性、元素、和CSS 自定元素的實例 先看看用自定屬性印出"Hello world!!"的例子 <body ng-app="app1"> <div my-greet></div> </body> 自定屬性的宣告方式 var app1 = angular.module("app1",[]); app1.directive('myGreet', function(){ return { template: "Hello world!!" }; }); 要改成自定元素啦!把return裡面加上參數restrict,指定宣告子myGreet是自定元素。 return { restrict:'E', template: "Hello world!!" }; 修改一下HTML <body ng-app="app1"> <!-- <div my-greet></div> 這是自定屬性--> <my-greet> </b

AngularJS (6) directive 基本介紹

directive , 宣告子 ,讓我們自定屬性、標籤、或是CSS樣式。 <div my-dir> <my-dir> <div class="my-dir"> 目前我知道的,宣告子用來匯入外部HTML、綁定javascript事件如滑鼠或鍵盤、和控制器溝通。 宣告子的命名方式,在javascript用駝峰式大小寫(camel-case)。 "myDir" 在HTML建議用破折號(dash-delimited format)。 <my-dir> 先來看自定屬性的宣告方式,下篇再聊如何自定標籤和自定CSS。 一個宣告子 ( Plunkr ) 我們想要印出"Hello world!!"字樣,首先在<head>宣告了my-greet。 <head> <script> var app1 = angular.module("app1",[]); app1.directive('myGreet', function(){ return { template: "Hello world!!" }; }); </script> </head> 在<body>呼叫自定屬性的myGreet,在HTML改稱為my-greet。 <body ng-app="app1"> <div my-greet></div> </body> 一個宣告子和一個控制器 宣告子可以使用控制器的變數。正確來說,宣告子沿用控制器的scope。 我們改寫上例,用控制器儲存名字 "Lily" 。 <body ng-app="app1"> <div ng-controller="HelloController"> &l

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) (未完待續) --- 如果不是為了血海深仇,一隻肉豬,怎麼會累積多年的怨恨而修練成妖精? 如果不是為了愛情,一名善良敦厚的男子,怎麼會為了弭平豬精內心的傷痛, 而拋棄原本光明美好的前途,甘於只當一名養豬戶? 到底豬精背後有什麼慘無人寰的身世背景,抑或豬精與男子又是否能得到一生的幸福呢? 下一回 戲說台灣「人妖之戀 豬精非豬也」,將會把故事完整重現!敬請期待!