ionic入门之深链接和延迟加载

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71741941 主要模块延迟加载听起来像是一个复杂的过程,但实际上是非常直截了当。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71741941

主要模块

延迟加载听起来像是一个复杂的过程,但实际上是非常直截了当。从概念上讲,一段代码,随着应用程序请求而加载。NgModules 是可以组织我们的应用程序页,并将它们分开在不同的数据块的方式。

使用空白的面板,起动应用程序。

ionic start lazyLoadingBlank blank
cd lazyLoadingBlank

现在如果我们打开我们的 src/app/app.module.ts文件,我们可以检查默认值 NgModule
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
  declarations: [MyApp, HomePage],
  imports: [ ... ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage],
  providers: [ ... ]
})
export class AppModule {}
这里,我们可以看到我们要导入的 MyApp组件和 HomePage 组件。现在我们想要实现 HomePage懒加载。所以我们可以删除引用中 declarationsentryComponents,以及作为 import 语句。

那么 HomePage如何支持懒加载?我们可以提供它自己的 NgModule,将封装组件需要功能的一切。

让我们创建一个新文件出来。 src/pages/home/home.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }
在让我们在src/pages/home/home.ts 添加@IonicPage
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()//可以指定name,如果不指定那么默认是类名
@Component(... )
export class HomePage { ... }
相关文章
ionic入门之启动后会有短暂的白屏和黑屏
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
1378 0
|
Web App开发 JavaScript 前端开发
Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许差别请查阅相关文档即可。
1190 0
|
JavaScript 前端开发 Android开发
Ionic 入门与实战之第一章:Ionic 介绍与相关学习资源
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念、发展历程、适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源。原文发表于我的技术博客 1. Ionic 简介 在前端技术发展越来越快的今天,Hybrid App 开发技术也受到了很大的影响。
1662 0
|
数据可视化
Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具。原文发表于我的技术博客Ionic Lab 是 Ionic 发布的一个可视化、跨平台的项目管理工具,可以创建、测试、编译、发布 Ionic 项目。
1229 0
|
JavaScript 前端开发 编解码
Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置。原文发表于我的技术博客 1. Ionic 项目结构 这是初始化创建的 Ionic 项目结构,接下来将一一讲解。
1408 0
ionic入门之服务开发模式
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71330667 本章在ionic入门之多组件开发模式 基础上修改,创建服务用于多个view中调用,避免写重复的代码。
927 0
ionic入门之数据绑定显示-1
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71270393 [(ngModel)]是一个Angular语法,用于把hero.name绑定到输入框中。
1050 0
|
前端开发 Python
ionic入门之数据绑定显示-2
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
877 0
ionic入门之多组件开发模式
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71276112 在实战中建议是用多组件开发模式,高耦合低内聚。
745 0
|
Android开发 JavaScript 开发工具
ionic入门之开始使用ionic框架
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71120744 安装ionic npm install -g cordova ionic 首先,安装Node.js。
1296 0