分类 默认分类 下的文章

typescript封装JS的Callback

  1. JS原型

    plus.nativeUI.prompt("请输入内容",function(e){

        return e.index == 0 ? e.value : "";
});
  2. 改写成TS服务
Prompt(msg: string): Promise<string> {
        return new Promise<string>(
            (string) => {
                plus.nativeUI.prompt(msg, (e: any) => string (
                    e.index == 0 ? e.value : ""
                ));
            });
    }

  1. 调用

    plus.Prompt("请输入").then((s: string)=>(alert(s)));

应该还有更好的方法，学习中.．．

angular2

angular2应用程序主要由以下八个部分组成：
1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services)
8、依赖注入 (Dependency Injection)

模块
Angular 应用是由模块化的，它有自己的模块系统：NgModules；每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule；Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。

几个重要的属性如下：
1.declarations：模块内部Components/Directives/Pipes的列表，声明一下这个模块内部成员

2.providers：指定应用程序的根级别需要使用的service。（Angular2中没有模块级别的service，所有在NgModule中声明的
Provider都是注册在根级别的Dependency Injector中）

3.imports：导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比
如导入CommonModule后就可以使用NgIf、NgFor等指令。

4.exports：用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴
露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。

5.bootstrap：通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。

6.entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用，一般是bootstrap组件或者路由组
件，ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中，否则不会用到这个属性。

简单的根模块：
app/app.module.ts 文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

接下来我们通过引导根模块来启动应用，开发过程通常在 main.ts 文件中来引导 AppModule ，代码如下：
app/main.ts 文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

组件(Components)、模板(Templates)、
组件：
组件是一个模板的控制类用于处理应用和逻辑页面的视图部分
创建 Angular 组件的方法有三步：
1.从 @angular/core 中引入 Component 修饰器
2.建立一个普通的类，并用 @Component 修饰它
3.在 @Component 中，设置 selector 自定义标签，以及 template 模板
模板：
Angular模板的默认语言就是HTML；我们可以通过使用模板来定义组件的视图来告诉 Angular 如何显示组件。
app/components.ts 文件：

@Component({
   selector : 'mylist',
   template : 'app.mylist.html'
   directives : [ComponentDetails]
})
export class ListComponent{...}

@Component 中的配置项说明：
selector - 一个 css 选择器，它告诉 Angular 在 父级 HTML 中寻找一个 标签，然后创建该组件，并插入此标签中
templateUrl - 组件 HTML 模板的地址
directives - 一个数组，包含 此 模板需要依赖的组件或指令

元数据(Metadata)、数据绑定(Data binding)
元数据：
元数据告诉 Angular 如何处理一个类；在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。
数据绑定：
数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，它是管理应用程序里面数值的一种机制；通过这种机制，可以从HTML里面取值和赋值，使得数据的读写，数据的持久化操作变得更加简单快捷
1.插值 : 在 HTML 标签中显示组件值

<h3>{{list}}<h3>

2.属性绑定: 把元素的属性设置为组件中属性的值

<img [src]="userImageUrl">

3.事件绑定: 在组件方法名被点击时触发

<button (click)="onSave()">保存</button>

4.双向数据绑定，使用Angular里的NgModel指令可以更便捷的进行双向绑定

<input [value]="currentUser.firstName"
   (input)="currentUser.firstName=$event.target.value" >

指令（Directives）
指令是一个带有"指令元数据"的类；在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>

timg.jpg

用typescript 封装 hbuilder的plus对像

  1. 写 plus.ts 服务

    import { Injectable } from '@angular/core';

declare var plus;

@Injectable()
export class Plus {
   /**
    * 消息提醒
    * @param msg 消息
    */
    toast(msg) {
        plus.nativeUI.toast(msg, { duration: "long" });
    }
}

  2. 在app.module.ts中加入服务

    import { Plus } from '../providers/plus';

    @NgModule({
    declarations: [

    ...

    ],
    imports: [

    IonicModule.forRoot(ConferenceApp)

    ],
    bootstrap: [IonicApp],
    entryComponents: [

    ...

    ],
    providers: [..., Plus]
    })
    export class AppModule { }

  3. 在页面里注入服务

    import { Plus } from '../../providers/plus';

    @Component({

    templateUrl: '../..'

    })
    export class TabsPage {

    constructor(navParams: NavParams, plus: Plus) {

      **plus.toast("aa");**

    }
    }

ionic cordova打包android

  1. 安装jdk
  2. 安装android studio
  3. 设置环境变量 ANDROID_HOME,到 android sdk目录
  4. 下载 SDK tools package，解压到android skd目录
  5. cd 项目目录
  6. cordova platform add android
  7. cordova build --release android

  8. 签名

    D:\android-studio\jre\bin\keytool -genkey -v -keystore android.keystore -alias android.keystore -keyalg RSA -validity 20000
    D:\android-studio\jre\bin\jarsigner -verbose -keystore android.keystore -signedjar android_signed.apk android-release-unsigned.apk android.keystore

经测试，用cordova打包与用HBuilder打包生成的APk,性能基本一致，低版本Android运行会有不同程度卡顿。

Angular 2与TypeScript概览

在2014年底，Google宣布Angular 2将会对AngularJS进行完全地重写，他们甚至还创建了一门新的语言，名为“AtScript”，他们本来希望使用这门语言来编写Angular 2应用。

但是，随后Microsoft同意在它们的TypeScript语言（JavaScript的一个严格超集）上添加对装饰符（decorator，又称为注解）的支持，所以，它就成为了开发Angular 2框架本身所使用的语言，并且还是使用AngularJS框架开发应用的推荐语言。

另外，我们还可以使用JavaScript（ECMAScript 5和6均可）和Dart来编写Angular 2应用。

除此之外，Angular团队还集成了Microsoft的另外一个产品到Angular 2框架之中，这就是反应型JavaScript扩展（reactive JavaScript extension）的RxJS库。

Angular 2并不是一个MVC框架，而是基于组件（component）的框架。在Angular 2中，应用是松耦合组件所组成的树。

例如，如下的截屏中展现了一个简单的在线拍卖应用的首页面，它最初的原型是由一组Navbar、Search、Carousel、Product和Footer组件所构成的。
030.jpg
按照上面的图片所示，我们渲染了三个Product组件。自动渲染是通过将模板与服务器端获取到的组件数组进行绑定来完成的。每个产品的名称都会是一个链接，指向相关产品的详情页面。因为我们想把这个拍卖应用设计为单页应用（single page application，SPA），所以我们不希望刷新整个页面来展现产品详情。我们会重用当前轮播（carousel）和产品列表已经占据的区域，所以它会渲染产品的详情，同时保持页面的其他内容不变。这项任务通过几个简单的步骤就能完成：

使用Angular的router-outlet指令，它允许我们将当前轮播和产品列表占据的区域声明为，这样的话，它就能基于用户的导航变换内容；
将Carousel和Product封装到Home组件中；
创建一个新的ProductDetail组件；
配置Angular的Router在特定的区域要么显示Home组件，要么显示ProductDetail组件。

关于组件，我们已经讨论了很多，但是到目前为止，还没有对其进行定义。在TypeScript中，组件就是带有@Component的简单类：

@Component({
  selector: 'auction-home',
  template: `
    HTML或其他标记内联在此处
  `
})
export default class HomeComponent {

 // 应用逻辑放在此处
}

031.jpg
@Component注解用来定义组件及其相关的元数据。在本例中，selector属性的值指明了要展现本组件的HTML标签名称。template属性是一个HTML（或其他）标记的占位符。

回到我们的拍卖应用首页，顶层ApplicationComponent组件的模板可能会如下所示：

这个模板是由标准的和自定义的HTML标签所组成的，自定义标签代表了对应的组件。在本例中，我们使用的是内联HTML。如果你更喜欢将标签存储在单独的文件中的话（比如在application.html文件中），那么我们将会使用templateURL属性来代替template，ApplicationComponent的代码将会看起来如下所示：

import {Component} from 'angular2/core';
import {Route, RouteConfig, RouterOutlet} from 'angular2/router';
import HomeComponent from '../home/home';
import NavbarComponent from '../navbar/navbar';
import FooterComponent from '../footer/footer';
import SearchComponent from '../search/search';
import ProductDetailComponent from "../product-detail/product-detail";

@Component({
  selector: 'auction-application',
  templateUrl: 'app/components/application/application.html',
  directives: [
    RouterOutlet,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    HomeComponent
  ]
})
@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/products/:id', component: ProductDetailComponent, as: 'ProductDetail'}
])
export default class ApplicationComponent {}

ApplicationComponent类使用了@Component和@RouteConfig（对于依赖URL的内容）注解。selector属性的值将会用来指定用户定义的HTML标签。templateURL属性指定了标记所在的位置。directives区域包含了RouterOutlet以及所有的子组件。

@RouteConfig注解为客户端导航配置了两个route：

对于名为Home的route，其内容将会由HomeComponent来渲染，并且映射到了URL片段“/”。
对于名为ProductDetail的route，其内容将会由ProductDetailComponent来渲染，并且映射到了URL片段“/product:id”。

当用户点击一个特定产品的标题时，默认的Home route的内容将会替换为ProductDetail route的内容，它会提供参数id的值并将产品的详情展现在区域。例如，导航至ProductDetail route的链接会将产品id的值 1234作为参数，它看起来会如下所示：

<a [routerLink]="['/ProductDetail', {'prodId': 1234}]">{{ product.id }}</a>

依赖注入

组件使用服务（service）来实现业务逻辑。服务是由Angular实例化并注入到组件中的类。

export class ProductService {
  products: Product[] = [];
  getProducts(): Array {
    // 获取产品的代码放在这里
    return products;
  }
}

现在，如果在HomeComponent的构造器中指定一个ProductService类型的参数，那么将会自动实例化该服务并将其注入到组件中：

@Component{
 ...
}
export default class HomeComponent {
  products: Product[] = [];

  constructor(productService: ProductService) {
    this.products = productService.getProducts();
  }
}

Angular的依赖注入模块是很灵活的，它很易于使用，因为对象只能通过构造器来实现注入。注射器（injector）形成了层级的结构（每个组件都会有一个注射器），可注入的对象并不一定必须要在应用级别保持单例，不过，这是Spring默认的做法

  1. 1
  2. ...
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7