其他分享
首页 > 其他分享> > 前端学习 - ionic2

前端学习 - 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)。

 


服务: 服务总是单例的
在同一个注入器内,把服务当做单例使用。用它们来共享数据和功能。

 

 

 

 

 

 

标签:app,ts,ionic2,学习,模块,组件,heroes,前端,页面
来源: https://www.cnblogs.com/WLL-Hero/p/16490797.html