ionic
原因：
Xcode 没装路径出错了重新指定xcode 的路径command：xcode-select --switch xcode的路径 //switch后面空格接xcode的路径，可以打开Finder 应用 然后把Xcode直接拖进终端就有路径了技术框架介绍
IONIC 3.5框架
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
Ionic为性能而生-追求性能
在html5移动app开发中,速度是很重要的。Ionic在最新的移动设备中表现非常卓越，运行非常流畅。 操作最少的 DOM，非 jQuery，和硬件加速过渡，让您感觉到用html5开发的app也可以飞起来。
Ionic完美的融合下一代移动框架 AngularJS- AngularJS移动端解决方案
Ionic可以说是AngularJS移动端解决方案，Ionic 利用 AngularJS创造出一款最适合开发丰富而强大应用的框架。 Ionic不仅如此优秀，而且它的核心架构也是为开发专业应用创建，和AngularJS完美融合。
Ionic让你看不出混合应用和原生的区别-专注原生
Ionic以流行的原生移动开发SDK为蓝本，使开发过原生iOS或安卓app的任何人都容易理解。开始只需书写你的代码，完成时通过PhoneGap发布。一次开发，处处运行。
漂亮的设计让你立马爱上它
简洁，简单，而且实用。 Ionic为所有当前移动设备而设计，并且呈现完美。伴随众多流行移动组件，结构，交互规范，以及华丽的（且可扩展）的主题，你可以更好的定制化APP应用。
开发准备
环境：
①下载安装Node JS 版本6.0以上 安装完成cmd输入node -v 显示对应版本即安装成功
②安装ionic和Cordova
Cmd 输入npm install -g ionic cordova 经过漫长的等待，会提示安装成功
③创建ionic项目
Cmd窗口 cd项目创建的目录 输入ionic start project_name [template]
template是内置的模板类型：blank/sidemenu/tabs/（default）三种
Ionic3常用命令npm install -g cnpm --registry=https://registry.npm.taobao.org（npm镜像源指向淘宝） cnpm install -g cordova ionic（安装cordova ionic） cnpm update -g cordova ionic（更新cordova ionic） ionic -help（查看帮助） ionic -v（查看版本） ionic start myionictest blank（空项目） ionic start myionictest tabs（带导航条） ionic start myionictest sidemenu（带侧滑菜单） ionic g page login(添加页面)ionic g provider BaseService(添加服务端口)ionic platform add androidionic platform add android（添加android平台） ionic platform remove android（移除android平台） ionic build android（编译项目apk） ionic emulate android（运行项目apk 手机连接在手机运行模拟器连接在模拟器运行） ionic run android （相当于build + emulate） ionic serve（开启服务调试）
PS:
编辑工具：
WebStorm 2017.02
编译环境：
Android：①JDK1.8 ②Android SDK (API25 具体看项目)
Ios：①Xcode ②Developer Program
项目目录
按照官网命令ionic start创建项目后生成如下结构树：
hooks：编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
node_modules ：node各类依赖包
resources ：android/ios 资源（更换图标和启动动画）
src：开发工作目录，页面、样式、脚本和图片都放在这个目录下
www：文静态件
platforms：生成android或者ios安装包路径（ platforms\android\build\outputs\apk：apk所在位置）
plugins：插件文件夹，里面放置各种cordova安装的插件
config.xml: 配置文件
package.json: node安装模块时的依据
tsconfig.json: TypeScript项目的根目录，指定用来编译这个项目的根文件和编译选项
tslint.json：格式化和校验typescript
src工作目录：
app：应用根目录
assets：资源目录（静态文件（图片，js框架。。。）各种需要放置在此文件夹内，不然会出错，（尴尬。。。）
pages：页面文件，放置编写的页面文件，包括：html，scss，ts。（搞事情的）
theme：主题文件，里面有一个scss文件，设置主题信息。
涉及的框架知识
Angular4 架构详解
官方架构图：
这个架构图展现了 Angular 应用中的 8 个主要构造块：
· 模块 (module)
· 组件 (component)
· 模板 (template)
· 元数据 (metadata)
· 数据绑定 (data binding)
· 指令 (directive)
· 服务 (service)
· 依赖注入 (dependency injection)
接下来我按顺序并结合图来讲解一下。
1.模块 (module)
Angular 或者 ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类(虽然他很像 java 中的注解，但是他的官方命名叫装饰器)。我们新建的页面，如果不使用懒加载，都要在 @NgModule 中先声明后使用。
下面举个例子，简单介绍一下 @NgModule 中的内容
?imports 本模块声明的组件模板需要的类所在的其它模块
?providers 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
?declarations 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。
?exports declarations 的子集，可用于其它模块的组件模板。
?bootstrap 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。
PS：在图中的意义：看图左上角，模块是用来接收一个用来描述模块属性元数据对象的。
2.组件 (component)、模板 (template)、元数据 (metadata)
这次我们把这三点一起来讲，先看一下这段代码
Component组件是一个装饰器，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
· selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找 <hero-list> 标签，创建并插入该组件。
· templateUrl：组件 HTML 模板的模块相对地址，如果使用 template 来写的话是用"`"这个符号来直接编写 HTML 代码。
· providers：组件所需服务的依赖注入。
template模板就是那段 HTML 代码，可以用 templateUrl 引入外面的，也可以用 template`` 直接写。
metadata元数据装饰器用类似的方式来指导 Angular 的行为。 例如 @Input、@Output、@Injectable 等是一些最常用的装饰器，用法就不在这里展开了。
PS：在图中的意义：看图中间那一块，模板、元数据和组件共同描绘出这个视图。
3.数据绑定 (data binding)
这里一共展示四种数据绑定，看一下示例代码：
后台ts：
可能大家对各种括号看的眼花了，总结一下：
1. 双花括号是单向绑定，传递的是值。方向是组件 -> 模板。
2. 方括号是单向绑定，传递的是属性。方向是父组件 -> 子组件。
3. 圆括号是事件绑定，处理点击等活动（action）。
4. 方括号套圆括号是双向绑定，方向是组件 <-> 模板。
PS：在图中的意义：看图中间那一块，数据绑定给模板和组件提供数据交互的方式。
4.指令 (directive)
严格来说组件就是一个指令，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。我们这里提到的指令有两种类型：结构型 structural 指令和属性 attribute 型指令。放一下原文证明一下组件确实算是一个指令：
While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.Two other kinds of directives exist: structural and attribute directives.
结构型指令是 ngFor、ngIf 这种的，通过在 DOM 中添加、移除和替换元素来修改布局。
属性型指令是 ngModel 这种的，用来修改一个现有元素的外观或行为。
Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch ）， 或者修改 DOM 元素和组件的各个方面（例如 ngStyle 和 ngClass）。
PS：在图中的意义：看图右上角那一块，组件是一个带模板的指令，只是扩展了一些面向模板的特性。
5.服务 (service)
官方文档的概念：服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务没有什么特别属于 Angular 的特性。Angular 对于服务也没有什么定义，它甚至都没有定义服务的基类，也没有地方注册一个服务。
这就像你在 iOS 或者 Android 里单独建了一个类叫 httpService ，封装了网络请求服务一样，不是具体的什么东西，就是一个概念了解下就行。
PS：在图中的意义：看图左下角角那一块，服务是用来封装可重用的业务逻辑。
6.依赖注入 (dependency injection)
依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
比如我们要给某组件导入 ContactServiceProvider这个服务，看这段代码：
这个constructor就是构造函数，依赖注入在 constructor 中进行。你也许会觉得前面写上 private、public 之类的很怪，这是 TypeScript 语法比较特殊，习惯就好。
当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 injector。我们必须先用注入器 injector 为 ContactServiceProvider注册一个提供商 provider。
看一下下面的代码，
PS：在图中的意义：看图左下角角那一块，依赖注入主要用来导入服务。
推荐一些学习资源
官方文档，内容很全，需要一定的时间进行阅读。
官方文档，至少要把 TS 的基本语法要去掌握了。
根据官网翻译，基本知识很全，需要掌握。
IONIC组件
发表评论