ionic2 你可以是理解为基于 angular 2 框架的引申(主要针对移动端,主要是里面提供了大量的组件可以使用,可以把它理解成里面包含了很多的UI库, 就好比 ios开发中的 UIKit一样).
如果从头让你写一个Ionic 2/3的项目,你会写吗?
相信很多人都不是自己亲手去搭建的项目. 都是在别人搭建好的基础上 去写功能.. 甚至 你都不了解启动文件在哪 , http请求等一些需要全局封装配置 怎么处理等等.....
我们先来看angular 的官网文档:angular 是一个框架,看一个框架第一步肯定是要看这个框架的架构!架构! 你可以把这个架构理解成是 一套规则, 这套规则是以为我们提供便利为前提的标准去制定的, 而我们要想享受它所提供的便利,那么我们就首先要了解这套规则,以遵守规则为前提,然后再去使用它.
正文:
Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言（ TypeScript ），来构建客户端应用的框架。我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布组件与服务。
其中的关键字: 组件 , 模板 , 服务 , 模块 . 这几个重要的架构组成, 官方文档写的很清楚.自己先好好理解下 ,下面我说下我个人的理解: 先上一个ionic 2项目结构 局部 目录图:
app文件夹: 项目的根配置目录; assets文件夹: 引用的资源(图片素材等)放置在这里
pages文件夹: 也就是功能模块文件夹(tabs 控制的几大模块)
pipes文件夹: 里面放的是自定管道(过滤器)
providers文件夹: 服务配置文件夹.(各模块用到的服务,主要封装的是各模块用到的接口请求,以及逻辑数据的处理, 跨页面的数据传递 就是依赖服务区实现的)
首先说
模板: 你就可以理解成 用angular2 扩展语法编写 的HTML. 也就是 .html文件
组件: 你也可以理解成.ts文件. 就相当于js文件,作用是干嘛的? 组件通过一些由属性和方法组成的 API 与视图交互。 还有,组件其实就是一个类文件 与 @Component装饰器 的结合. (装饰器 , 指令,元数据 这些关键词 你也去搜下具体的解释. 通俗的来说,就是, ts文件中, 通过装饰器 引用你编写的模板,然后通过你写的方法等逻辑代码 去实现API的视图交互.暂且这么理解,虽然不太准确)
还有那些 依赖注入, 服务,数据绑定啥的. 都自己看下就行. 切回正题, 项目结构文件都是怎么关联的;
模块 @NgModule
模块这个关键字 你可以好好理解下. 你写的项目下.不仅仅有js(ts), html, css , 是不是发现该模块下还有一个module.ts文件. 因为一个模块下.有很多界面. 我们是如何把这些界面想关联起来的? 就是用模块 这个概念实现的. 不过为了规范,文档上说,每个模块下 都用index.js 去实现关联. 就是一个名字而已.你有这个概念就行.
说了模块,再回到整个App. 那么APP是不是 由很多模块构成的? 那么我们把各大模块关联起来,那么是不是就是整个App了?
我是通过倒序的方法给你们讲的,目的是方便理解. 当然,正确概念是,模块不仅把你的页面关联起来,还有你写的服务等等都会关联起来的. 官方文档是这么写的: "用模块打包发布组件与服务". 打包,就是封装带一起.你可以理解成结合起来的意思.
app.module.ts 是你构建ionic项目的根模块. 在这里面,我们导入了 我们的几大模块(1. MeetingModel 会议模块 2.BoardroomModule 会议室模块,UserModule 个人用户模块. ). 以及全局Tabs,导航栏, 全局服务等等.
然后我再贴一个模块下的@NgModule 它 主要是把每个模块下的界面关联到一起
declarations 里面写的就是我们关联的这些界面. 再往下拆分, 每个界面其实由三部分构成(js,html,css).
从小大到构成了我们整个项目.
因为项目是公司上线项目,我不方便贴出来代码给大家参考的.. 并且网上有很多这样的项目可以下载. 关键是在于理解.. 我自己也是前前后后看了十几遍文档 ,从最初的一脸懵逼,到慢慢的渗透, 都是有一个过程的. 要养成自学的习惯. 等你什么时候能独立的掌握一个框架的话,当你再去学习其他的,都会有很多可以参考的地方让你去快速上手.
