美文网首页我爱编程
谈谈你对ionic2的项目结构的认知

谈谈你对ionic2的项目结构的认知

作者: 天亮前被寻找的一只猫 | 来源:发表于2017-09-08 15:01 被阅读47次

            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).

    从小大到构成了我们整个项目.   

    因为项目是公司上线项目,我不方便贴出来代码给大家参考的.. 并且网上有很多这样的项目可以下载.  关键是在于理解.. 我自己也是前前后后看了十几遍文档 ,从最初的一脸懵逼,到慢慢的渗透, 都是有一个过程的.  要养成自学的习惯.  等你什么时候能独立的掌握一个框架的话,当你再去学习其他的,都会有很多可以参考的地方让你去快速上手. 

    相关文章

      网友评论

        本文标题:谈谈你对ionic2的项目结构的认知

        本文链接:https://www.haomeiwen.com/subject/qoigjxtx.html