声明：本文为转载，原文地址：http://tedeum.iteye.com/blog/2348834，原文作者：tedeum。

0 开始之前

通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。

1 创建一个新的Ionic 2 应用

我们将使用有Ionic团队创建的tutorial模板，可见于官方教程，来创建我们的应用程序。要做到这一点，您需要运行以下命令：

ionic start ionic2-tutorial tutorial --v2

现在您的应用程序将自己开始建立。为运行后续的命令，你应当将项目目录作为当前工作目录：

cd ionic2-tutorial

简单瞟一眼应用效果，使用serve命令：

ionic serve

上面也说了，这些命令应该在当前项目目录下执行。

2 目录结构

如果你看看生成的文件和文件夹，这一切看起来非常类似于一个Ionic 1最初的应用程序。这也是一个非常典型的科Cordova风格项目结构。

如果你再看看在src 文件夹，事情开始看起来有点不同:

目录结构——src

通常在一个Ionic 1应用程序中,人们所有的Javascript文件(控制器、服务等)在一个文件夹中,所有的模板在另一个文件夹，然后所有的样式包含在一个app.scss文件中。

Ionic 2应用程序的默认结构通过功能的组织，因此一个特定组件(在上面的示例中我们有一个基本的页面组件,组件列表,和一个项目详细信息组件)的所有逻辑、模板和样式都在一起。这是Angular 2方法论的完美应用，一切都是独立的组件，这些组件可以很容易地在其他地方或项目中重用。如果你想重复使用一个特定的功能,或有很多人工作在同一个项目中,旧的Ionic 1方法会变得非常麻烦。

根据功能组织代码的想法不是Angular 2 & Ionic 2 的特权，事实上人们在Ionic 1中使用和倡导基于特征的方式，只是大多数人没那样做（趋势是很难打破）。通过Angular 2 的工作方式，默认就使用基于特征的结构，因此不难推行这种结构。

index.html

已经是惯例了，浏览器第一个打开的文件就是 index.html 。因此我们先来看看Ionic 2中是怎样的：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head><meta charset="UTF-8"><title>Ionic App</title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"><link rel="manifest" href="assets/manifest.json"><meta name="theme-color" content="#4e8ef7"><!-- un-comment this code to enable service worker<script>if ('serviceWorker' in navigator) {navigator.serviceWorker.register('service-worker.js').then(() => console.log('service worker installed')).catch(err => console.log('Error', err));}</script>--><link href="build/main.css" rel="stylesheet"></head>
<body><!-- Ionic's root component and where the app will load --><ion-app></ion-app><!-- cordova.js required for cordova apps --><script src="cordova.js"></script><!-- The polyfills js is generated during the build process --><script src="build/polyfills.js"></script><!-- The bundle js is generated during the build process --><script src="build/main.js"></script></body>
</html>

这看上去非常简洁，和Ionic 1没有什么不同。这里最大的不同是没用附加ng-app 到body标签（目的是是让Ionic知道应用存在的地方），而是使用了：

<ion-app></ion-app>

根组件将在这里被创建，通常你的入口应用在这里注入。cordova.js的引用让我们可以使用Cordova创建应用（将应用打包为native应用，可以提交到App Store）,polyfill.js是为浏览器某些特点功能的基本补丁，main.js是我们应用绑定的代码。
基本上，这看起来就是一个非常普通的网页。

assets

这个assets目录用于保存你工程里面使用的静态文件，就像图片、JSON数据文件等等。任何这个文件夹下的东西都会在应用程序每次build编译时覆盖拷贝到你的build目录。

theme

这个 theme 目录包含了你应用程序中的 global.scss 和variables.scss 文件。多数你应用中的样式是通过使用每个组件自己的 .scss 文件，但是你可以使用 global.scss 文件定义任何自定义样式，通过不同的方式，你也可以修改 variables.scss 文件中的 SASS 变量来修改你应用的样式。

app

所有的Ionic 2 App 都有 root component。这不是和你应用里面其他组件的差别，一个明显的差别是它在自己的 app 文件夹中，而且被命名为 app.component.ts。
如果你有一点不确定 component 到底是个什么东西，我们具体来看看：

@Component({templateUrl: 'my-component.html'
})
export class Something {// ...snip
}

这就是一个具有 something 功能的组件，技术上来说component关联一个视图，否则这个类可能考虑为services更好。不管是component还是servece，创建都差不多，都可以被导入import到你的应用中。

根组件root component是第一个被加载的，接下来我们看看root component是怎么定义和工作的。我们先看看整个文件，然后分解说明：

import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';@Component({templateUrl: 'app.html'
})
export class MyApp {@ViewChild(Nav) nav: Nav;// make HelloIonicPage the root (or first) pagerootPage: any = HelloIonicPage;pages: Array<{title: string, component: any}>;constructor(public platform: Platform,public menu: MenuController) {this.initializeApp();// set our app's pagesthis.pages = [{ title: 'Hello Ionic', component: HelloIonicPage },{ title: 'My First List', component: ListPage }];}initializeApp() {this.platform.ready().then(() => {// Okay, so the platform is ready and our plugins are available.// Here you can do any higher level native things you might need.StatusBar.styleDefault();});}openPage(page) {// close the menu when clicking a link from the menuthis.menu.close();// navigate to the new page if it is not the current pagethis.nav.setRoot(page.component);}
}

1.imports

import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ListPage } from '../pages/list/list';

最开始，有一些imports定义。我们用于加载其他组件或服务到这个组件。所有的组件，除了根组件，你都可以看到类定义是这样的：

export class Something {}

非常简单，我们 expoet 组件就是为了能够在其他地方 import。在这个例子里面，我们从 Ionic 库导入了 Platform， Nav和 MenuController 服务。 Platform 提供了关于运行应用程序平台的信息， Nav 提供应用里面导航的引用， MenuController 允许我们提供控制菜单。

我们从Angular 2导入 Component 和 ViewChild 。 Component 几乎无处不在，因为我们用于创建组件， ViewChild 用于获取组件中元素的定义。

我们也导入 importing 了我们自己创建的HelloIonicPage 和 ListPage 组件。这些组件定义在 src/pages/hello-ionic/hello-ionic.ts 和 src/pages/list/list.ts (根据 import 语句对应的路径)。注意我们没有包含src路径在import中，因为是当前文件的相对路径，而我们已经在src目录中。因为我们在名为app的子文件夹中，所以我们到上级目录使用../。

接下来我们看到从ionic-native导入 StatusBar，因为我们通过Ionic2使用Cordova来访问本地功能，就像控制 status bar。Ionic Native是由Ionic提供的服务以便于方便使用Cordova插件。尽管你不用为了使用Ionic Native而包含Native functionatilty，你可以直接使用Cordova插件。

2. Decorator

Decorators，就像 @Component 和 @Directive，通过使用在类定义上添加元数据（扩充信息）给我们的组件，看看我买的 root component：

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

这里我们使用 templateUrl 让组件知道使用哪个文件作为视图（你也可以使用 template 作为内联模版而不是 templateUrl）。

3. Class 定义

之前的所有都没有真正的做一些功能，只是一个设置和搭建。现在我们要开始定义一些行为，来看一看吧：

export class MyApp {@ViewChild(Nav) nav: Nav;// make HelloIonicPage the root (or first) pagerootPage: any = HelloIonicPage;pages: Array<{title: string, component: any}>;constructor(public platform: Platform, public menu: MenuController) {this.initializeApp();// set our app's pagesthis.pages = [{ title: 'Hello Ionic', component: HelloIonicPage },{ title: 'My First List', component: ListPage }];}initializeApp() {this.platform.ready().then(() => {// Okay, so the platform is ready and our plugins are available.// Here you can do any higher level native things you might need.StatusBar.styleDefault();});}openPage(page) {// close the menu when clicking a link from the menuthis.menu.close();// navigate to the new page if it is not the current pagethis.nav.setRoot(page.component);}
}

首先我们定义一个新类MyApp，classes是ES6的新特性。

我们传入一些参数到构造函数constructor：platform 和menu 然后它们的类型是 Platform 和MenuController。这样我们通过构造函数注入inject了这些服务（比如MenuController 将作为菜单），通过使用public关键字使得作用域在整个类；意味着我们可以通过this.menu 或者 this.platform在这个类里面的任何地方访问它们。

The Platform service提供了程序所运行平台的相关信息 (例如：宽高、横竖、分辨率等），这里我们用来判断app是否就绪。

MenuController服务允许我们创建和管理一个滑动菜单。

在构造函数的上方，我们也定义了几个成员变量用于保存我们类里的rootPage 和 pages。通过在构造函数上面定义，我们就可以在整个类里通过this.rootPage或 this.pages来使用。

我们定义 rootPage 为 HelloIonicPage 组件，作为首先显示的第一页（你也可以简单的改变它，用ListPage代替）。

构造函数之外，我们定义了一个名为 openPage 的方法，传入一个page参数，通过调用setRoot方法设置为当前页。注意，我们获取this.nav引用通过一种奇怪的方式。通常，我们导入NavController 使用与 MenuController和Platform 同样的方式然后调用它的 setRoot，但是你不能从根组件调用它，作为替换我们获取引用通过Angular2提供的@ViewChild。

一个初学者特别困惑的事是这样：

rootPage: any = HelloIonicPage;
pages: Array<{title: string, component: any}>;

之前提到过，这里是创建成员变量。但是你可能会想Array<{title: string, component: any}>是什么鬼。你应该知道，Ionic 2使用TypeScript，这些鬼就是types（类型）。类型简单的说就是“这些变量应该只含有这些类型的数据”。这里，我们可以说rootPage可以包含any类型的数据，pages仅可以包含数组，而这些数组仅可以包含由字符串标题和any类型component组成的对象。这是一个非常复杂的类型，你可像下面这样简单处理：

rootPage: any = HelloIonicPage;
pages: any;

或者你也可以完全不用类型。使用类型的好处是给你的应用程序增加了错误检查和一个基础水平的测试——如果你的pages数组被传入了一个数字，那么你的应用将被中断，而这将直观的去了解和处理。

Root Components 模版

当我们创建根组件是我们提供了一个模版给组件，就是被渲染到屏幕的内容。1）.这里是我们在浏览器运行时根组件的样子：

现在我们稍微详细的看看模版HTML。

<ion-menu [content]="content"><ion-header><ion-toolbar><ion-title>Pages</ion-title></ion-toolbar></ion-header><ion-content><ion-list><button ion-item *ngFor="let p of pages" (click)="openPage(p)">{{p.title}}</button></ion-list></ion-content></ion-menu><ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

先看下第一行：

<ion-menu [content]="content">

这是menu元素的content 的属性为 content。记住这里的 “content” 是表达式而不是字符串。我们不是设置 content 属性为字符串“content”，我们设置的是变量 “content”。如果你跳到文件底部你就会看到：

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

上面代码通过添加#content，我们就创建了一个名为content的变量指向这个组件，也是menu的content属性使用的变量。所以，menu将使用<ion-nav>作为它的主要内容。这里我们设置root属性为我们在类中定义(app.ts)的rootPage。

接下来我们看看是什么有意思的东西：

<button ion-item *ngFor="let p of pages" (click)="openPage(p)">{{p.title}}
</button>

在这一小块代码中挤进了Angular 2的语法。为构造函数中定义的每一个页面创建一个按钮，号语法意味这它将为每个页面创建一个嵌入式模版（它不会在DOM中渲染出上面的代码，而是使用模版创建），通过使用*let p我们可以获取到某个特定页面的引用，用于点击事件时传递到openPage方法（在根模块中定义的）。回过头去看看openPage方法可以看到这个参数用于设置rootPage**：

this.nav.setRoot(page.component);

App Module

我们已经覆盖了一些根模块的细节，但是这里还有一个名为app.modules.ts的神秘文件在app目录下。

为了在我们的程序中使用页面和服务，我们需要把它们添加到 app.module.ts文件。我们创建的所有页面需要被添加到 declarations 和 entryComponents 数组，所有服务需要被添加到providers数组，所有自定义的组件或pipes只需要被添加到declarations数组。

你还会发现main.dev.ts 和 main.prod.ts 文件在同一个目录下面。其中只有一个会被用到（取决于你是开发还是发布的build）。实际上它负责启动您的应用程序(这个意义上它有点像index.html)。它将导入app module并启动应用程序。

页面

根组件是一个特例，我们通过 ListPage组件来看看如何添加一个普通的视图到一个Ionic2应用程序。你能看到这个页面,通过选择应用程序中的“My First List”菜单，来查看这个页面：

代码是酱紫的：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ItemDetailsPage } from '../item-details/item-details';@Component({templateUrl: 'list.html'
})
export class ListPage {selectedItem: any;icons: string[];items: Array<{title: string, note: string, icon: string}>;constructor(public navCtrl: NavController, public navParams: NavParams) {// If we navigated to this page, we will have an item available as a nav paramthis.selectedItem = navParams.get('item');this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane','american-football', 'boat', 'bluetooth', 'build'];this.items = [];for(let i = 1; i < 11; i++) {this.items.push({title: 'Item ' + i,note: 'This is item #' + i,icon: this.icons[Math.floor(Math.random() * this.icons.length)]});}}itemTapped(event, item) {this.navCtrl.push(ItemDetailsPage, {item: item});}
}

和根组件一样，我们有一些 import 语句，然后我们同样有 @Component 修饰符：

@Component({templateUrl: 'list.html'
})

然后是这样的：

export class ListPage {}

这里有个前缀 export 而在根组件中没有。这允许我们的页面组件在其他地方被导入（import）。
这个视图中有个叫 NavParams 的组件通过构造函数加了进来。在导航的时候我们就可以返回这个视图的详细信息，我们先查一下值：

this.selectedItem = navParams.get('item');

这时是undefined，因为这个页面被设置成了rootPage（在根组件中通过openPage方法设置），我们没用通过navigation stack导航到这个页面。

Ionic 2 中，如果你想添加一个视图，并且保存页面导航历史随时可以返回，那么你需要push这个页面到n
navigation stack，对应的移除用pop。

在 ListPage 组件中，我们通过 itemTapped 方法（ListPage 模版中，但某条记录被点击时触发） push 了 ItemDetailsPage ：

itemTapped(event, item) {this.navCtrl.push(ItemDetailsPage, {item: item});
}

上面push 了 ItemDetailsPage 组件到 navigation stack，使之成为当前活动视图，然后把被点击的item传入详情页中。

现在我们看看细节页面 ItemDetailsPage 组件的细节，我们可以使用 NavParams 获取传入记录的细节，好像这样（毕竟我们push了些东西到navigation stack）：

this.selectedItem = navParams.get('item');
console.log(this.selectedItem);

这就是Ionic2主从复合的基本模式了。
还有就是记住，你可以通过命令行轻松创建页面：

ionic g page MyPage

这将自动创建你需要的页面文件。

总结

毫无疑问Ionic 2和Angular 2 取得了巨大的进步在组织结构和性能上，但他们看起来也很吓人。尽管最初似乎需要很多学习和面对困扰，但我认为它很有意义。

声明：本文为转载，原文地址：http://tedeum.iteye.com/blog/2348834，原文作者：tedeum，搬运到自己的博客只为了方便学习，如有侵权马上删除。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

【ionic App问题总结系列】ionic登录拦截机制-使用Modal作为登录框
前言先来说说网页和App中交互的不同。在网页中，页面与页面之间的跳转过程较少会采用转场动画，直接就是页面切换。而在App的交互方式中，页面切换是有转场动画的。页面进入一般都是从右到左的动画切换。这种交互方式通常表示页面正常的切换…...
2024/4/21 3:43:28
angular2/ionic2 实现搜索结果中的搜索关键字高亮
添加一个pipe： import { Pipe, Injectable, PipeTransform } from angular/core; import { DomSanitizer } from angular/platform-browser;Pipe({name: keyword }) Injectable() export class KeywordPipe implements PipeTransform {constructor(private sanitize…...
2024/4/21 3:43:26
anjularjs 干货+ionic +百度地图
最近在做公司自己的app ，借鉴移动端开发的模式，混合开发，看了一些国内的appcan( http://www.appcan.cn/),apicloud(http://www.apicloud.com/)也用它们的IDE 做了一些demo,感觉联网编译，各种不爽。这里不多说，自己可以…...
2024/4/21 3:43:26
angular4实战（2） router
router 单页面应用通过路由来去渲染不同的视图，为用户在同一个页面看到不同的场景，提供基础服务。在上一章节，通过新建项目之后，ngModule会自动引入路由模块，接下来需要做的事情就是对路由模块进行配置。为了方便维…...
2024/4/26 12:25:37
从无到有构建Angular2 后台管理系统的前端架构
该项目很久已不做维护，谢谢大家的支持最近公司的项目需求，需要设计一套后台管理系统的前端框架，我使用了Angular-cli构建Angualr2的模板，并按照需求，添加了ng2-charts/ng2-smart-table/file-upload等ng2的插件&#x…...
2024/4/21 3:43:23
angular zone.js:2969 GET http://localhost:4200/assets/mock-data/your.json 404 (Not Found)
在其他地方新建文件，访问报错。如果在请求本地json文件，报错，文件路径找不到，可能是文件放的地方不对，可以选择放在assets下。src | - app | - assets| - css|- img|- mock-data|your.json如果您正在使用Angular CLI和…...
2024/4/21 3:43:25
ECharts简单Demo之WEBFORM版本
前言本来今天上午已经快写完了，一个ctrl+w关闭了，草稿箱不知道怎么回事，没有保存O__O “…下午边看LPL比赛又重写一次。这篇博文应该是在2016年就完成的，因为种种原因耽误了。本来想实现一个数据和图形转换的简单功能，查阅了相关资料，感觉使用百度开发的ECharts比较简单…...
2024/4/27 6:33:05
发布服务器后的项目访问404,Angular 项目打包之后，部署到服务器，刷新访问404解决方法...
将前端代码打包部署到服务器中，当跳转到相应路由界面，刷新地址，服务找不到地址页面，所以会报 404 - Page Not Found。解决方法：只需要将路由转换成哈希值: userHash: true，将路由转化成“#”号的形式以下…...
2024/4/20 20:02:15
Django,Angular结合的一些问题解决方法
Django,Angular结合的一些问题解决方法 1 模板标签的问题 Django和Angular都使用{{varname}}的标签语法，存在冲突，解决方法之一是配置Angular使用不同的标签，例如使用[[varname]],这个需要在模块级别配置 angular.module(app,[]).config([$i…...
2024/4/20 20:02:14
Angular2--拦截器服务
前言最近小编做的一个有关Angular的项目，这是一个前端的项目，在项目的最后需要用到后端提供的接口来实现前端和后端的交互，这个时候就用到了拦截器服务。下面咱们就具体的了解一下拦截器服务是什么吧。叙述背景需求 1.项目开发、测试、发…...
2024/4/20 20:02:14
基于angular2 的 http服务封装
最近在项目中折腾了下angular2,所以出来跟大家分享，希望有帮助，每个公司业务不一样，按实际情况而定，个人学习心得，不作为标准。 1、定义http-interceptor.service.ts服务，统一处理http请求 /*** name:http…...
2024/4/21 3:43:21
Angular 项目打包之后，部署到服务器，刷新访问404解决方法
将前端代码打包部署到Java服务器中，当跳转到相应路由界面，刷新地址，服务找不到地址页面，所以会报 404 - Page Not Found。解决方法：只需要将路由转换成哈希值: userHash: true，将路由转化成“#”号的形…...
2024/4/20 19:05:36
Angular2 前端代码规范
不要重置对象的引用!(重置只应该在组件或服务的初始化时) why：会使页面产生闪烁不要给图片绑定一个空的值或空的图片引用（如果值从服务器异步过来，那应该在初始化时给它一个默认值）why：会触发一个404的请求 &#xff0…...
2024/4/21 3:43:19
Angular2发布思路整理
本文是按着ng2官网的高级内容“Deployment”的思路整理得出的，原文虽然在angular2的中文站下挂着，截止目前却还是英文版未翻译，笔者就在这里结合自己的理解给出原文的一点点整理。这是原文地址： https://angular.cn/docs/ts/lat…...
2024/4/21 3:43:18
Visual Studio 2015，Angular2进行开发快速入门
本文介绍了在 Visual Studio 2015 的 ASP.NET 4.x 项目中，用 Angular 实现“快速起步”所需的步骤。 ASP.NET 4.x 项目在 Visual Studio 的 ASP.NET 4.x 项目中实现“快速起步”的步骤如下： 前提条件 : 安装 Node.js 第一步 : 下载“快速起步”的文件…...
2024/4/21 3:43:17
解决angular 4.0项目打包后404错误
最近公司在使用一个开源项目，但是其无法全屏的问题收到公司同事的一致吐槽和内心拒绝。因此，尝试进行源码分析之后进行了魔改，然而在本地通过ng server调试正常的代码，使用ng build打包的程序上传到服务器后，居然出现了…...
2024/4/21 3:43:17
Angular/Vue 部署 IIS 刷新 404 的解决方案
在 Angular 或 Vue 部署到 IIS 上会遇到的问题，不能刷新，一刷新就会出现404，其原因就是自定义路由，下面我们来将这个问题解决。 1.从 IIS “获取新的 Web 平台组件” 2.进入 iis.net 官方网站去下载 WebPlatformInstaller_x64_en…...
2024/4/21 3:43:15
angular post php 404,解决Angular4项目部署到服务器上刷新404的问题
刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!在网上搜了一下看到有些人写的解决办法还有错误在里面,一眼看就知道的错误,感觉这些人真的有毛病,决定写了博客,为什么那么不仔细,写错误的上去,祸害别人吗!!解决angular2页面刷新后报404…...
2024/4/21 3:43:14
WebStrom里设置angular提示，可以在html中提示ts文件的内容
下面这样就是可以提示到在settings->languages&frameworks->javaScript->Libraries 下把你的工程添加进去这是我添加进来的，Type类型为project 我改了中文...
2024/4/21 3:43:13
使用 angular-cli 创建 angular2 项目
起初使用angular-cli创建angular2项目时，有好几次都是失败告终。最后发现是node-sass没有安装上，原来是npm翻墙的缘故。使用淘宝官方制作的npm镜像站点cnpm就可以正常创建项目了。下面是一部分报错信息： 说一下使用angular-cli 创建angul…...
2024/4/21 3:43:13

Ionic2应用剖析