HTML5手机APP开发入(3)

课程内容:

按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储。

涉及的知识点:

Angular2 Injectable的使用熟成的模块依赖注入

引用类库

引用SQLite插件和 Storage,SqlStorage模块

重构代码

新建一个Model

新建一个modules目录,新建一个contact.ts,定义一下字段的类型

新建一个dataService

引用类或plugin pack

import {Storage,SqlStorage} from 'ionic-angular';

import {Contact} from '../modules/Contact';

关键字

@Injectable()

表示可以依赖注入的

注册新建的服务

修改app.ts

注入自定义服务类

import {DataService} from './pages/services/dataService';

providers:[DataService],

使用DataService

引用类库

import {Contact} from '../modules/Contact';

import {DataService} from '../services/dataService';

注入服务

private dataService:DataService

Run Test

OK 完成

下次讲如何开发自定义组件(Component),实现模块化开发

HTML5手机APP开发入(3)的更多相关文章

  1. HTML5手机APP开发入(5)

    HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...

  2. HTML5手机APP开发入(4)

    HTML5手机APP开发入(4) 课程内容 完成一个自定义的Component用来展现通讯录用户的明细信息如下图 http://bootsnipp.com/snippets/featured/prof ...

  3. HTML5手机APP开发入门(2)

    HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,Ad ...

  4. HTML5手机APP开发入门(1)

    HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...

  5. [转帖]H5 手机 App 开发入门:技术篇

    H5 手机 App 开发入门:技术篇   http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...

  6. 【转帖】H5 手机 App 开发入门:概念篇

    H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...

  7. 手机app开发:浅谈APP登录方式的优劣

    手机app开发公司亿合科技要是给你一个机会设计一款APP,你会用什么方式做这个APP的登录模块?根据APP的业务模型的不同会有不同的设计方法.如果是偏内容型的APP,需要优先展示内容给用户,当用户需要 ...

  8. 未来一年的13大手机APP开发趋势

    无论是欢呼出租车,保存票据,订购披萨还是在线购物,您可以立即联系到什么设备?你的智能手机 这是您需要的朋友,在如何查找信息和简化日常任务方面发挥着不可或缺的作用. 移动技术以光速增长; 我们不能否认手 ...

  9. 示例浅谈PHP与手机APP开发,即API接口开发

    示例浅谈PHP与手机APP开发,即API接口开发 API(Application Programming Interface,应用程序接口)架构,已经成为目前互联网产品开发中常见的软件架构模式,并且诞 ...

随机推荐

  1. UVALive 5009 Error Curves 三分

    //#pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #include& ...

  2. PoEdu - C++阶段班【Po学校】- 第1课

    1 C++开讲 C ++  伟大的编程语言:能提高程序运行效率,节约更多的资源,"正确的使用C++,能够抑制全球变暖问题". 2 C++能力雷达图 通过 1效率 2灵活度 3 抽象 ...

  3. tomcat 支持ssi功能配置

    1.SSI是Server Side Includes 的缩写,是嵌入到HTML页面的一组指令的集合.在返回请求的页面(包含SSI指令前),服务器会处理这些指令,并用处理的结果替换指令,然后把页面返回. ...

  4. 关于checkbox与文字混排无法对齐的解决方法

    先前代码如下 <span style="vertical-align:middle"><input  type="checkbox" name ...

  5. 利用Access-Control-Allow-Origin响应头解决跨域请求

    //允许任何域名访问 header("Access-Control-Allow-Origin: *"); //指定域名允许跨域 header("Access-Contro ...

  6. mysql状态查看 QPS/TPS/缓存命中率查看

    运行中的mysql状态查看   对正在运行的mysql进行监控,其中一个方式就是查看mysql运行状态.    (1)QPS(每秒Query量)  QPS = Questions(or Queries ...

  7. lvs DR模式

    1.单机 director端ifconfig eth0:1 $vip broadcast $vip netmask 255.255.255.255 up ----broadcast广播(单机的时候加这 ...

  8. java中this用法总结

    1,当局部变量和成员变量重名的时候,在方法中使用this表示成员变量以示区分. class Demo{ String str = "这是成员变量"; void fun(String ...

  9. 零配置Socket TCP消息通讯服务容器EC

    EC全称是elastic communication,是基于c#实现的Socket网络通讯服务容器,支持windows .Net和mono.通过EC容器可以让开发人员在不了解Socket网络通讯知识和 ...

  10. 拖动div简单事例代码

    事例文件下载 //拖动容器代码 var rDrag = { o: null, init: function (o) { o.onmousedown = this.start; }, start: fu ...