HTML5手机APP开发入(4)

时间:2022-09-02 19:33:24

HTML5手机APP开发入(4)

课程内容

完成一个自定义的Component用来展现通讯录用户的明细信息如下图

http://bootsnipp.com/snippets/featured/profile-card

HTML5手机APP开发入(4)

涉及的知识点:

Component的定义,输入/输出

步骤

新建一个Component文件定义contactinfo.html

HTML 代码从http://bootsnipp.com/snippets/featured/profile-card 复制过来

HTML5手机APP开发入(4)

新建一个contactinfo.ts

使用关键字Component,selector对应HTML TAG,angular2 定义一个component比angular 1要简单的多

HTML5手机APP开发入(4)

HTML5手机APP开发入(4)

引用或称注册这个Component

修改 detail-item.ts

import {UserInfoComponent} from './components/contactinfo';

directives:[UserInfoComponent],

非常的简单

HTML5手机APP开发入(4)

RUN Test

HTML5手机APP开发入(4)

Perfect!

下次再做一个登录页面基本的功能就完成,HTML5做移动开发真的非常的简单,难得可能就是UI的设计和用户体验

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

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

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

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

    HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...

  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. tyvj1614 魔塔魔塔!

    描述 百度noip贴吧管理组开发了一个小游戏,叫魔塔魔塔.虽然把魔塔重复了两次,但其实还只是个魔塔而已,还是简化版的.游戏在一个N*M大小的地图中进行,每一格都是正方形.对于某一格,有若干种可能的状态 ...

  2. codeforces C. Fixing Typos 解题报告

    题目链接:http://codeforces.com/problemset/problem/363/C 题目意思:纠正两种类型的typos.第一种为同一个字母连续出现3次以上(包括3次):另一种为两个 ...

  3. MySQL索引分析与优化

    1.MySQL能够在name的索引中查找“Mike”值,然后直接转到数据文件中相应的行,准确地返回该行的 peopleid(999).在这个过程中,MySQL只需处理一个行就可以返回结果.如果没有“n ...

  4. 1483:[HNOI]2009 梦幻布丁 - BZOJ

    Description N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1的四个布丁一共有3段颜色. Input 第 ...

  5. linux socket使用经验总结

    1.  scoket函数中PF_INET AF_INET区别 在UNIX系列中,PF_INET表示poxis, BSD系列用AF_INET 2.  in_addr_t inet_addr(const ...

  6. 什么是dtd文件,为什么需要dtd

    DTD为英文Document Type Definition,中文意思为"文档类定义".DTD肩负着两重任务:一方面它帮助你编写合法的代码,另一方面它让浏览器正确地显示器代码.也许 ...

  7. css首行缩进两个字符串

    text-indent:2em; 这个属性就可以缩进,但是2em不确定是什么意思:抽空总结一下

  8. hdu 3874 Necklace(线段树)

    这道题目和我之前做过的一道3xian大牛出的题目很像,不过总的来说还是要简单一点儿. 计算区间内的值的时候如果两个值相等,只能计算其中一个. 这道题需要将所有的问题输入之后再计算,首先,对所有问题的右 ...

  9. npm介绍与cnpm介绍

    npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...

  10. iOS监听模式之KVO、KVC的高阶应用

    KVC, KVO作为一种魔法贯穿日常Cocoa开发,笔者原先是准备写一篇对其的全面总结,可网络上对其的表面介绍已经够多了,除去基本层面的使用,笔者跟大家谈下平常在网络上没有提及的KVC, KVO进阶知 ...