ionic2基础(二)
上回说道如何创建项目以及注意事项还有项目结构,这回来介绍下如何创建页面和添加页面
首先我们在pages里面创建一个名为"home"的文件夹,然后再在这里面创建home.html、home.scss、home.ts这三个文件,就像这样:
然后我们在home.ts文件里写下这样的代码:
import { Component } from '@angular/core'; //这个是导入angular的组件 import { NavController } from 'ionic-angular';//这个是引入导航控制器,跳转页面时用的 @Component({ selector:'page-home', //这个是选择器,作用是注册你要使用的样式文件,比如home.scss templateUrl:'home.html' //这个是文件地址,作用是注册你要用到的html页面 }) //将你导入的组件注册在这里,这相当于把home.ts与home.html以及home.scss联系在了一起 export class homePage{ constructor(public navCtrl:NavController){} //这是个构造器,参数就是你引入的控制器,不过你需要创建一个参数名来接收控制器,前面的public是你给予的权限,表示在此构造器之外你也可以用到它,如果设置为static就说明只能在构造器里使用 }//创建一个类,所有方法需要在这里面实现
当然,导入的组件和控制器不止这些,根据需求来选择,但是最基本也是最重要的就是这两个,如果你需要页面跳转就要导入NavController。
home.ts设置好了以后,我们来看下home.scss,他可以像使用css那样来定义类选择器和ID选择器,不过在此之前,你需要给他们包在一个全局里面,就像这样:
page-home{ .list .item{ ...... } ...... }
这个名称你可以随便起,但一定要和home.ts里的selector的名称要一致,否则........你懂得,会报错,而不是出现样式混乱,在服务器环境下出现错误或者html结构错误,都会报错,甚至白屏,所以你要非常细心才行。
这些设置完毕后我们可以来搭建页面结构了,这里事先说明一下,除index.html外需要用到文档标识标签和body外,其余所有子页面都要用ionic的组件来构建,就像这样:
<ion-header> ...... </ion-header> <ion-content> ...... </ion-content> <ion-footer> ...... </ion-footer>
首先首页可以没有头部,可以没有页脚,但是千万不能没有ion-content,否则会这样:
是的,除了header以外,下面是黑的,然而你并没有做错什么,所以,你需要在每个页面里加上这个组件,并且,主要结构要在这里面搭建,不然会白屏,要么就出错,要么就会出其不意的在某个地方出现一条黑....
页面编辑完毕以后我们找到app.model.ts,来配置页面和组件,像这样:
import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; //这个是你要注册的页面,前面的Hompage,是你在home.ts里创建的那个类的名称,而后面则是对应的文件路径,记住一定要添加.html页面的路径,否则会报错 @NgModule({ declarations: [ MyApp, HomePage //在这里需要添加你所创建的类 ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage//在这里需要添加你所创建的类 ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}
配置好了以后,我们来启动服务来看下,启动服务的命令为
ionic serve
然后稍等片刻,比较慢,像这样:
这里要说明的是:在启动服务之前,你需要在项目的根目录安装node_model包,这样才可以成功启动服务,不然会报错,安装node包的命令为:
cnpm install
一定是要安装在项目的根目录,否则会报错,成功启动以后会是这样:
以上就是我给大家分享的关于ionic2页面的创建和添加,希望对你有用哦~~~