博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ionic2+ 基础
阅读量:5071 次
发布时间:2019-06-12

本文共 2048 字,大约阅读时间需要 6 分钟。

ionic2+ 基础

一 项目入口

1.index.html

2.main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';//设置AppModule为引导模块platformBrowserDynamic().bootstrapModule(AppModule);

3. app.module.ts

imports: [IonicModule.forRoot(MyApp)],bootstrap: [IonicApp]

4. app.components.ts

@Component({  templateUrl: 'app.html'})export class MyApp {}

二 定义模块&组件

组件定义

import { Component } from '@angular/core';@Component({    templateUrl: 'home-page.html'})export class HomePage {    constructor() {    }}

service 定义

import {Injectable} from "@angular/core";//声明为可注入服务  单例@Injectable()export class HomeService {  constructor() {      }}

模块定义

import { NgModule } from '@angular/core';import { IonicModule } from 'ionic-angular';import { HomePage } from './home.page'import { HomeService } from './home.service'@NgModule({    //引入其他模块    imports: [        IonicModule    ],    //声明组件    declarations: [        HomePage    ],    //导出组件标签    exports:[            ],     //导出组件类    entryComponents: [        HomePage    ],    //导出服务    providers: [        HomeService    ]})export class HomeModule {}

主模块引用其他模块

import { NgModule, ErrorHandler } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';import { StatusBar } from '@ionic-native/status-bar';import { SplashScreen } from '@ionic-native/splash-screen';import { MyApp } from './app.component';import { TabsPage } from './tabs/tabs';//引入自定义模块import { HomeModule } from './home/home.module';@NgModule({    declarations: [        MyApp,        TabsPage    ],    imports: [        BrowserModule,        IonicModule.forRoot(MyApp),        //导入自定义模块        HomeModule    ],    bootstrap: [IonicApp],        entryComponents: [        MyApp,        TabsPage    ],    providers: [        StatusBar,        SplashScreen,        {provide: ErrorHandler, useClass: IonicErrorHandler}    ]})export class AppModule {}

转载于:https://www.cnblogs.com/final-elysion/p/8502525.html

你可能感兴趣的文章
js中eval详解,用Js的eval解析JSON中的注意点
查看>>
单链表倒置
查看>>
视频大全
查看>>
命令模式
查看>>
第7章 Iptables与Firewalld防火墙。
查看>>
js思维导图
查看>>
Android Animation---实现ListView项一行一行逐渐显示效果
查看>>
WIN7下使用OpenSCManger和OpenService函数的注意
查看>>
HTML5 Device Access (设备访问)
查看>>
linux 命令笔记
查看>>
【JLOI2014】松鼠的新家
查看>>
明华 mwrf32 相关Api文档
查看>>
html关于强制显示、隐藏浏览器的滚动条
查看>>
vim命令行模式
查看>>
总结:垃圾回收算法
查看>>
GetMemory
查看>>
redis系列-redis的使用场景
查看>>
BZOJ2726【SDOI2012】任务安排(斜率优化Dp+二分查找)
查看>>
O2O项目经验
查看>>
Binder学习笔记(八)—— 客户端如何组织Test()请求 ?
查看>>