Ionic學習總結

一、Ionic概念
ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。
Hybird：混合模式移動應用。
Ionic主要分爲Ionic CSS 和Ionic JavaScript，

二、Ionic安裝
可查看右邊的網址安裝：http://www.runoob.com/ionic/ionic-install.html

三、IonicCSS

常用標籤

ion-side-menus 側欄菜單組

ion-side-menu-content 側欄菜單內容

ion-nav-view 導航視圖

ion-side-menu 側欄菜單

ion-footer-bar 底部

ion-header-bar 頭部

ion-content 文本

ion-view 視圖

ion-option-button select選項

ion-tabs tab組合

ion-tab tab欄

ion-delete-button 刪除按鈕

ion-reorder-button 記錄按鈕

ion-list 列表

ion-item 列表項

button 按鈕

ion-pane 面板

ion-spinner 加載動畫

ion-toggle 開關切換

ion-slide-box 側邊框

ion-checkbox 複選框

ion-radio 單選框

ion-refresher 刷新

ion-side-menus ：是一個帶有邊欄菜單的容器，可以通過點擊按鈕或者滑動屏幕來展開菜單。
- 屬性enable-menu-with-back-views，布爾值，在返回按鈕顯示時，確認是否啓用側邊欄菜單。
- 屬性delegate-handle，字符串，該句柄用於標識帶有$ionicScrollDelegate的滾動視圖。
ion-side-menu-content：展示主要內容的容器，可以通過滑動屏幕來展開menu。
- 屬性drag-content，布爾值，內容是否可被拖動，默認爲true。
ion-nav-view：導航。
ion-side-menu：存放側邊欄的容器。
- 側欄菜單的容器，同級的一個ion-side-menu-content 指令。
- 屬性side，字符串，側欄菜單當前在哪一邊。可選的值有: ‘left’ 或 ‘right’。
- 屬性is-enabled，布爾值，該側欄菜單是否可用。
- 屬性width，數值，側欄菜單應該有多少像素的寬度。默認爲275。
- 通用屬性menu-toggle，在一個指定的側欄中切換菜單。
- 通用屬性menu-close，關閉當前打開的側欄菜單。
ion-footer-bar：屏幕的底部。
ion-header-bar：菜單欄頭部。
- bar-light 樣式白色
- bar-stable 白框
- bar-positive 藍色
- bar-calm 淡藍色
- bar-balanced 綠色
- bar-energized 黃色
- bar-assertive 紅色
- bar-royal 淡紫色
- bar-dark 黑色
- bar-subheader 副標題
- bar-footer 底部
- pull-right 居右
- 屬性 align-title=”left/right/center”，對齊title
- 屬性 no-tap-scroll，默認情況下，頭部標題欄在點擊屏幕時內容會滾動到頭部，可以將 no-tap-scroll 設置爲 true 來禁止該動作。它的值是布爾值（true/false）。
  示例：

<div class="bar bar-footer bar-calm">
  <button class="button button-clear pull-right">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

ion-content：內容。
ion-view 視圖，屬於ionNavView。一個內容的容器，用於展示視圖或導航欄信息。
- 通過cache-view=”false” 屬性禁用緩存。
ion-option-button
ion-tabs 是有一組頁面選項卡組成的選項卡欄。可以通過點擊選項來切換頁面。
- 屬性delegate-handle，字符串，該句柄用$ionicTabsDelegate來標識這些選項卡。
ion-tab 隸屬於ionTabs，包含一個選項卡內容。該內容僅存在於被選中的給定選項卡中。
- 樣式tabs-icon-top tabs-positive
  示例：

<ion-tab
  title="Tab!" //字符串，該選項卡的標題。
  icon="my-icon"  //字符串，選項卡的圖標。如果給定值，它將成爲ion-on和ion-off的默認值。
  ion-on="" //字符串，被選中標籤的圖標。
  ion-off=""  //字符串，沒被選中標籤的圖標。
  badge=""  //表達式，選項卡上的徽章（通常是一個數字）。
  ng-click=""  //表達式，通常，點擊時選項卡會被選中。如果設置了 ng-Click，它將不會被選中。 你可以用$ionicTabsDelegate.select()來指定切換標籤。
  badge-style=""  //表達式，選項卡上微章的樣式（例，tabs-positive ）。
  href="#/tab/tab-link" //字符串，但觸碰的時候，該選項卡將會跳轉的的鏈接。
  on-select="onTabSelected()" //表達式，選項卡被選中時觸發。
  on-deselect="onTabDeselected()">//表達式，選項卡取消選中時觸發。
</ion-tab>

ion-delete-button
ion-reorder-button
ion-list：列表。
- 樣式
- list list-insert，內嵌列表，列表不會顯示完整的寬度。
- item，標籤。
- item-input，文本框，input-label。
- item-select,
- item-stacked-label，堆疊標籤
- item-floating-label，浮動標籤
- item-input-inset，內嵌輸入域
- item-toggle，切換開關，類似 HTML 的 checkbox 標籤，但它更易於在移動設備上使用。
- item-checkbox，複選框。
- item-radio，單選框。
- item range range-calm，滑塊，左右兩邊一個圖標，用標籤<i></i> 表示
- 屬性 show-delete，列表項的刪除按鈕當前是顯示還是隱藏。
- 屬性 delegate-handle="字符串" 該句柄定義帶有$ionicListDelegate的列表。
- 屬性 show-reorder，列表項的排序按鈕當前是顯示還是隱藏。
- 屬性 can-swipe，列表項是否被允許滑動顯示選項按鈕。默認：true。
  示例：

<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>菜鳥教程(runoob.com)</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
    <body>

    <div class="bar bar-header item-input-inset">
      <label class="item-input-wrapper">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search" placeholder="搜索">
      </label>
      <button class="button button-clear">
        取消
      </button>
    </div>
  </body>

//滑塊示例
          <div class="item range range-positive">
            <i class="icon ion-ios-sunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="12">
            <i class="icon ion-ios-sunny"></i>
          </div>

//select選擇框
          <div class="item item-input item-select">
            <div class="input-label">
              Lightsaber
            </div>
            <select>
              <option>Blue</option>
              <option selected="">Green</option>
              <option>Red</option>
            </select>
          </div>

ion-item：列表項
- 樣式
- item-divider，分隔符
- item-icon-left , 設置圖標在左側， item-icon-right，設置圖標在右側。如果你需要在兩邊都有圖標，則兩個類都添加上即可。
- item-button-right， item-button-left 按鈕列表
- item-avatar，帶圓形頭像列表
- item-thumbnail-left，帶方形縮略圖列表
- item
示例：

<ion-side-menus>

<!-- 中心內容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <button class="button button-icon" ng-click="toggleProjects()">
      <i class="icon ion-navicon"></i>
    </button>
    <h1 class="title">{{activeProject.title}}</h1>
    <!-- 新增按鈕 -->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></i>
    </button>
  </ion-header-bar>
  <ion-content scroll="false">
    <ion-list>
      <ion-item ng-repeat="task in activeProject.tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>

<!-- 左邊欄 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
  <h1 class="title">Projects</h1>
  <button class="button button-icon ion-plus" ng-click="newProject()">
  </button>
</ion-header-bar>
<ion-content scroll="false">
  <ion-list>
    <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
      {{project.title}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu>

</ion-side-menus>

//樣式示例
<div class="list">
    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>
    ...

</div>

button 按鈕
- 按鈕默認顯示樣式：display:inline-block
- 顯示樣式：display: block，完全填充父元素的寬度，包含了內邊距屬性padding。
- 顏色同bar，button-light，button-stable，button-positive，button-calm，button-balanced，button-energized，button-assertive，button-royal，button-dark
- button-full，讓按鈕顯示完全寬度，且不包含內邊距padding。
- button-large ，button-small ，設置按鈕大小
- button-outline，設置背景透明
- button-clear，無背景與邊框按鈕
- 按鈕圖標，icon, icon-left, icon-right, ion-home, ion-star, ion-chevron-right, ion-chevron-left, ion-gear-a, ion-navicon
  示例：

<div class="bar bar-header">
  <button class="button button-icon icon ion-navicon"></button>
  <div class="h1 title">Header Buttons</div>
  <button class="button button-clear button-positive">Edit</button>
</div>

ionic tab 選項卡（沒有標籤，僅爲樣式顯示）
- tabs tabs-icon-only/tabs-icon-left
- tab-item
  示例：

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    主頁
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    設置
  </a>
</div>

ionic Grid 網格，採用了彈性盒子模型(Flexible Box Model)（沒有標籤，僅爲樣式顯示）。
- 樣式
- row
- col
- col-50 指定列寬 50%，col-20 指定列寬 20%
- col-offset-33 ，左偏移
- col-top，col-center,col-bottom，列縱向對齊網絡
- row-top,row-center,row-bottom，行縱向對齊網絡
- row responsive-sm/responsive-md/responsive-lg，sm：小於手機橫屏，md：小於平板豎屏，lg：小於平板橫屏
ion-pane ，面板
ion-spinner ，提供了許多種旋轉加載的動畫圖標。當你的界面加載時，你就可以呈現給用戶相應的加載圖標。該圖標採用的是SVG。
示例：
<ion-spinner class="spinner-energized"></ion-spinner>
<ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
ion-toggle 切換開關操作
ion-slide-box 滑動框是一個包含多頁容器的組件，每頁滑動或拖動切換。
- 屬性delegate-handle，字符串，該句柄用$ionicSlideBoxDelegate來標識這個滑動框。
- 屬性does-continue，布爾值，滑動框是否開啓循環滾動。
- 屬性auto-play，布爾值，設置滑動框是否循環播放，如果 does-continue 爲 true，默認也爲 true。
- 屬性slide-interval，數字，等待多少毫秒開始滑動（如果繼續則爲true）。默認爲4000。
- 屬性show-pager，布爾值，滑動框的頁面是否顯示。
- 屬性pager-click，表達式，當點擊頁面時，觸發該表達式（如果shou-pager爲true）。傳遞一個’索引’變量。
- 屬性on-slide-changed，表達式，當滑動時，觸發該表達式。傳遞一個’索引’變量。
- 屬性active-slide，表達式，將模型綁定到當前滑動框。
ion-checkbox 複選框
ion-radio 單選框
示例：

//複選框
<ion-checkbox ng-model="isChecked">複選框標籤</ion-checkbox>
//單選框
<ion-radio ng-repeat="item in clientSideList"
               ng-value="item.value"
               ng-model="data.clientSide">
      {{ item.text }}
    </ion-radio>

ion-refresher
示例：

 <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>

ionic icon 圖標（沒有標籤，僅爲樣式顯示）
- 樣式
- icon ion-star
- Ionic icons 官網: http://ionicons.com/
- 國內圖標樣式 CDN 地址：https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css。
  示例：

<i class="icon ion-star"></i>
<i class = "icon ion-happy-outline"></i>
<i class = "icon ion-ios-analytics"></i>
<i class = "icon ion-ios-eye"></i>

card 卡片
- box-shadow，陰影。
  示例：

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      菜鳥教程 -- 學的不僅是技術，更是夢想！<br>
      菜鳥教程 -- 學的不僅是技術，更是夢想！<br>
      菜鳥教程 -- 學的不僅是技術，更是夢想！<br>
      菜鳥教程 -- 學的不僅是技術，更是夢想！
    </p>
    <p>
      <a href="#" class="subdued">1 喜歡</a>
      <a href="#" class="subdued">5 評論</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      喜歡
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      評論
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

四、Ionic 常用AngularJS服務

$ionicModal可以遮住用戶主界面的內容框

$ionicSideMenuDelegate，控制所有側欄菜單

$ionicPlatform

$stateParams

$ionicActionSheet

$ionicTabsDelegate 授權控制ionTabs指令。用$getByHandle方法控制具體的ionTabs實例。

$urlRouterProvider url路由

$stateProvider 設置導航的狀態

$ionicConfigProvider

$ionicLoading 加載交互效果

$ionicActionSheet 上拉菜單

$ionicBackdrop 背景層

$ionicGesture手勢事件

$ionicModal 模態窗口

$ionicSideMenuDelegate，觸發$ionicSideMenuDelegate服務，來控制所有側欄菜單。用$getByHandle方法控制特定情況下的ionSideMenus。
- $ionicSideMenuDelegate.toggleLeft([isOpen]);isOpen:布爾值，是否打開或關閉菜單。默認：切換菜單。
- $ionicSideMenuDelegate.toggleRight([isOpen]);isOpen:布爾值，是否打開或關閉菜單。默認：切換菜單。
- $ionicSideMenuDelegate.getOpenRatio();獲取打開菜單內容超出菜單寬度的比例。
- $ionicSideMenuDelegate.isOpen();判斷左側或右側菜單是否已經打開。
- $ionicSideMenuDelegate.isOpenLeft();判斷左側菜單是否已經打開。
- $ionicSideMenuDelegate.isOpenRight();判斷右側菜單是否已經打開。
  $ionicSideMenuDelegate.canDragContent([canDrag]);canDrag:布爾值，設置是否可以拖動內容打開側欄菜單。
- $ionicSideMenuDelegate.$getByHandle(handle);handle:字符串。
  示例：$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
$ionicPlatform 服務
$stateParams
$ionicActionSheet 服務
$ionicTabsDelegate 授權控制ionTabs指令。用$getByHandle方法控制具體的ionTabs實例。
- $ionicTabsDelegate.select(index, [shouldChangeHistory]); index：數值，選擇標籤的索引；shouldChangeHistory：布爾值，此選項是否應該加載這個標籤的瀏覽歷史（如果存在），並使用，或僅加載默認頁面。默認爲false。提示：如果一個ion-nav-view在選項卡里，你可能需要設置它爲true。
- $ionicTabsDelegate.selectedIndex();數值，被選中標籤的索引，如-1.
- $ionicTabsDelegate.$getByHandle(handle); handle:字符串。$ionicTabsDelegate.$getByHandle('my-handle').select(0);
$urlRouterProvider url路由
示例：$urlRouterProvider.otherwise('/app/playlists');
$stateProvider 設置導航的狀態
示例：

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

$ionicConfigProvider
$ionicBackdrop 背景層
- $ionicBackdrop.retain()，顯示背景層。
- $ionicBackdrop.release()，隱藏背景層。
$ionicGesture angular服務, 展示ionicionic.EventController手勢。
- on(eventType, callback, $element)
  在一個元素上添加一個事件監聽器。
  eventType：string類型，監聽的手勢事件；
  callback：function(e)類型，當手勢事件發生時觸發的事件。
  $element：element類型，angular元素監聽的事件。
- off(eventType, callback, $element)
  參數含義同on(eventType, callback, $element) 。
$ionicActionSheet，上拉菜單
示例：

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
    $scope.show = function() {
        var hideSheet = $ionicActionSheet.show({
            buttons: [
              { text: '<b>Share</b> This' },
              { text: 'Move' }
            ],
            destructiveText: 'Delete',
            titleText: 'Modify your album',
            cancelText: 'Cancel',
            cancel: function() {
                 // add cancel code..
               },
            buttonClicked: function(index) {
              return true;
            }
        });
        $timeout(function() {
            hideSheet();
        }, 2000);
    };  
}])

背景層（$ionicBackdrop）
- $ionicBackdrop.retain()，顯示背景層。
- $ionicBackdrop.release()，隱藏背景層。
手勢事件($ionicGesture)
- on-hold 長按的時間是500毫秒。示例：<button on-hold="onHold()" class="button" >Test <button>
- on-tab 手勢輕擊事件.
- on-double-tap 手雙擊屏幕事件
- on-touch 這個和 on-tap 還是有區別的，這個是立即執行，而且是用戶點擊立馬執行。
- on-release 當用戶結束觸摸事件時觸發。
- on-drag 這個有點類似於PC端的拖拽。當你一直點擊某個物體，並且手開始移動，都會觸發 on-drag。
- on-drag-up 向上拖拽, on-drag-right , on-drag-down, on-drag-left,
- on-swipe 手指滑動效果，可以是任何方向上的。而且也和 on-drag 類似，都有四個方向上單獨的事件。
- on-swipe-up 向上的手指滑動效果。on-swipe-right, on-swipe-down, on-swipe-left
$ionicLoading 加載交互效果。
- 顯示一個加載效果，show(opts); $ionicLoading.show();
- 隱藏一個加載效果，hide(); $ionicLoading.hide();
- $ionicLoadingConfig ，設置加載的默認項

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>菜鳥教程(runoob.com)</title>

    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <script>
    var app = angular.module('ionicApp', ['ionic'])
    app.constant('$ionicLoadingConfig',{template:'默認加載模版......'});
    app.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {

      // Setup the loader
      $ionicLoading.show({
        content: 'Loading',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0,
        template:"",指示器的html內容。
        templateUrl:"",//一個加載html模板的url作爲指示器的內容。
        noBackdrop:false;//是否隱藏背景。默認情況下它會顯示。
        delay:2000,//指示器延遲多少毫秒顯示。默認爲不延遲。
        duration:3000 //等待多少毫秒後自動隱藏指示器。默認情況下，指示器會一直顯示，直到觸發.hide()。
      });
      //或者$ionicLoading.show();配置項在$ionicLoadingConfig設置
      // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
      $timeout(function () {
        $ionicLoading.hide();
        $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
      }, 2000);

    });
    </script>
  </head>
  <body ng-controller="AppCtrl">

      <ion-view title="Home">
        <ion-header-bar>
          <h1 class="title">The Stooges</h1>
        </ion-header-bar>
        <ion-content has-header="true">
          <ion-list>
            <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>
          </ion-list>
        </ion-content>
      </ion-view>

  </body>
</html>

$ionicModal 模態窗口。
示例：

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>菜鳥教程(runoob.com)</title>
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <style>
    body {
        cursor: url('http://ionicframework.com/img/finger.png'), auto;
    }
    </style>
    <script>
    var app=angular.module('ionicApp', ['ionic'])

    app.controller('AppCtrl', function($scope, $ionicModal) {

      $scope.contacts = [
        { name: 'Gordon Freeman' },
        { name: 'Barney Calhoun' },
        { name: 'Lamarr the Headcrab' },
      ];
      /*fromTemplate(templateString, options);
      fromTemplateUrl(templateUrl, options);
      templateString:"",模板的字符串作爲模態窗口的內容。
      templateUrl:載入模板的url。
      options:options 會傳遞到 ionicModal#initialize方法中。
      */
      /*initialize(options),創建一個新的模態窗口控制器示例。
        options：{object=} 範圍 子類的範圍。默認：創建一個$rootScope子類。
                 {string=} 動畫 帶有顯示或隱藏的動畫。默認：'slide-in-up'
                 {boolean=} 第一個輸入框獲取焦點 當顯示時，模態窗口的第一個輸入元素是否自動獲取焦點。默認：false。
                 {boolean=}backdropClickToClose` 點擊背景時是否關閉模態窗口。默認：true。
      */
      $ionicModal.fromTemplateUrl('templates/modal.html', {
        scope: $scope
      }).then(function(modal) {
        $scope.modal = modal;
      });

      $scope.createContact = function(u) {        
        $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
        $scope.modal.hide();
        //$scope.modal.remove();
        //$scope.modal.isShown();
      };

    });
    </script>
  </head>
  <body ng-controller="AppCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Contacts</h1>
      <div class="buttons">
        <button class="button button-icon ion-compose" ng-click="modal.show()">
        </button>
      </div>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="contact in contacts">
          {{contact.name}}
        </ion-item>
      </ion-list>
    </ion-content>

    <script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">New Contact</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input ng-model="newUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input ng-model="newUser.email" type="text">
            </label>
            <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
          </div>
        </ion-content>
      </ion-modal-view>
    </script>

  </body>
</html>

985 碩士程序員，空窗 4 個月沒有 Offer！

我真的從測試轉成了開發......

nginx添加相應配置，通過瀏覽器訪問或curl時返回客戶端對應公網IP

[oeasy]python020在遊戲中體驗數值自由_勇闖地下城_終端文字遊戲

爲何我建議你學會抄代碼

營銷系統黑名單優化：位圖的應用解析

解密遊戲神作

導入地址表鉤取技術解析

盛大發布 | Zabbix 7.0 LTS--性能與擴展的卓越融合

mmsql 臨時表和主表 merge into 語法

layer頁面跳轉，獲取html子節點元素的值

java： ==和equals的區別

jquery：字符數組，checkbox,find

mysql存儲過程語法及實例

mysql錯誤：1064

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結