ionic簡介+安裝+創建App

ionic 教程

<small>ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。

ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應用程序開發。

ionic是一個輕量的手機UI庫，具有速度快，界面現代化、美觀等特點。為了解決其他一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。

ionic 特點

1.ionic 基于Angular語法，簡單易學。
2.ionic 是一個輕量級框架。
3.ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。
4.ionic 提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。
5.ionic 專注原生，讓你看不出混合應用和原生的區別
6.ionic 提供了強大的命令行工具。
7.ionic 性能優越，運行速度快。

學習本教程前你需要了解？

學習本教程前你需要了解以下基礎知識：

HTML
CSS
Javascript
Angular

ionic 相關內容
ionic 官方網站：http://ionicframework.com/
ionic 官方文檔：http://ionicframework.com/docs/
Github 地址：https://github.com/driftyco/ionic</small>

ionic 安裝

<small>本站實例采用了ionic v1.0.1 版本，下載地址為：ionic-v1.0.1.zip。
ionic 最新版本下載地址: http://ionicframework.com/docs/overview/#download。
下載后解壓壓縮包，包含以下目錄：

css/             => 樣式文件
fonts/           => 字體文件
js/              => Javascript文件
version.json     => 版本更新說明

你也可以在 Github 上下載以下資源文件：https://github.com/driftyco/ionic（在release 目錄中）。
接下來，我們只需要在項目中引入以上目錄中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可創建 ionic 應用。

<big>實例

<ion-header-bar class="bar-positive"> 
    <h1 class="title">Hello World!</h1>
</ion-header-bar> 

<ion-content> 
    <p>我的第一個 ionic 應用。</p>
</ion-content>

嘗試一下 ?
<small>點擊 "嘗試一下" 按鈕查看在線實例。

本教程著重講解 ionic 框架的應用，大部分實例在瀏覽器中運行，移動設備上運行可以在接下來的命令行安裝教程中詳細了解。
注意：在移動應用如 phonegap 中我們只需將對應的 js 和 css 文件加入到資源庫中即可。

命令行安裝

首先您需要安裝 Node.js，我們在接下來的安裝中需要使用到其 NPM 工具，更多 NPM 介紹可以查看我們的NPM 使用介紹。
然后通過命令行工具安裝最新版本的 cordova 和 ionic 。通過參考Android 和 iOS 官方文檔來安裝。
Window 和 Linux 上打開命令行工具執行以下命令：

$ npm install -g cordova ionic

Mac 系統上使用以下命令：

sudo npm install -g cordova ionic

提示: IOS需要在Mac Os X. 和Xcode環境下面安裝使用。
如果你已經安裝了以上環境，可以執行以下命令來更新版本:

npm update -g cordova ionic

或

sudo npm update -g cordova ionic

創建應用

使用ionic官方提供的現成的應用程序模板，或一個空白的項目創建一個ionic應用：

$ ionic start myApp tabs

運行我們剛才創建的ionic項目

使用 ionic tool 創建，測試，運行你的apps(或者通過Cordova直接創建)。

創建Android應用

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

如果一切正常會彈出模擬器，界面如下所示：

創建iOS應用

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

(額外補充空格代碼 ? ? 以下分別是效果展示)
如果出現 "ios-sim was not found." 錯誤，可以執行以下命令：
?如果出現 "ios-sim was not found." 錯誤，可以執行以下命令：
? 如果出現 "ios-sim was not found." 錯誤，可以執行以下命令：

npm install -g ios-sim

如果一切正常會彈出模擬器，界面如下所示：

Ionic Lab

Ionic Lab 是桌面版的開發環境，如果你不喜歡使用命令行操作，Ionic Lab 將會滿足你的需求。
Ionic Lab 為開發者提供了一個更簡單的方法來開始，編譯，運行，和模擬運行Ionic的應用程序。
Ionic Lab 支持的平臺有：Window、Mac OS X、Linux，下載地址為：http://lab.ionic.io/，下載后直接安裝即可。整個操作界面如下所示：

通過以上界面你可以完成以下操作：

創建應用
預覽應用
編譯應用
運行應用
上傳應用
運行日志查看
……
推薦使用Sublime Text作為 Ionic 項目的編輯器，我們可以通過 Ionic Lab 直接在Sublime Text 上打開項目，如下圖：

Gif 操作演示

ionic 創建 APP

前面的章節中我們已經學會了 ionic 框架如何導入到項目中。
接下來我們將為大家介紹如何創建一個 ionic APP 應用。
ionic 創建 APP 使用 HTML、CSS 和 Javascript 來構建，所以我們可以創建一個 www 目錄，并在目錄下創建 index.html 文件，代碼如下：

<!DOCTYPE html>
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>Todo</title> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 

    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- 在使用 Cordova/PhoneGap 創建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(開發過程中顯示 404) --> 
    <script src="cordova.js"></script> 
  </head> 
  <body> 
  </body>
</html>

以上代碼中，我們引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 擴展ionic.bundle.js（ionic.bundle.js）。
ionic.bundle.js 文件已經包含了 Ionic核心JS、AngularJS、Ionic的AngularJS擴展，如果你需要引入其他 Angular 模塊，可以從 lib/js/angular 目錄中調用。
cordova.js 是在使用 Cordova/PhoneGap 創建應用時生成的，不需要手動引入，你可以在 Cordova/PhoneGap 項目中找到該文件，所以在開發過程中顯示 404 是正常的。

創建 APP

接下來我們來實現一個包含標題、側邊欄、列表等的應用,設計圖如下：

創建側邊欄

側邊欄創建使用 ion-side-menus 控制器。
編輯我們先前創建的 index.html 文件，修改 <body> 內的內容，如下所示：

<body> 
  <ion-side-menus> 
    <ion-side-menu-content> 
    </ion-side-menu-content> 
    <ion-side-menu side="left"> 
    </ion-side-menu> 
  </ion-side-menus>
</body>

控制器解析：

ion-side-menus： 是一個帶有邊欄菜單的容器，可以通過點擊按鈕或者滑動屏幕來展開菜單。
ion-side-menu-content：展示主要內容的容器，可以通過滑動屏幕來展開menu。
ion-side-menu：存放側邊欄的容器。

初始化 APP

接下來我們創建一個新的 AngularJS 模塊，并初始化，代碼位于 www/js/app.js 中：

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

之后在我們的 body 標簽中添加 ng-app 屬性：

<body ng-app="todo">

在 index.html 文件的 <script src="cordova.js"></script> 上面引入 app.js 文件：

<script src="js/app.js"></script>

修改 index.html 文件 body 標簽的內容，代碼如下所示：

<body ng-app="todo"> 
  <ion-side-menus> 

    <!-- 中心內容 --> 
    <ion-side-menu-content> 
      <ion-header-bar class="bar-dark"> 
        <h1 class="title">Todo</h1> 
      </ion-header-bar> 
      <ion-content> 
      </ion-content> 
    </ion-side-menu-content> 

    <!-- 左側菜單 --> 
    <ion-side-menu side="left"> 
      <ion-header-bar class="bar-dark"> 
        <h1 class="title">Projects</h1> 
      </ion-header-bar> 
    </ion-side-menu> 

  </ion-side-menus>
</body>

<big>嘗試一下 ?
<small>以上步驟我們已經完成了 ionic 基本 APP 的應用。

創建列表

首先創建一個控制器 TodoCtrl：

<body ng-app="todo" ng-controller="TodoCtrl">

在app.js文件中，使用控制器定義列表數據：

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

.controller('TodoCtrl', function($scope) { 
  $scope.tasks = [ 
    { title: '菜鳥教程' },
    { title: 'www.runoob.com' }, 
    { title: '菜鳥教程' }, 
    { title: 'www.runoob.com' } 
  ];
});

在index.html頁面中數據列表我們使用 Angular ng-repeat 來迭代數據：

<!-- 中心內容 -->
<ion-side-menu-content> 
  <ion-header-bar class="bar-dark"> 
    <h1 class="title">Todo</h1> 
  </ion-header-bar> 
  <ion-content> 
    <!-- 列表 --> 
    <ion-list> 
      <ion-item ng-repeat="task in tasks"> 
        {{task.title}} 
      </ion-item> 
    </ion-list> 
  </ion-content>
</ion-side-menu-content>

修改后 index.html body 標簽內代碼如下：

<body ng-app="todo" ng-controller="TodoCtrl"> 
  <ion-side-menus> 

  <!-- 中心內容 --> 
  <ion-side-menu-content> 
    <ion-header-bar class="bar-dark"> 
      <h1 class="title">Todo</h1> 
    </ion-header-bar> 
    <ion-content> 
      <!-- 列表 --> 
      <ion-list> 
        <ion-item ng-repeat="task in 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> 
    </ion-header-bar> 
  </ion-side-menu> 

  </ion-side-menus> 
  <script src="http://www.runoob.com/static/ionic/js/app.js"></script> 
  <script src="cordova.js"></script>
</body>

<big>嘗試一下 ?

創建添加頁面

修改 index.html 在 </ion-side-menus> 后添加如下代碼:

<script id="new-task.html" type="text/ng-template"> 

  <div class="modal"> 

    <!-- Modal header bar --> 
    <ion-header-bar class="bar-secondary"> 
      <h1 class="title">New Task</h1> 
      <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button> 
    </ion-header-bar> 

    <!-- Modal content area --> 
    <ion-content> 

      <form ng-submit="createTask(task)"> 
        <div class="list"> 
          <label class="item item-input"> 
            <input type="text" placeholder="What do you need to do?" ng-model="task.title"> 
          </label> 
        </div> 
        <div class="padding"> 
          <button type="submit" class="button button-block button-positive">Create Task</button> 
        </div> 
      </form> 

    </ion-content> 

  </div>

</script>

<small>以上代碼中我們通過 <script id="new-task.html" type="text/ng-template"> 定義了新的模板頁面。
表單提交時觸發 createTask(task) 函數。
ng-model="task.title" 會將表單的輸入數據賦值給 task 對象的 title 屬性。
修改 <ion-side-menu-content> 內的內容，代碼如下：

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

app.js 文件中，控制器代碼如下：

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

.controller('TodoCtrl', function($scope, $ionicModal) { 
  $scope.tasks = [ 
    { title: '菜鳥教程' }, 
    { title: 'www.runoob.com' }, 
    { title: '菜鳥教程' }, 
    { title: 'www.runoob.com' } 
  ]; 

  // 創建并載入模型       
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) { 
    $scope.taskModal = modal; 
  }, { 
    scope: $scope, 
    animation: 'slide-in-up' 
  }); 

  // 表單提交時調用 
  $scope.createTask = function(task) { 
    $scope.tasks.push({ 
      title: task.title 
    }); 
    $scope.taskModal.hide(); 
    task.title = ""; 
  }; 

  // 打開新增的模型 
  $scope.newTask = function() { 
    $scope.taskModal.show(); 
  }; 

  // 關閉新增的模型 
  $scope.closeNewTask = function() { 
    $scope.taskModal.hide(); 
  };
});

創建側邊欄

通過以上步驟我們已經實現了新增功能，現在我們為 app 添加側邊欄功能。
修改 <ion-side-menu-content> 內的內容，代碼如下：

<!-- 中心內容 -->
<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-item> 中的 ng-class 指令設置菜單激活樣式。
這里我們創建一個新的js 文件 app2.js(為了不與前面的混淆)，代碼如下：

angular.module('todo', ['ionic'])
/** 
 * The Projects factory handles saving and loading projects
 * from local storage, and also lets us save and load the
 * last active project index.
 */
.factory('Projects', function() { 
    return { 
        all: function() { 
            var projectString = window.localStorage['projects']; 
            if(projectString) { 
                return angular.fromJson(projectString); 
            }
            return []; 
        }, 
        save: function(projects) { 
            window.localStorage['projects'] = angular.toJson(projects); 
        }, 
        newProject: function(projectTitle) { 
            // Add a new project 
            return { 
                title: projectTitle, 
                tasks: [] 
            }; 
        }, 
        getLastActiveIndex: function() { 
            return parseInt(window.localStorage['lastActiveProject']) || 0; 
        }, 
        setLastActiveIndex: function(index) { 
            window.localStorage['lastActiveProject'] = index; 
        } 
    }
})

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) { 

    // A utility function for creating a new project 
    // with the given projectTitle 
    var createProject = function(projectTitle) { 
        var newProject = Projects.newProject(projectTitle); 
        $scope.projects.push(newProject); 
        Projects.save($scope.projects); 
        $scope.selectProject(newProject, $scope.projects.length-1); 
    } 

    // Load or initialize projects 
    $scope.projects = Projects.all(); 

    // Grab the last active, or the first project 
    $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()]; 

    // Called to create a new project 
    $scope.newProject = function() { 
        var projectTitle = prompt('Project name'); 
        if(projectTitle) { 
            createProject(projectTitle); 
        } 
    }; 

    // Called to select the given project 
    $scope.selectProject = function(project, index) { 
        $scope.activeProject = project; 
        Projects.setLastActiveIndex(index); 
        $ionicSideMenuDelegate.toggleLeft(false); 
    }; 

    // Create our modal 
    $ionicModal.fromTemplateUrl('new-task.html', function(modal) { 
        $scope.taskModal = modal; 
    }, { 
        scope: $scope 
    }); 

    $scope.createTask = function(task) { 
        if(!$scope.activeProject || !task) { 
            return; 
        } 
        $scope.activeProject.tasks.push({ 
            title: task.title 
        }); 
        $scope.taskModal.hide(); 

        // Inefficient, but save all the projects 
        Projects.save($scope.projects); 

        task.title = ""; 
    }; 

    $scope.newTask = function() { 
        $scope.taskModal.show(); 
    }; 

    $scope.closeNewTask = function() { 
        $scope.taskModal.hide(); 
    } 

    $scope.toggleProjects = function() { 
        $ionicSideMenuDelegate.toggleLeft(); 
    }; 

    // Try to create the first project, make sure to defer 
    // this by using $timeout so everything is initialized 
    // properly 
    $timeout(function() { 
        if($scope.projects.length == 0) { 
            while(true) { 
                var projectTitle = prompt('Your first project title:'); 
                if(projectTitle) { 
                    createProject(projectTitle); 
                    break; 
                } 
            } 
        } 
    });

});

body 中 ion-side-menus 代碼如下：

<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>

嘗試一下 ?

最后編輯于：2017.12.05 02:00:33

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,923評論 6贊 535
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,740評論 3贊 420
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 176,856評論 0贊 380
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,175評論 1贊 315
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,931評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,321評論 1贊 324
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,383評論 3贊 443
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,533評論 0贊 289
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,082評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,891評論 3贊 356
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,067評論 1贊 371
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,618評論 5贊 362
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,319評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,732評論 0贊 27
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,987評論 1贊 289
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,794評論 3贊 394
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,076評論 2贊 375

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

ionic簡介+安裝+創建App

ionic簡介+安裝+創建App

ionic 教程

ionic 特點

學習本教程前你需要了解？

ionic 安裝

命令行安裝

創建應用

運行我們剛才創建的ionic項目

創建Android應用

創建iOS應用

Ionic Lab

ionic 創建 APP

創建 APP

創建側邊欄

初始化 APP

創建列表

創建添加頁面

創建側邊欄

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

ionic簡介+安裝+創建App

ionic 教程

ionic 特點

學習本教程前你需要了解？

ionic 安裝

命令行安裝

創建應用

運行我們剛才創建的ionic項目

創建Android應用

創建iOS應用

Ionic Lab

ionic 創建 APP

創建 APP

創建側邊欄

初始化 APP

創建列表

創建添加頁面

創建側邊欄

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频