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

2018-07-29 本文已影响2人星辰大海_王

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用于导入页面模块

@NgModule({
  declarations: [ MyPage ],
  imports: [
  IonicPageModule.forChild(MyPage)
 ],
   entryComponents: [
   MyPage
]
 })
export class MyPageModule {}

第二步：将@IonicPage decorator添加到组件中。最简单的用法是添加一个空的decorator:

@IonicPage()
@Component({
   templateUrl: 'main.html'
})
export class MyPage {}

这将自动创建一个链接到MyPage组件，使用与类名称相同的名称:“MyPage”。@IonicPage() 等同于：@IonicPage({‘MyPage’})
@IonicPage decorator接受了一个DeepLinkMetadataType对象。此对象接受以下属性:name, segment, defaultHistory, and priority.。所有这些都是可选的，但是可以用来创建复杂的导航链接。

第三步：使用这个名称导航到该页面了。例如:

@Component({
   templateUrl: 'another-page.html’
 })
export class c {
   constructor(public navCtrl: NavController) {}
    goToMyPage() {
         // go to the MyPage component
        this.navCtrl.push('MyPage');
     }
}