目录创建页面组件装饰器的简单认识在AppModule中注册页面的首次展示使用独立的模板文件APP中最基本的元素就是页面，所以当我们创建一个新的APP，我们应该了解如何创建一个新的页面。创建页面组件在ionic中，页面是以组件的形式存在的，每个页面都是一个独立的组件。我们现在需要创建一个名为test的页面，我们现在在pages文件夹下新建一个文件夹，并创建一个同名的以.ts结尾的文件。在test.ts中添加第一部分代码classTestPage{}在这几行代码中，我们只做了一件事，就是声明TestPage页面类：export关键字：暴露该类，以便其他文件导入。类命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage、ContactPage等。简单了解装饰器后，发现有一串看似不清楚的类声明语句之前的代码。它是组件装饰器。装饰器（decorator）是ES6中以@开头的一种特殊函数，可以动态的给类添加一些函数。在这里，组件装饰器将为页面类提供创建页面视图的函数。而这里Component并不是凭空出现的，而是文件的第一行，是通过import语句引入的。import{Component}from'@angular/core'@angular/core是一个npm模块，定义了angular的核心功能，你可以在node_modules目录下找到它。我们在装饰器、选择器和模板中配置了两个东西：选择器：为页面指定选择器的名称，可以在css中为组件使用特定的样式，在ionic3.x中规范以page-开头，在为了不造成混淆，需要保持每个页面选择器的唯一性。

HelloWorld!

template：模板的字符串，其实就是html代码，也就是最终显示在页面上的内容；这里的字符串是用`符号包裹的（也就是esc下面那个），一来可以随意换行，二来不会有转义引号的问题。当然，它在ES6中有更重要的作用（参见文档末尾的“模板字符串”）。AppModule中的注册页面APPModule位于src/app目录下的app.module.ts中，APPModule是整个应用的根模块。它是一家大工厂，负责组装我们需要使用的所有东西。我们需要在根模块中注册新添加的页面，只需要两个简单的步骤：1.引入TestPage页面类，我们在文件开头添加相关语句，如果你是对代码整洁度有要求的人大家一定会在现有几个页面的介绍语句附近加上：import{AboutPage}from'../pages/about/about';从'../pages/contact/contact'导入{ContactPage};从'../pages/home/home'导入{HomePage};从'../pages/tabs/tabs'导入{TabsPage};导入{TestPage}来自'../pages/test/test';idea后面的地址不需要加.ts扩展名。如果在编辑器或IDE中安装自动填充路径的插件，很容易把后缀加错。2、在declarations和entryComponents数组中分别添加TestPage：@NgModule({declarations:[...TabsPage,TestPage],...entryComponents:[...TabsPage,TestPage],...表示TestPage在APP需要使用的组件是动态组件。为了说明我们不知道如何从现有页面打开测试页面，我们用笨办法观察刚刚创建的页面，打开pages/tabs/tabs.ts，导入TestPage，替换tab1Root，让application页面的首屏成为测试页面。...从'../test/test'导入{TestPage};...导出类TabsPage{tab1Root=TestPage;...运行serve命令，打开本地服务器，使用单独的模板文件得到这样的界面我们得到的显然不是典型的APP页面，现在我们在test文件夹下新建一个test.html测试/ion-header>

HelloWorld!

这个HTML代码是一个标准的ionic页面结构，很多标签都是ionic自定义的，页面分为headers（ion-header）和mainbody（ionic-content）两部分。头部包含导航栏（ion-navbar）和标题（ion-title），主体部分是我们自定义的内容。回到test.ts，将刚才嵌入装饰器的模板代码template:`

HelloWorld!

`替换为引入独立模板文件的代码templateUrl:'./test.html'。注意这里的包路径符号变成了单引号。发生变化后，浏览器会自动刷新页面，此时我们看到的是当前页面：综上，我们完成了一个页面的创建。看起来步骤很多，但是熟练之后是一个非常快的过程。一共三步：1.创建组件文件.ts2。在AppModule中注册组件3.创建模板file.html第二步和第三步实际上可以互换顺序。下一章会介绍页面间的跳转和页面栈的原理。参考资料1.装饰器（ECMAScript6入门）2.模板字符串（ECMAScript6入门）