跳到主要內容

Router and Multiple Views

  • Router and Multiple Views 介紹
    在angularJS提供一個很強大的功能叫作路由(router)，主要應用在切換不同model和views，更容易做出SPA( Single Page Application)註一等級的產品。本章我們介紹如何利用ngRoute的模組切換不同的網頁視圖。
註一: SPA 的概念傳統的 HTML 網頁一樣，需要每做一個動作就整個更新網頁，但是SAP希望可以像視窗軟體一樣，只需要變更顯示的內容而不需更新整個網頁。
  • 載入路由功能
    <head>
         <script src="angular.js" />
        <script src="angular-route.js"/></head>
  • 定義路徑與規畫控制器
    我們利用$routeProvider來切換網頁內容，下列範例定/home, /viewItems
    兩個畫面規畫。在mainApp.controller控制器來切換/home, /viewItems的
    之內容。


    itemController.js
    var mainApp = angular.module("mainApp", ['ngRoute']);

    mainApp.config(function($routeProvider) {
       $routeProvider
            .when('/home', {
                templateUrl: 'home.html',
                controller: 'ItemController'
            })
            .when('/viewItems', {
                templateUrl: 'viewItems.html',
                controller: 'ItemController'
            })
            .otherwise({
                redirectTo: '/home'
            });
    });

    mainApp.controller('ItemController', function($scope) {
        $scope.items = [
            {name: 'apple', city:'New York'},
            {name: 'banana', city:'London'},
        ];

        $scope.message = "Click on the hyper link to view the item list.";
    });
    說明:
    (1)var mainApp = angular.module("mainApp", ['ngRoute']);
    加入ngRoute模組為應用程式

    (2)$routeProvider :用來規化路由，其中when()方法是由path和route當做參數，path為#符號的路徑;route裡面有兩個參數分別為templateUrl用來指定網頁檔案以及controller控制器來指定控制器

    syntx:   when(path, route)

    (3)mainApp.controller: 控制器功能實做


    home.html
    <body ng-controller="ItemController">
        <div class="container">
            <h2> Welcome </h2>
            <p>{{message}}</p>
            <a href="#/viewItems"> View Items List</a>
        </div>   
    </body>

    viewItems.html
    <div class="container">
        <h2> View Items </h2>
        Search:
        <br/>
            <input type="text" ng-model="name" />
        <br/>
        <ul>
            <li ng-repeat="item in items | filter:name">{{item.name}} , {{item.city}}</li>
        </ul>
    </div>

留言

張貼留言

這個網誌中的熱門文章

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 ...
張貼留言
閱讀完整內容

Python AI-手寫辨識

Python AI-手寫辨識 類神經網路-手寫辨識 手寫辨識 (1) 問題定義 將輸入手寫數字圖片，經由類神經網路訓練後，可以辨識手寫圖片得到一個正確的答案，例如讓電腦辨識上面圖片手寫數字0-9，都可以認得．在了解問題後，需要先知道輸入的資料格式，例如圖片為NxN的矩陣向量． 輸入：輸入的資料格式有很多種，例如數字圖片為矩陣向量 模型：ＮＮ 輸出：輸出的方式，神經網路輸出不一定跟輸入同值，手寫數字輸入為1，輸出有可能是1.1或是1.5等等，所以輸出必須經過轉換成真實世界的數字． (2)定義函式 輸出會有兩個問題： Ａ.輸出利用one-hot encoding來表示，就是Ｎ個狀態會對應Ｎ的結果，例如：輸出結果為1，表示[0,1,0,0,0,0,0,0,0,0] B.輸出結果不能超過1，我們通常會利用 Softmax函数 來進行輸出的處理． (3) 準備訓練/測試資料 在這邊需要從輸入去定義那些要當作訓練與測試資料，我們手寫資料使用MNIST 資料庫來訓練使用，MNIST共有70,000筆手寫資料，60,000筆為訓練資料，10,000為測試資料． (4)建構類神經網路模型 開始建構我們的神經網路模型，首先決定好28x28的像素(這邊不用擔心如何將圖片轉成矩陣)，模型使用ＳＧＤ的方式進行學習，輸出是一個10為的陣列來表示． 輸入：手寫數字圖片(28x28=784) 模型：ＳＧＤ 輸出：數字(one hard encoding) (5)學習 首先介紹SGD(Stochastic Gradient Descent) 的學習方式，因為蕾神經網路需要訓練很多次才會提高準確度，SGD最大的好處就是當每次重新學習的會將訓練資料打散，來防止機器學習將答案死背下來． (6)實作開發 下面程式碼有完整的說明，這邊就不多說明了，當開始執行程式時就會進行資料訓練． 由訓練結果最後acc=0.9447，表示準確率可以到達94%，我們再由實際測試可以看出該圖為7的圖示，由神經網路判斷為7，跟我們人類判斷相同，我們可以知道由訓練的結果可看得到不錯的準確度． 執行神經網路遇到不少問題，請參考下面連結，是筆者所整理的問題集，請多多指教 https://programdoubledragon.bl...
2 則留言
閱讀完整內容

Python AI-問題集

Python AI-問題集 問題集 Jupyter Notebook執行ipywidgets會出現kernel死掉的錯誤發生(The kernel appears to have died) 解決方法 (1) 根據log檔來判斷問題： 例如：log訊息出現OMP: Error #15: Initializing libiomp5.dylib, but found libiomp5.dylib already initialized. (2) 根據問題關鍵字找出問題所在： 利用google查詢所遭遇到的問題，例如我把上面的問題上google查詢可以找到這篇的解法 https://blog.csdn.net/bingjianIT/article/details/86182096 (3)實作解法： 我實作下面解法後，就可以順利執行手寫辨識的程式． //在Python宣告時加入 import os os.environ["KMP_DUPLICATE_LIB_OK"]="TRUE" 參考 https://blog.csdn.net/bingjianIT/article/details/86182096
1 則留言
閱讀完整內容