Ionic开发文档

ionic3 开发之工作原理(目录结构、文件分析)及懒加载介绍

发布时间 2018-8-28 13:49:43   浏览量()   收藏(1)

onic3.x 目录结构分析

执行命令ionic start myApp tabs 生成ionic3项目myApp后,用vsCode打开项目可以看到项目中:

  • node_modules    //node 各类依赖包

  • resources  //android/ios 资源(更换图标和启动动画)

  • src     //开发工作目录,页面、样式、脚本和图片都放在这个目录下

  • www   //静态文件

  • platforms   //生成 android 或者 ios 安装包路径( platforms\android\build\outputs\apk:apk 所在位置)

  • plugins    // 已安装的cordova插件(通过ionic cordova plugins ls查看,通过ionic cordova plugins add/remove 插件名或路径来添加/删除)

  • config.xml     //打包成 app 的配置文件,也就是原生项目配置文件

  • package.json   //node安装模块时的依据文件,配置项目的元数据和管理项目所需要的依赖, 在里面配置的内容,在执行npm install命令后会生成到node_modules目录。

  • tsconfig.json     //TypeScript 项目的根目录,指定用来编译这个项目的根文件和编译选项

  • tslint.json      //格式化和校验 typescript

src目录详细介绍

src目录:工作目录,开发完成后通过ionic的命令行生成为原始的静态html页面,并存放在www目录,也就是说www在开发过程中是不需要理的,可以任意删除。

当我们想打包app时,命令行执行打包指令会生成一个调用浏览器插件的原生项目,同时把www目录拷贝到项目中,浏览器插件的入口网页指向www的index.html,从而在app中实现本地浏览网页的效果。

其中页面和脚本等因为是本地的就不需要网上加载,在数据加载过程中就已经可以看到页面,等数据加载完成自动局部刷新页面即可,这就是ionic的运行机理

src 下面文件分析:

  • app:入口文件夹

    -app.component.ts:入口页的业务逻辑(根组件);

    -app.html:入口页的html模板;

    -app.module.ts:入口模块配置, 告诉Angular如何编译和启动应用程序;

    -app.scss:入口页的样式(全局样式);

    -main.ts:启动模块入口;

  • assets:样式、图片、字体、脚本等静态文件;
    pages:开发页面,含html、ts、css;
    theme:主题文件夹,里面可以放置多个主题文件,方便切换主题;

  • components:自定义组件(公用、可复用模块);
    directives:自定义指令(注入到组件上为组件添加功能);
    pipes:自定义管道(用于格式化显示数据);
    providers:自定义服务(工具类、业务处理类等等);

了解IonicModule之前,我们需要先看下NgModule与@NgModule 装饰器:

NgModule是angular(这里不再详细介绍)框架的概念。

  • 一个NgModule描述如何将应用程序各部分组合在一起。每个应用程序都至少有一个Angular module,即启动应用程序时引导的根模块。

  • @NgModule decorator将AppModule标识为NgModule类。@NgModule接受一个元数据对象,该对象告诉Angular如何编译和启动应用程序。

  • NgModule 的元数据会做这些:
    * 声明某些组件、指令和管道属于这个模块。
    *  公开其中的部分组件、指令和管道,以便其它模块中的组件模板中可以使用它们。
    * 导入其它带有组件、指令和管道的模块,这些模块中的元件都是本模块所需的。
    * 提供一些供应用中的其它组件使用的服务。

@NgModule 装饰器:

  • @NgModule 装饰器表明 AppModule 是一个 NgModule 类。 @NgModule 获取一个元数据对象,它会告诉 Angular 如何编译和启动本应用。元数据对象关键字段:

    *declarations —— 声明属于这个模块的组件,指令,管道等等. 声明后就可以在这个模块中使用它们了.
    *imports —— 导入需要依赖的一些其他的模块,比如 BrowserModule 以获取浏览器特有的服务,比如 DOM 渲染、无害化处理和位置(location)。
    *providers —— 各种共用的服务。
    *bootstrap —— 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去,Angular 创建它并插入 index.html 宿主页面。

IonicModule与IonicPageModule

了解了NgModule以后,IonicModule与IonicPageModule就好解释了。

  • IonicModule是一个引导Ionic应用程序的NgModule。

  • IonicPageModule是一个NgModule,它引导子IonicPage以设置路由。

回头我们再好好看下@NgModule中的这些属性:

declarations

  • 模块的声明数组告诉Angular哪些组件属于该模块。

  • 当创建更多的组件时,将它们添加到声明中。如果您使用组件而不声明它,则角返回一条错误消息。

  • 声明数组只接受可声明的内容:组件、指令(directive)和管道(pipe)。

  • 声明必须只属于一个模块。如果试图在多个模块中声明同一个类,则编译器会发出错误。

  • 这些已声明的类在模块中是可见的,但在不同模块中的组件是不可见的,除非它们是从这个模块导出,而另一个模块导入这个模块。

entryComponents(入口组件):

  • 这些组件将会在这个模块定义的时候进行编译 , Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver

  • There are two main kinds of entry components:

  • The bootstrapped root component.

  • A component you specify in a route definition.

  • Angular 必须加载的组件是入口组件

  • 引导组件是在引导过程(应用程序启动)中加载到DOM的入口组件。其他入口组件通过其他方式动态加载,例如使用路由器。

  • 大多数应用开发者都不需要把组件添加到 entryComponents 中。

  • Angular 会自动把恰当的组件添加到入口组件中。 列在 @NgModule.bootstrap 中的组件会自动加入。 由路由配置引用到的组件会被自动加入。 用这两种机制添加的组件在入口组件中占了绝大多数。

bootstrap:

  • the root component that Angular creates and inserts into the index.html host web page.

  • @NgModule.bootstrap 属性告诉编译器这是一个入口组件,同时它应该生成一些代码来用该组件引导此应用。

ionic关键之页面:IonicPage

  • Ionic 页面基于url注册和显示页面详情,当页面被NavController推出来的时候,URL将被更新,以匹配到此页面的路径。

  • 与传统的web应用程序不同,url在Ionic应用程序中不指定导航。相反,url帮助我们链接到特定的内容片段。当我们导航时,会更新当前URL。

  • 我们将我们的URL系统称为深层链接系统,而不是路由器,以鼓励Ionic开发人员将URL视为面包屑(内容片段),而不是真正的导航。

ionic3.x懒加载实现:

官方介绍在这里
懒加载是ionic3.x的新特性,Lazy Loading 可以在初始化时只加载一些必要的代码,非必要的代码分离出来在需要加载的时候再加载之,理论上能让应用加快一定的启动速度。

下面以MyPage的加载为例,懒加载的实现:
第一步:设置深度链接: IonicPageModule中添加此页面,IonicPageModule.forChild用于导入页面模块


广告会让浏览体验不好,可这是网站的唯一收入,请点击下面的百度广告,支持老高的开源行动吧!