执行命令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目录:工作目录,开发完成后通过ionic的命令行生成为原始的静态html页面,并存放在www目录,也就是说www在开发过程中是不需要理的,可以任意删除。
当我们想打包app时,命令行执行打包指令会生成一个调用浏览器插件的原生项目,同时把www目录拷贝到项目中,浏览器插件的入口网页指向www的index.html,从而在app中实现本地浏览网页的效果。
其中页面和脚本等因为是本地的就不需要网上加载,在数据加载过程中就已经可以看到页面,等数据加载完成自动局部刷新页面即可,这就是ionic的运行机理
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:自定义服务(工具类、业务处理类等等);
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 宿主页面。
了解了NgModule以后,IonicModule与IonicPageModule就好解释了。
IonicModule是一个引导Ionic应用程序的NgModule。
IonicPageModule是一个NgModule,它引导子IonicPage以设置路由。
模块的声明数组告诉Angular哪些组件属于该模块。
当创建更多的组件时,将它们添加到声明中。如果您使用组件而不声明它,则角返回一条错误消息。
声明数组只接受可声明的内容:组件、指令(directive)和管道(pipe)。
声明必须只属于一个模块。如果试图在多个模块中声明同一个类,则编译器会发出错误。
这些已声明的类在模块中是可见的,但在不同模块中的组件是不可见的,除非它们是从这个模块导出,而另一个模块导入这个模块。
这些组件将会在这个模块定义的时候进行编译 , 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 中的组件会自动加入。 由路由配置引用到的组件会被自动加入。 用这两种机制添加的组件在入口组件中占了绝大多数。
the root component that Angular creates and inserts into the index.html host web page.
@NgModule.bootstrap 属性告诉编译器这是一个入口组件,同时它应该生成一些代码来用该组件引导此应用。
Ionic 页面基于url注册和显示页面详情,当页面被NavController推出来的时候,URL将被更新,以匹配到此页面的路径。
与传统的web应用程序不同,url在Ionic应用程序中不指定导航。相反,url帮助我们链接到特定的内容片段。当我们导航时,会更新当前URL。
我们将我们的URL系统称为深层链接系统,而不是路由器,以鼓励Ionic开发人员将URL视为面包屑(内容片段),而不是真正的导航。
官方介绍在这里
懒加载是ionic3.x的新特性,Lazy Loading 可以在初始化时只加载一些必要的代码,非必要的代码分离出来在需要加载的时候再加载之,理论上能让应用加快一定的启动速度。