angularJS之 ionic安装配置

ionic官网

ionic 相关命令，官网
学习 Ionic

查看机器 ionic 的版本等相关信息

$ ionic info

安装 ionic 和 cordova （全局安装）

npm install -g cordova ionic

没有写明版本号则是安装最新版。
截至(2017-7-18) 最新ionic版本3.5.0.
查看本机 ionic 的版本

$ ionic -v
3.5.0

若要卸载ionic ：

npm uninstall -g ionic
npm cache clean

1. 如果想同时兼容开发ionic1,则需要执行cnpm i -g ionic@2.2
2. 如果只想使用ionic1,就执行cnpm i -g ionic@1.7.16,这里1.7.16是1.x最新版本
3. 如果你安装过ionic,执行命令则会覆盖你以前的安装.因此就不用想着更新旧版本,直接覆盖就行了
   同理，cordova 若指定版本安装和 ionic 类似。做ionic2开发,cordova版本要求5.0以上
   这里是 cordova 的所有插件

创建 ionic 项目的文件夹Demo，在当前目录下继续执行（这里用的是 tabbar-tabs 的形式，还有空白项目-blank，侧边菜单-sidemenu）

ionic start Demo tabs

这里可以使用$ ionic start --list来查看 ionic 所持有的模板。

若指定 ionic1或ionic2创建项目（”–v2” ，20170719替换成”–type=ionic2”的形式）：

现在更改成（–type=**）的形式
下面是使用 ionic1创建项目：

ionic start MyAppV2 tabs –type ionic1
下面是使用 ionic2创建项目
ionic start MyAppV2 tabs –type=ionic-angular

以ionic1 创建的项目目录

ionic1 创建的项目目录图：

1. hooks：文件夹是伴随Cordova的安装自动生成的文件夹，该文件夹有脚本可以定制Cordova命令。一般情况下，不对该文件夹中的文件进行更改。
2. node_modules 包含所有 npm 安装的依赖包
3. platforms:平台文件
4. plugins：用于放置cordova插件源码的文件夹，添加插件后自动生成相应文件夹
5. resources:这是资源文件，一般是 APP 的图标和启动页，app 用到的图片。
6. scss：如果在Ionic项目，想要使用CSS的预处理语言SASS来修改应用程序的样式，那么你可以在scss文件夹下的相应文件覆盖Ionic的默认值。如果你熟悉SASS语言，你可以在相应scss文件添加SASS命令，或者更改目录结构，增加子文件夹。如果你想在项目中使用SASS去工作，你需要首先运行Ionic setup SASS 命令。

7. www（主要工作目录）
   1）css、img、js 是对应放置各种资源文件的文件夹。
   css：可以在此文件夹中的样式文件中编写自己的CSS，从而改变Ionic应用程序的默认样式。
   img：用于存放图片，图片可运用在所建立的项目中。
   js：用于放置js文件的文件夹，其中以AngularJS文件为主。
   - app.js：通过控制器和指令加载angularJS文件的主要应用程序文件。
   - Controller.js：可用于任何类型的JavaScript文件，可被添加到应用程序的不同部分。
   - services.js:：services.js包含了通用的数据和功能服务，数据将运用在设计的应用程序当中，功能服务可以在 controller 里面调用。
   2）lib：用于放置第三方库文件，如ionic.js、jQuery、mobiscroll等，创建的应用程序能够访问这些库文件和资源。
   3）templates：放置AngularJS模板文件的地方，设计的APP会采用里面的模板，在应用程序的页面展现出来。也可以在这个文件夹内创建子文件夹，添加你自己的模板。
   4）index.html：index.html文件是应用程序的核心文件，它将被Ionic载入浏览器。

8. .bowerrc：Bower包管理器的配置文件，使用Bower可以很方便的安装第三方库

9. .gitignore：当使用Git和GitHub追踪项目，.gitignore可以用来指定忽略文件。如果你不想特定的文件夹和文件被上传到Git仓库（repository)，你可以使用gitignore防止文件转移。
10. config.xml：ionic项目的核心配置文件，可以配置项目的包名，未来打包成app时的名称，作者，以及一些全局属性
11. gulpfile.js：类似于grunt，都是基于Node.js的前端构建工具。不过gulp压缩效率更高。
12. ionic.project：ionic的工程文件
13. package.json：package.json文件在许多Nodejs项目里都会出现， 它定义了这个项目所需要的各种依赖模块，项目的配置信息（比如名称、版本、项目描述等元数据） 。 Node和Gulp工具可以依据文件中的项目需求和配置信息，去履行责任。一般不修改该文件。

以 ionic2创建的项目目录：

附上 src 目录

src 含有我们原始的未经编译的代码，也是我们编写 ionic2APP 的主要工作目录。

1.src/index.html ：是 Ionic 2 APP的主入口文件，设置脚本和CSS，引导启动我们的 APP。
为了让应用正常运作，Ionic 2 会在HTML中寻找 标签。

<ion-app></ion-app>

2.并且在下方我们还能看到这样的脚本引用：

<script src="cordova.js"></script> <script src="build/polyfills.js"></script>  <script src="build/main.js"></script>

    1）cordova.js 是Cordova应用的需求文件，我们在开发过程中将会提示404错误，这不需要担心。Cordova将会在项目构建过程中自动注入这个文件。    2）build/polyfills.js 是在构建过程中自动生成的，我们不需要过多关注。    3）build/main.js 是一个包含了Ionic, Angular和你的JS脚本的文件。

3. ./src/app/app.component.ts
在 app 文件夹中能找到我们的预编译代码。这是Ionic 2应用程序的大部分工作起始的地方。当我们运行 ionic serve 时， app 中的代码将被编译成当前浏览器能够执行的JavaScript版本。
app.component.ts 是应用的入口文件。
在文件中我们能够看到这样的结构：

@Component({  templateUrl: 'app.html'})export class MyApp {  constructor(** ){}}

每个应用程序都有一个根组件，用于控制应用程序的其余部分。这跟Ionic 1和Angular 1中的 ng-app 非常相似。原先的启动配置被放倒了app.module.ts 文件中。
在这个组件中，我们设置了模版文件 app.html:

<ion-menu [content]="content">  <ion-header>    <ion-toolbar>      <ion-title>Menu</ion-title>    </ion-toolbar>  </ion-header>  <ion-content>    <ion-list>      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">        {{p.title}}      </button>    </ion-list>  </ion-content></ion-menu><!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --><ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在这个模板中，我们设置了一个 ion-menu 作为侧面菜单，然后一个 ion-nav 组件作为主要内容区域。 ion-menu 菜单的 [content] 属性绑定到了我们 ion-nav 的本地变量 content 上。所以我们知道哪里会发生动作变化。
接下来，我们来看看如何创建更多页面并执行基本的导航。
添加页面
现在我们对Ionic 2应用的布局有一个基本的掌握，让我们来了解一下在应用中创建和导航到页面的过程。
让我们看一下 app.html 页面的底部：
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>注意 [root] 属性绑定。 这本质上是设置了ion-nav组件的“root”页面。 当ion-nav加载时，变量 rootPage 引用的组件将是根页面,对应下面注释部分。
在 app.component.ts 中， MyApp 组件在其构造函数中指定：

import { Component, ViewChild } from '@angular/core';import { Nav, Platform } from 'ionic-angular';import { StatusBar } from '@ionic-native/status-bar';import { SplashScreen } from '@ionic-native/splash-screen';import { HomePage } from '../pages/home/home';import { ListPage } from '../pages/list/list';@Component({  templateUrl: 'app.html'})export class MyApp {  @ViewChild(Nav) nav: Nav;  rootPage: any = HomePage;//变量 rootPage 引用的组件将是根页面。  pages: Array<{title: string, component: any}>;  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {    this.initializeApp();    // used for an example of ngFor and navigation    this.pages = [      { title: 'Home', component: HomePage },      { title: 'List', component: ListPage }    ];  }  initializeApp() {    this.platform.ready().then(() => {      // Okay, so the platform is ready and our plugins are available.      // Here you can do any higher level native things you might need.      this.statusBar.styleDefault();      this.splashScreen.hide();    });  }  openPage(page) {    // Reset the content nav to have just this page    // we wouldn't want the back button to show in this scenario    this.nav.setRoot(page.component);  }}

运行 App，先进入 Demo 文件夹，在运行以下命令

ionic serve
运行终端结果如下：
运行完，浏览器出现页面：

安装测试和真机环境

测试 sim
真机环境

$ npm install -g ios-deploy
运行完终端显示：* BUILD SUCCEEDED *如图：

进入 Demo 文件夹，有一个 config.xml 的文件， 其中有一个<name>**</name>更改这个名字，然后在终端输入一下命令生成一个 iOS 平台（这样就可以运行在终端设备上了），

$ cordova platform add ios

在项目中会出现 platforms文件夹

OK。至此就可以测试了。
我采用 Webstorm 编辑angularJS,ionic 代码。

常用命令

ionic info...........................查看ionic版本信息ionic serve..........................最常用,在浏览器上运行app,开发调试ionic serve --lab....................在浏览器上运行app,同时打开android,ios,windows三个app界面----------以下android可以更换成 iosionic run android....................手机用usb连接电脑,执行此命令直接把debug apk安装在手机上ionic run android --livereload.......执行此命令直接把debug apk安装在手机上,并且代码改动手机也会刷新,类似ionic serve项目,调试硬件功能,很实用ionic resources [--splash][--icon]...将图标命名为icon(1024*1024)，启动画面命名为splash(2732*2732),格式支持png、psd和ai,放到resources文件夹下            执行ionic resources可生成不同分辨率手机所需要的icon和splash            执行ionic resources --icon只生成图标            执行ionic resources --splash只生成启动画面cordova platform add android.........添加安卓平台cordova platform rm android..........删除安卓平台cordova plugin add 插件名/插件地址....添加cordova插件,这个插件地址可以是github的项目地址,也可以是一个本地文件夹路径cordova plugin rm 插件名..............删除已安装的cordova插件cordova plugin list..................列出所有已安装插件cordova build android................编译安卓debug环境apkcordova build android --release......编译安卓生产环境apkcordova build android --prod --release编译并压缩安卓生产环境apk