第一個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進階教學完成基礎教學後，本章節教你如何處理在非正常情況下，如何完成反序列與序列動作。泛型轉換序列化與反序列化時，客製化輸入出JOSN字串@SerializedName 忽略物件屬性輸出@Expose 泛型轉換泛型做Json序列/反序列時，比較麻煩地方是泛型在運行期間相關的參數就會被抹除所以無法知道原來的類別。我們建立一個播放器(Play)類別，它為泛型的類型，它可撥放MP3、CD等等，所以建立一個CD媒介(CD)類別。Play使用類型為泛型T，物件屬性播放器 Play 類型 type CD媒介 CD 歌 songs /**' * 播放器 * @param */ public class Play { T type ; public Play(T t){ this.type = t; } @Override public String toString() { return this.type.toString(); } } /** * CD 音樂物件 */ public class CD { private List songs ; public CD(String ...songs){ this.songs = new ArrayList() ; for(String song : songs){ this.songs.add(song) ; } } @Override public String toString() { StringBuilder sb = new StringBuilder() ; sb.append(""); for(String s:songs){ sb.append(""+s+",\r\n"); } sb.append("")...

閱讀完整內容

淺談機器學習原理-Nonlinear Transform

Nonlinear Transform 淺談機器學習原理-Nonlinear Transform Nonlinear Transform *通用能力 gerneralization : 就是將訓練好的模型，放到正式環境可以正常的運作，通常Linear Model的gerneralization會比較好，因為線性模型解決的問題比較單純。缺點是應用侷限比較大。參考Chih-Chung Chang老師的範例:縣性與非線性分類範例 https://www.csie.ntu.edu.tw/~cjlin/libsvm/ 非線性問題當如果今天假設要圈出裡面小圈圈的資料，我們就無法使用線性的模型，我們可以用非線性解像圈圈的方程式 s i g n ( − x 1 2 − x 2 2 + r ) sign(-x1^2-x2^2+r) s i g n ( − x 1 2 − x 2 2 + r ) 來解決，在演算法我們利用reduce來將不會的問題透過已知的問題來解決，所以在這個問題我們將圈圈的方程式(非線性模型)reduce成線性模型來解決。 Reduce 方法論我們調整圓形的方程式改為 z 0 z_0 z 0 , z 1 z_1 z 1 , z 2 z_2 z 2 來轉換線性方程式， { ( x n , y n ) } \{{(x_n,y_n)}\} { ( x n , y n ) } => { ( z n , y n ) } \{{(z_n,y_n)}\} { ( z n , y n ) } 在這空間資料中只要能找線，就可將不同的分類區分，圖中可以線性可以線去做分類。透過向量方式來轉換成線性方程式我們找到一個方式將非線性資料X透過向量轉換為Z後，希望透過線性方程式方式來學習，得到正解。當我們Nonlinear transform轉換成線性方程式，當有新的資料進來我們無法使用invertiable(逆向工程)的方式去轉回非線...

閱讀完整內容

無聊看看

搜尋此網誌