第一個AngularJS程式

開始撰寫第一個程式
下載Angular套件:https://angularjs.org/

載入套件:
<script src="angular.js"></script>

宣告Angular’s Boundaries
(1)和(2) 載入的範圍不同，用來告訴Angular該網頁哪個部分需要處理

(1)載入整個網頁為Template
<html ng-app>
…
</html> (2)載入div元素之間為Template
<html>
…
<div ng-app>
…
</div>
…
</html>

完整的網頁

<html ng-app="myList">
<head>
     <title>My Shopping List</title>
     <script src="angular.js"></script> </head>
     <body ng-controller='ListController'>
          <div >
               <div ng-repeat='item in items'>                   <span>{{item.title}}</span>
                   <input ng-model='item.quantity'>
                   <span>{{item.price | currency}}</span>,
                   <span>總價: {{item.price * item.quantity | currency}}</span>
                   <button ng-click="remove($index)">Remove</button>
               </div>
          </div>
     </body>
<script>
    var myApp = angular.module('myList',[]);
     myApp.controller('ListController', function($scope){
          $scope.items=[
               {title:"國語",quantity:10, price:350},
               {title:"英文",quantity:8, price:450},
               {title:"公民",quantity:7, price:350}
          ];
          $scope.remove = function(index) {
               $scope.items.splice(index, 1);
           }
     });</script>
</html>

說明:
ng-app : 用來告訴Angular該網頁哪個部分需要處理，此範例定義在<html>標簽中表示整個網頁都需要處理，。
ng-controller : 宣告控制器用來處理網頁
ng-repeat : 我們將物品陣列利用item的物件逐一的讀取顯示出來，{{item.title}}為資料繫結(data binding)用來將保持網頁上資料同步。
ng-model : 用來建立quantity與{{item.price * item.quantity | currency}} 的關係，當我們改變物品的數量同時也會改變總價。

留言

這個網誌中的熱門文章

JavaBean 和POJO

前言今天介紹JavaBean和POJO的不同，這兩個名詞在JAVA文章常常被拿來使用以及討論。在JDK1.1時候釋出才有的一個標準架構，很多時候常常被搞混，所以我們特別開闢一章來加以討論。POJO規範在企業級應用已經廣大的被使用的規範。解釋 POJO : 全名為Plain-old-Java-object，只需要繼承Object就可以，沒有特定規定，只要建立的類別有setter/getter方法都可以稱為POJO JavaBean: JavaBean通常用來封裝多個物件成為單獨物件使用，規範比較嚴格，規則如下規則說明 1 需要實作序列(Serializable/Externalizable) 2 不能有參數的建構子( no-arg constructor) 3 需要有公用setter/getter 4 屬性必須要私人(private) 5 屬於特定POJO規則比較所有的JavaBean都為POJO，但是所有的POJO不一定為JavaBean 都可以當作重複元件都必須序列化特性都為可用性、易用性和持久化使用 - 應用由圖我們可以知道POJO在應用程式中，主要用來存取資料庫資料達到持久化的目的，並提供給商業邏輯流程處理使用。這種POJO的架構提供程式人員開發時的可以很有規則將資料封裝並加以使用。範例1. JavaBean(以員工為實例) JavaBean建立員工物件，可以發現Employee物件建構子沒有任何參數，屬性為私有化並setter/getter的命名方式。 //實作序列化 public class Employee implements java.io.Serializable{ private int id; private String name; //無參數建構子 public Employee(){} //以下實作setter/getter public void setId(int id){this.id=id;} public int getId(){return id;} public void setName(String ...

閱讀完整內容

GSON基礎教學

GSON 前言 JSON是很常見的資料交換格式，在JAVA領域常用處理JSON的函式庫:GSON、FastXML和JSON-B，本章節會以GSON為主，學習目標如下 JSON格式說明 GSON 套件函式 GSON: 物件轉換JSON字串 GSON: JSON字串轉換物件 JSON 格式說明 JSON全名為JavaScript Object Notation，它是一種輕量級的資料交換格式，會大為流行的理由，主要是他比傳統用xml更輕巧且容易處理， JSON表達方式物件會用大括弧{}，陣列則是用中括號[]。用JSON字串來表達Employee的物件內容，由JSON字串可以知道物件name、age、sex和salary屬性。 JSON表示員工資料方式: {“name”:”Jack Bryant”, “age”:18, “sex”:”M”,”salary”:3500.00} JSON陣列表示方式: 跟我們使用JAVA的陣列方式類似，內容值可以是數字’、文字、布林、陣列、物件、null等等。範例: 字串: [“紅”、”橙”、”黃”、”綠”、”青”、”藍”、”紫”} 布林: [true, true, false, false, true, true] GSON 套件函式 Gson為google所發布的函式庫，主要將物件與json字串之間的轉換時方便使用。當我們將JAVA物件轉換成JSON字串稱為序列化，JSON字串轉換至JAVA物件稱為反序列化。 GSON: 物件轉換JSON字串有了JSON基本概念後，我們進入本章重點，首先我們需要建立員工類別(Employee)，定義如下物件屬性員工類別 Employee name 名字 age 年紀 sex 性別 salary 薪水 /** * name:員工類別 */ public class Employee implements Serializable { //constructor public Employee(String name, double salary){ this.name = name; this.sala...

閱讀完整內容

H2資料庫(1)-基本安裝與介紹

H2資料庫介紹 H2為嵌入式資料庫，使用java開發，跨平台且內含資料庫管理介面，好處開發階段方便開發人員使用。比較詳細比較表: http://www.h2database.com/html/features.html#comparison 由圖比較可以知道，H2比其他資料庫更為優勢，以下會介紹開發時常用的模式: 嵌入式模式Embedded Mode 嵌入式資料庫會與應用程式共用同一JVM底層，在這個模式下persistent或是in-memory資料庫都支援，也沒有連線數的限制。但壞處是只可以給該應用程式使用，其他人無法直接存取資料庫。伺服器模式 Server Mode 外部應用程式可以藉由JDBC或是OBC的方式連結該資料庫，它也支援persistent或是in-memory資料庫，也沒有連線數的限制。混合模式 Mixed Mode 同時有嵌入式與伺服器的模式去讓外部應用程式連線或是自己應用程式連線。安裝H2 database 官方網站: http://www.h2database.com/html/main.html 下載安裝程式出現安裝連結，本次範例使用 Windows installer 的安裝連結下載安裝程式後，點擊兩下，進入安裝畫面，按”下一步” 一直按”下一步”後，會出現”完成” 安裝完成後，會出現一個說明網頁，你可以點選Quickstart 它會告訴你，如何進入DBRMS畫面以及開啟資料庫服務開啟windows的視窗圖示，執行 H2 Console後，會執行H2資料庫進入DBRMS的登入畫面，使用者預設為”SA”，密碼為空值”“，按下”connect”進入，SQL命令中心登入後，可以在空白處執行SQL語法 8.大致上安裝H2資料庫滿快速，操作畫面也是很好上手，如果系統在開發階段個人覺的滿推薦給大家使用看看。參考 H2官方網站

閱讀完整內容

無聊看看

搜尋此網誌