1. 程式人生 > >Hybrid App 開發之ionic3 + angular4 框架搭建

Hybrid App 開發之ionic3 + angular4 框架搭建

  1. 下載並安裝nodejs ,下載地址:https://nodejs.org/en/download/
  2. 更換淘寶映象,在DOS介面執行:npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. 安裝ionic,在DOS介面執行:npm install -g ionic
  4. 安裝Apache cordova ,在DOS介面執行:npm install cordova -g
  5. 下載並安裝Git,配置環境變數,例如:C:\Program Files\Git\cmd(不過一般會自動配好)
  6. 下載並安裝python 2.7,配置環境變數(例如:C:\Python27\python.exe)
  7. 建立專案:  

         ionic start myproject tabs //建立一個帶tabs欄和bottom欄的myproject工程

         ionic start myproject sidemenu //建立一個左側帶有menu欄的myproject工程

         ionic start myproject blank //建立一個空白myproject工程

    (注: 如果建立專案時,出現如下情況:)

一般是ionic版本問題,可執行npm install -g [email protected]修改ionic版本,然後再建立專案

     9.為了解決開始載入APP,首次載入緩慢,和根模組臃腫問題,引入ionic3 懶載入機制:

  • 建立一個Component,並且通過@IonicPage()裝飾器進行裝飾;
  • 建立一個 Module,在其中引入新建的page,並且通過IonicPageModule.forChild(OptionsPage)(注:OptionsPage為你建立的相關的component)在全域性中宣告這個Page,好了,我們可以在其他頁面中使用了。

10.目前為止,前臺基本配置完畢。接下來就是連結後臺了:

     運用@rebirth/rebirth-http 來做前後臺數據互動,先新增相關元件,執行指令:npm install rebirth-http --save ;具體使用:

  • 在根模組中引入RebirthHttpModule
  • 在你對應的模組的service中extends  RebirthHttp 。
  • Method decorators:
  • @GET(url: String)

    @POST(url: String)

    @PUT(url: String)

    @DELETE(url: String)

    @JSONP(url: String)

    @PATCH(url: String)

    @HEAD(url: String)

    @OPTIONS(url: String)

    @Headers(headers: any)

    @RequestOptions(headers: any)

    @Extra(headers: any)

  • Parameter decorators:

        @Path(key: string)

       @Query(key: string)

       @Header(key: string)

       @Body

相關推薦

Hybrid App 開發ionic3 + angular4 框架搭建

下載並安裝nodejs ,下載地址:https://nodejs.org/en/download/ 更換淘寶映象,在DOS介面執行:npm install -g cnpm --registry=https://registry.npm.taobao.org 安裝ionic

Hybrid App開發jQuery基礎

簡單 代碼 前言 tdi ner user 總結 func pre 前言: 前面學習了JavaScript/Html/Css的基礎知識,今天學習一下常用js框架jQuery的使用進行快速的開發。 JQuery的基本功能: 方位和操作DOM元素 控制頁面樣式 對頁

上門洗車APP --- Androidclient開發 網絡框架封裝介紹(二)

glob imp success rgb sed error margin p s 再次 上門洗車APP --- Androidclient開發 之 網絡框架封裝介紹(二)前幾篇博文中給大家介紹了一下APP中的基本業務及開發本項目使用的網絡架構:上門洗車APP ---

使用ionic3開始自己的App開發

能力 很多 信心 瀏覽器中 自己 聽說 pan 分享 路線 由於這次換工作的原因,我的技術路線也有了一些變化。我原本比較喜歡react,前端js框架方面一直偏向於react。我第一次來到這家公司面試的時候聽到他們要開發一款APP,要是用跨平臺的技術方案。於是我當時提議的是r

Android開發高階進階元件化框架搭建

背景 當一個專案經過N手人開發,N個產品經理的蹂躪,N長時間的維護,此時一定存在大量程式碼冗餘、業務耦合、專案臃腫,資原始檔大把重複等等,不堪重負。當需要增加新功能或者修改之前某個功能的時候,我相信很多同仁都說只敢增加,不敢隨意的去刪除、修改原有的程式碼,因為不知道哪些有用,哪些沒有用。

MUI-APP開發mui框架封裝獲取檔案方式

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport"

Windows App開發文件與數據

了吧 hide asm ber 下拉列表 cached 默認 dev manager 讀取文件和目錄名 這一節開始我們將陸續看到Windows App是如何操作文件的。 在Windows上讀取文件名稱、目錄名 首先我們在XAML中定義一個But

Windows App開發開發準備

window eba 屬於 新特性 popu ret 虛擬機 其它 post 操作系統及SDK 操作系統 顯而易見。想要開發Windows App就得在Windows 8/8.1/10上進行。老舊的Windows XP/Vista/7已經不能滿足

ASP.NET EntityFramework實體框架搭建

一個 eric null ron config .com span gif div   前段時間接觸了EntityFramework,對ORM框架也是有了初步的認識,現在對其進行一點小總結。 一、ORM簡介   對象關系映射(Object Relationa

手機APP開發移動端開發淺析

結構 安裝使用 媒體 方向 淺析 tro 設計 5.0 小米 互聯網的發展讓移動端開發很受歡迎,如今很多企業都開發了手機APP,今天司科就給大家介紹一下移動端開發的相關知識。   移動開發也稱為手機開發或叫做移動互聯網開發。是指以手機、PDA、UMPC等便攜終端為基礎,進行

移動Web APP開發實戰美團外賣 高清無密 百度網盤

管理 如何 第6章 代碼管理 view 優化 移動web webp flex 第1章 課程介紹 通過課程介紹,了解學習課程的必要性,所包含的知識點,課程安排,學習前提,課程收獲,快速全面了解課程。 1-1 課程導學 第2章 移動web硬知識點 本章主要講解移動web開發中必

直播APP開發iOS開發中的列表優化思路

uic 異步化 軟件公司 死機 直播 隱藏 屬性 頁面 底層 APP開發中,列表可能是平時我們打交道最多的UI控件之一,其重要性不言而喻,對其性能的優化同樣至關重要。而對於iOS開發,列表就是我們常說的UITableView / UICollectionView。在進行直播

移動Web APP開發實戰美團外賣

第1章 課程介紹 通過課程介紹,瞭解學習課程的必要性,所包含的知識點,課程安排,學習前提,課程收穫,快速全面瞭解課程。 1-1 課程導學 第2章 移動web硬知識點 本章主要講解移動web開發中必要掌握的基本知識,是進行後續學習的前提。從概述到開發除錯方法

APP開發我遇到的那點事兒-1

客戶端結構圖:通用型(N-Tab)結構。 開發工具:xcode 9.4.1 語言:OC 1、建立一個Single View App。 2、新增一個.pch檔案,在Prefix Header新增.pch檔案的路徑。 3、匯入常用的第三方庫( cocopads管理),cocopads環境搭建

APP開發UI體驗—DrawerLayout

mat androi 內容 parent 直接 設置 寬高 左側菜單 布局 直接將DrawerLayout作為根布局,然後其內部第一個View為內容區域,第二個View為左側菜單,第三個View為右側側滑菜單,當前第三個是可選的。 第一個View的寬高應當設置為match_

APP開發UI體驗—Toolbar

title 文件夾 auto fin code content rec switch main 1.新建的項目中,默認使用的是ActionBar,為了能夠正常使用ToolBar,我們需要隱藏原來的ActionBar。(每個活動最頂部的標題欄) 在values/styles.

最新移動Web APP開發實戰美團外賣

1.1 在設定中勾中Build project automatically 1.2 使用快捷鍵Ctrl + shift + alt + /,開啟Maintenance操作面板,選擇Registry,開啟Registry操作面板 1.3 找到並勾線"compiler.aut0mak

移動開發Android常用框架

一、網路通訊框架 1.xutils 最新版本xutils3.0 使用方法參照xutils3.0使用方法 2.okhttp 目前所知最新的是2.4.0 使用方法參照泓洋的部落格okhttp使用詳解 3.volley 下載地址volley下載地址 使用方法參照volley詳

java遊戲伺服器開發四--通訊框架netty

前言, 說明 引入netty的pom <!-- netty --> <dependency> <groupId>io.netty</groupId> <artifactId>nett

國泰基金 Hybrid App 開發探索

小編入職國泰基金已有將近4個月,作為WEB前端開發,在當下流行的大前端概念下,也算是蹭了波兒潮流,做了一次Android的Hybrid開發,小編也是有機會從全域性的角度參與了整個Android Hybrid的開發流程,對這樣一種混合模式的開發流程算是有了一個比較全面的瞭解。 首先我們先看下整