Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)

Ionic Angular Angularjs 混合开发入门篇(一)

环境搭建

一、安装npm 、node.js

  1. 简单了解npm
    npm: nodejs 下的包管理器。
    webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包
  2. 下载node.js
    nodejs下载网址:node.js
    Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)
    下载好后双击,安装
  3. 安装ionic 和cordova
  • 修改registry地址,比如修改为淘宝镜像源。
    npm set registry https://registry.npm.taobao.org/
    或使用最新的国内镜像:
    npm set registry https://gems.ruby-china.org/

通过淘宝NPM镜像就可以安装ionic和cordova包,在安装ionic 和cordova 之前,先安装 express

  • npm install express

  • sudo npm install -g ionic cli

  • sudo npm install -g cordova [默认最新版]

Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)
Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)因为我之前安装过,所以是updated
Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)

安装成功以后,要查看安装的包内容是否全部都已安装.运行命令:

ionic info
Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)

创建ionic工程

Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)
执行 ionic start AndroidTest1 时,会让你选择框架, Pick a framework , 会出现两个选择 Angular 和另外一个,上下键可以移动,
Enter 键选择。

选择一个你完美的模板
Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)
2. 进入项目文件
cd #项目路径# ------进入项目文件

Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)

如果创建iOS应用,终端运行:

ionic platform add ios ------ 添加iOS 平台

ionic build ios -------编译项目

ionic emulate ios -------模拟器运行

我们创建的是Android 应用
添加android平台
在该项目目录下运行ionic cordova platform add android
Ionic Angular Angularjs -Idea(编辑器)混合开发入门篇(一)

  • 在浏览器查看应用
    cmd下运行:
    cd + [文件名]
    ionic serve
  • 停止服务ctrl + c
  • 添加android平台
    在该项目目录下运行ionic cordova platform add android
  • 打包为.apk
    ionic cordova build android
    apk文件在[demo]\platforms\android\build\outputs\apk下