跳到主要內容

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>

留言

張貼留言

這個網誌中的熱門文章

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

PHP與Python搭配

今天介紹如何利用php網頁呼叫目錄下的python程式工作或是資料交換，本人整理的方法有兩種 使用system()、exec()、shell_exec()呼叫程式 (1) string system ( string return_var ] ) 參考網址 官網解釋system()用來執行外部命令，返回為印出的結果，passthru()跟system()類似但是它不會返回結果。 範例1. 利用system執行ls指定並顯示在網頁上，無法使用變數保留ls的結果 檔案名稱: psystem.php $jsondata= system("ls -al", $result); 結果: (2) exec() : string exec ( string output [, int &$return_var ]] ) 參考網址 範例2. 利用exec執行python程式並可以回傳json格式給前端網頁做處理並顯示。我們ptopy.php就是可以看到callpy()為執行py的函式，它執行完pyEx01.py會將結果給$jsondata變數，做後面json解析。 檔案名稱: ptopy.php function callpy() { $jsondata= exec("/usr/bin/python pyEx01.py"); return $jsondata ; } $jsondata= callpy(); echo $jsondata ; echo " " ; $obj = json_decode($jsondata) ; echo "name:".$obj-> { 'name'} .',' ; echo "id:".$obj-> { 'id'} ; 檔案名稱: pyEx01.py import sys ...
張貼留言
閱讀完整內容

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