前端学习 - ionic2
ionic2 常用组件网址: http://ionicframework.com/docs/storage/
一: <<Ionic2 项目结构>>
./src/index.html
src/index.html是app的主入口, 设置脚本和CSS，引导、启动我们的应用。对于app的应用，Ionic在HTML中寻找<ion-app>标签。
<script src="cordova.js"></script>
<script src="build/main.js"></script> 包含了Ionic、Angular和App自己的JavaScript的综合文件。
./src/ 在src目录中含有我们原始的未经编译的代码,也是我们编写Ionic 2 APP的主要工作目录。当我们运行 Ionic serve，我们在src目录下的代码编译成浏览器可以理解的正确JavaScript版本。
src/app/app.module.ts 是我们app的入口点 , 每个app都有一个根模块控制应用 , 这是我们的app加载的第一个组件，通常这是用于其他组件加载的空壳。在app.component.ts中，我们设置跟组件为src/app/app.component.ts里面MyApp。
示例代码: IonicModule.forRoot(MyApp,{ mode: 'ios', backButtonText: '后退',tabsHideOnSubPages: true}), IonicModule.forRoot(根组件)
IonicStorageModule.forRoot(),
PipeModule,TabsModule,MeetingModule,BoardroomModule,CreateModule,UserModule //导入根模块(公共管道模块,tab导航栏模块)
entryComponents: [MyApp], //入口组件(程序首先要展示的页面)
在 [MyApp] 即(app.component.ts文件)中设置 引导页,登录页面,和 tab导航栏的展示设置 (分三种情况:引导页/登录页/自动登录完成后的tab导航页)
二: <<Ionic2 导航控制器>>
ionic2 页面跳转 传递参数 及接 收参数: http://ionicframework.com/docs/api/navigation/NavController/
NavController是导航控制器组件的基类 基本用法
跳转及传参:
import { NavController } from 'ionic-angular';
class MyComponent {
constructor(public navCtrl: NavController) {
//push的方法; 参数传递(第一个是要跳转你的界面 第二个是要传递给另外一个界面的参数)
this.navCtrl.push(OtherPage, { id: "123", name: "Carl" });
}
}
在另外一个界面接收参数:
import { NavParams } from 'ionic-angular';
class OtherPage {
constructor(private navParams: NavParams) {
let id = navParams.get('id');
let name = navParams.get('name');
}
}
点击返回(删除当前视图) pop:
import { NavController } from 'ionic-angular';
class OtherPage {
constructor(public navCtrl: NavController ){ }
popView(){ this.navCtrl.pop(); }
}
视图的声明周期:
| 页面事件 | 返回 | 描述 |
|---|---|---|
ionViewDidLoad |
void | 页面加载时运行。此事件仅在每个页面创建时发生一次。如果页面离开但被缓存，则此事件将不会在后续查看时再次启动。该ionViewDidLoad事件是放置页面的设置代码的好地方。 |
ionViewWillEnter |
void | 当页面即将进入并成为活动页面时运行。 |
ionViewDidEnter |
void | 当页面已完全输入并且现在是活动页面时运行。此事件将触发，无论是第一次加载还是缓存页面。 |
ionViewWillLeave |
void | 当页面即将离开并且不再是活动页面时运行。 |
ionViewDidLeave |
void | 当页面完成离开时运行，并且不再是活动页面。 |
ionViewWillUnload |
void | 当页面即将被销毁并删除其元素时运行。 |
ionViewCanEnter |
boolean/Promise<void> | 在视图进入之前运行。这可以在认证视图中用作“保护”，您需要在视图输入之前检查权限 |
ionViewCanLeave |
boolean/Promise<void> | 运行之前视图可以离开。这可以在认证视图中用作“守卫”，您需要在视图离开之前检查权限 |
实例成员:
canGoBack(); 如果前一页有一个有效的页面 则返回为true
canSwipeBack(); 是否可以使用滑动返回,启动的话返回true ,否则返回false
first(); 返回此导航控制器堆栈中的第一个视图控制器。
getByIndex(index); 根据索引返回制定的控制器
getActive(); 返回活动页面的视图控制器。
getActiveChildNav(); 返回活动的子导航。
当跳转多层后,此想回到某一控制器的时候: this.nav.popTo(this.nav.getByIndex(2));
angular2文档规范
单一职责(Single responsibility): 对所有的组件、服务等等应用单一职责原则
1. 坚持每个文件只定义一样东西（例如服务或组件)。
例子: 当一个文件, 它来引导应用程序，定义了Hero模型对象，并从服务器加载了英雄 ... 所有都在同一个文件 这样做是不对的. 单组件文件非常容易阅读、维护，并能防止在版本控制系统里与团队冲突. 考虑把文件大小限制在 400 行代码以内。
这时候 可以这么做:
定义一个模型文件app/heroes/shared/hero.model.ts;
定义一个服务文件app/heroes/shared/hero.service.ts; (模仿请求接口,调用仿数据文件里面的具体内容,并返回)
定义一个仿数据文件app/heroes/shared/mock-heroes.ts
最后 定义一个组合文件app/heroes/heroes.component.ts 在这个文件中 将从服务中拿到的数据赋给模型
简单的函数 (small functions):比如当它只做一件事,只为一个目的 服务时
1.考虑限制在 75 行之内
2.简单的函数一是方便促进代码的重用.其次是易于阅读和维护,可以避免在大函数中产生的隐蔽性错误
命名 : 坚持所有符号使用一致的命名规则
使用点和横杠来分隔文件名:
1.在描述性名字中，用横杠来分隔单词
2.使用点来分隔描述性名字和类型
3.遵循先描述组件特性，再描述它的类型的模式，对所有组件使用一致的类型命名规则。推荐的模式为feature.type.ts
4.使用惯用的后缀来描述类型，包括*.service、*.component、*.pipe、.module、.directive。
在符号名后面追加约定的类型后缀（例如.component.ts、.directive.ts、.module.ts、.pipe.ts、.service.ts）。
通过这种形式,快速的识别文件中有什么,利用编辑器或者 IDE 的模糊搜索功能，可以很容易地找到特定文件,
4.1 举例app.component.ts文件中的命名格式:
@Component({ ... })
export class AppComponent { }
4.2举例 heroes.component.ts文件中的命名格式:
@Component({ ... })
export class HeroesComponent { }
4.4举例 user-profile.service.ts文件中类的命名格式:
@Injectable()
export class UserProfileService { }
5.服务名: 为服务的类名加上Service 例如:credit.service.ts
又例如有些词汇显然就是服务，比如那些以“-er”后缀结尾的。比如把记日志的服务命名为Logger就比LoggerService更好些。
像Logger这样的清楚的服务名不需要后缀。
6.把应用的引导程序和平台相关的逻辑放到名为main.ts的文件里,且在引导逻辑中包应含错误处理代码
而应用逻辑应放在组件或服务里,而不是放在main.ts中
把逻辑放到服务里:
在组件中只包含与视图相关的逻辑。所有其它逻辑都应该放到服务中,把可重用的逻辑放到服务中，保持组件简单，聚焦于它们预期目的,当逻辑被放置到服务里，并以函数的形式暴露时，可以被多个组件重复使用。
7.导入语句中的空行(Import line spacing)
在第三方导入和应用导入之间留一个空行 例如:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Hero } from './hero.model';
import { ExceptionService, SpinnerService, ToastService } from '../../core';
应用程序结构与 Angular 模块 规范:
1.每个组件、服务和管道都在src文件夹下的自己的文件里. 所有第三方程序包保存到其它目录里，而不是src目录
2.如果组件具有多个伴随文件 (.ts、.html、.css和.spec)，就为它创建一个文件夹。组件通常有四个文件 (*.html、 *.css、 *.ts 和 *.spec.ts)，它们很容易把一个目录弄乱。
做到能够: 快速定位代码 ,一眼识别代码, 尽量保持扁平结构 ,尝试遵循DRY (Do Not Repeat Yourself, 不重复自己,既没有重复也没有多余的名字)原则
应用的根模块 (App root module)
1.在应用的根目录创建一个 Angular 模块（例如/src/app）
2.把根模块命名为app.module.ts 这样定位和识别根模块会变得更容易
独立特性模块/功能模块(Feature modules)
1.为应用中每个明显的特性创建一个 Angular 模块
2.把特性模块放在与特性区同名的目录中（例如app/heroes）;
3.特性模块的文件名应该能反映出特性区的名字和目录（例如app/heroes/heroes.module.ts）。
4.特性模块的符号名应该能反映出特性区、目录和文件名（例如在app/heroes/heroes.module.ts中定义HeroesModule）。
共享特性模块(Shared feature module)
1.在shared目录中创建名叫SharedModule的特性模块（例如在app/shared/shared.module.ts中定义SharedModule）。
2.在共享模块中声明那些可能被特性模块引用的 可复用组件、指令和管道。
3.把可能在整个应用中到处引用的模块命名为SharedModule
4.避免 在共享模块中提供服务。服务通常是单例的，应该在整个应用或一个特定的特性模块中只有一份。
5.在SharedModule中导入所有模块都需要的资源（例如CommonModule和FormsModule）。因为SharedModule中包含的组件、指令和管道可能需要来自其它公共模块的特性（例如来自CommonModule中的ngFor指令).
核心特性模块(Core feature module)
1.把那些数量庞大、辅助性的、只用一次的类收集到核心模块中，让特性模块的结构更清晰简明。
2.在core目录下创建一个名叫CoreModule的特性模块（例如在app/core/core.module.ts中定义CoreModule）。
3.把要共享给整个应用的单例服务放进CoreModule中（例如ExceptionService和LoggerService）。
4.导入CoreModule中的资产所需要的全部模块（例如CommonModule和FormsModule）。
服务: 服务总是单例的
在同一个注入器内，把服务当做单例使用。用它们来共享数据和功能。
