ionic新手教程第八课-(加更)从无到有说Ionic、绘图说明MVC-U-S
这节课的内容,有些前面几节已经说过了。
公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic。
今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,认为还是挺适合零基础的朋友学习的。
有些前面讲过了,在这里反复一下就当是回想内容了。
直接上笔记了。字写的非常丑,没有时间又一次整理。将就一下。
假设面试的时候有人问我,angularJs有什么有点,那我一定会回答。
他使用了MVC架构使得代码清晰,模块独立。便于编程和后期维护。
使用的自己主动化双向绑定,使得变成过成简单便捷。
使用语义化标签使得代码易于理解和记忆。
还可以使用cordova将项目编译成安卓和ios项目。达到一端开发,三端同步上线。
尽管如今在安卓端的性能还比不上原生开发。可是在ios端且有原生开发的性能。
嗯,我今天就是从这个问题開始讲起的,由于我习惯于对一个事物先有感性的理解。
我一直跟我同事强调一个概念,你先对这个东西有一个感性的认识。
你就带着阅读文章的心情看技术文档,别管他是什么。看的时候留心一下,
带着这是个什么东西的想法去阅读技术文档。
首先我昨天让他花了一天的时间看完了W3C上的html、css和javascript的内容。
假设你也是对前端一无所知。那我建议你先移步到以下的网址看完html、css、javascript的内容。
记住一点,非常重要,带着阅读的心态,带着这是什么东西的问题去读就好,先对这些东西有一个感性的认识。
这几个东西会在你兴许的工作和学习中不断的翻阅才干真正的掌握。
比方看到<p>标签,你就像这是一个文本。看到<a>标签你就想这是一个链接,看到img就想是一个图片,
先无论它怎么实现的。记下它是个什么东西就好。
记住一点先对他们有个感性的认识就好,不要太急。
你就能够边看边做以下的事情。
工欲善其事,必先利其器。以下我们要安装一些工具。
你可在再下载和安装的过程中,去看看别的内容。或者先看教程后面的内容。
这些东西要点时间,等待的时候能够先调到以下红字提醒的那里先看。
首先你要下载一个git,百度输入搜索git
点击进入官网。依据自己的系统选择下载内容,下载完了直接执行安装。所有默认下一步就能够了。(这个git不是一定要装的,ionic能够不用它。反正我让我同事装了)
(2016.4.22注:在“Adjusting your PATH environment”选项中。选择第二个,把git安装到全局变量里面。不然使用的时候要从gitCMD打开才行。
)
然后下载nodejs
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
也是一样下载完了安装,所有默认下一步。
在下载和安装的这段时间,你能够接着往下看。
由于我用的是win的系统,所以以下我说的都是在win系统下的操作,ios的几乎相同。
nodejs装完了。win+r。打开执行。敲入cmd打开命令行。
$ npm install -g cordova
npm是nodejs默认安装的一个模块,你能够理解为一个下载器。上面的意思就是下载cordova。
-g 是指获得管理员权限,也能够理解为全局安装。
后面跟的是名字。
一直等到命令行再次出现能够输入状态。输入 cordova -version
出现版本说明 成功安装了,没有就再安装。
npm 会非常慢,要么使用代理,要么使用国内镜像,比方 [淘宝镜像](http://npm.taobao.org/) , 使用淘宝镜像后,npm命令须要替换成cnpm命令。
上面已经提到把npm当作一个下载器。那使用国内镜像就是从国内的站点下载这些须要的文件。
cordova安装完毕就安装ionic
$ npm install -g ionic
一样的出现可输入状态的时候 输入ionic -version
安装完了,就能够先等等。
等待的时候能够先看这下面的内容。------------------------------------------------------
首先从我开头说的angularjs的优点说起:
1、MVC
M:model 模型
V:views 视图
C:controller 控制器
另一个
U:user 用户
在ionic中另一个
S:service 服务
这个过程从上图应该可以看的明确,序号代表运行顺序。步骤3是由于服务可能从本地或着向服务端获得所须要的数据。
假设难理解的话,能够先忽略掉步骤2、3、4、5.
2、自己主动化双向绑定
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
这里拿p标签说明。最以下的简单理解ionic的编译过程。
这是一个单向绑定的过程。
以下举例input标签,说明双向绑定。
假设你不能理解ng-bind、ng-model是什么都没有关系,你能够先记下来ionic中是这么实现视图和控制器中的数据的绑定的就能够了。兴许的内容在慢慢理解也能够。
3、语义化标签
简要说明就是使用一些比較口语化的标签来开发,这些标签有些是ionic内部定义好的,
如ion-slide-box滑动的盒子 经常使用语banner、ion-list 列表、ion-item 列表项 等等,
也有自己自己定义的xh-slide-tab 滑动的选择卡之类的。
这些标签不知定义了功能,还定义了这些模块的基本样式。
能够简单的从名字就能看出它的功能,就叫做语义化。
4、打包的话简要说明
打安卓包,须要安卓开发环境。sdk要23
打ios没要求。最上面说的开发环境装了即可。
安卓:
$ ionic platform add android
$ ionic run android
ios:
$ cordova platform add ios
$ cordova build
上面的命令仅仅是我个人的使用习惯,反正这样能成功就是了
最后提一点编程规范。这些东西,你不遵守也没有关系,不是语法规范。不会报错。
仅仅是为了让自己写的代码,更加美观和便于维护。
一开会学习编程。注意这些细节。慢慢就习惯了。
1、=前后加空格
好var key = value; 不好 var key=value;
2、每句语句后面加;分号,在js中不加分号不会报错
好var key = value; 不好 var key = value
3、{ }第一个花括号跟在语句后面。第二个花括号另起一行在语句开头
好
if ( ) {
} else {
}
不好
if ( )
{
}
else
{
}
不好
if ( ) { } else{ }
4、私有变量名前面加下划线_,js中没有私有变量的概念。尽管能够使用闭包的方式实现私有。
可是大家约定俗成的觉得加了下划线的就是私有变量。仅仅是一种约定,不是语法规则。
var _key = value;
5、写測试代码的时候不要太任意了,别认为反正一会就删掉了,没什么关系。
如
var a1 = 1;
var a2 = 11;
var a3 = 111;
var a4 = 1111;
var a5 = 11111;
a1+a2+a1+a3+a4+a2+a1......
这种代码都是不可取的。
尽管我如今的代码还不是很规范。写的也不是很好看。看过我Demo的就知道了。
但是我认为作为刚開始学习的人上面的是应该遵守的。
了解了上面的这些,就能够移步到我的教程第二课,去理解整个MVC架构,别急着写程序。
这些概念的东西能够先记下来。
比較好记,好理解。
ionic新手教程第二课-从Tabs案例看Ionic的MVC架构
请大家关注一下我的公众号,就算给我一点点鼓舞吧
项目Demo地址:无
假设你还有什么其它的问题,能够通过下面方式找到我
新浪微博:小虎Oni
微信公众号:ionic__
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb25pbF9jaGVu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
ionic新手教程第八课-(加更)从无到有说Ionic、绘图说明MVC-U-S的更多相关文章
- ionic新手教程第七课-简要说明几种界面之间的參数传递及优缺点
截至2016年4月13日19点32分,我公布的ionic新手教程,已经公布6课了, 总訪问量将近6000,平均每节课能有1000的訪问量.当中訪客最多的是第三课有2700的訪客. watermark/ ...
- ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件
继上篇教程中提到的,我们新建一个简单的tabs类型的Ionic项目. 依据文件夹文件我们知道,系统自己主动创建了一个controller文件和server文件,而且把全部的控制器和服务都写到这两个文件 ...
- Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现
UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...
- NeHe OpenGL教程 第八课:混合
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- 【Mongodb教程 第八课 】MongoDB 更新文档
MongoDB的 update() 和 save() 方法用于更新文档的集合. update()方法更新现有的文档值,而替换现有的文档通过的文件中 save() 方法. MongoDB Update( ...
- 开发新手教程【三】Arduino开发工具
Arduino开发环境搭建 获取Arduino IDE开发工具 下载地址 :http://arduino.cc/en/Main/Software 能够下载release 版.Beta版和前期版本号 A ...
- NeHe OpenGL教程 第三十八课:资源文件
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- NeHe OpenGL教程 第二十八课:贝塞尔曲面
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- 【OpenCV新手教程之十八】OpenCV仿射变换 & SURF特征点描写叙述合辑
本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/33320997 作者:毛星云(浅墨) ...
随机推荐
- 编辑器之Sublime Text3、Notepad++
Sublime text 3 破解版是一款极其强大的代码编辑器,又是一款可以代替记事本的文本编辑器.Sublime text 3拥有着美观的界面和实用的功能,既能够完成代码的编辑又能够完成文本编辑,还 ...
- 2019.2.25 模拟赛T1【集训队作业2018】小Z的礼物
T1: [集训队作业2018]小Z的礼物 我们发现我们要求的是覆盖所有集合里的元素的期望时间. 设\(t_{i,j}\)表示第一次覆盖第i行第j列的格子的时间,我们要求的是\(max\{ALL\}\) ...
- Codeforces Round #371 (Div. 1) C - Sonya and Problem Wihtout a Legend
C - Sonya and Problem Wihtout a Legend 思路:感觉没有做过这种套路题完全不会啊.. 把严格单调递增转换成非严格单调递增,所有可能出现的数字就变成了原数组出现过的数 ...
- webpack3.0+总结
ul>li{ color:blue; font-size:20px } .items>ul>li>ul>li{ color:crimson } --> webpac ...
- mogodb(1) 简介
1 引言 NoSQL,全称是“Not Only Sql”,指的是非关系型的数据库.这类数据库主要有这些特点:非关系型的.分布式.开源的.水平可扩展的.原始目的是为了大规模web应用,这场全新的数据库革 ...
- PHP using mcrypt and store the encrypted in MySQL
This is how I would do it. Create a class to do encryption/decryption: class cipher { private $secur ...
- JAVAEE学习——hibernate02:实体规则、对象状态、缓存、事务、批量查询和实现客户列表显示
一.hibernate中的实体规则 实体类创建的注意事项 1.持久化类提供无参数构造 2.成员变量私有,提供共有get/set方法访问.需提供属性 3.持久化类中的属性,应尽量使用包装类型 4.持久化 ...
- redis_安装
前面几章内容简单介绍了NoSql的概念,以及NoSql的几种分类,本文开始后面开始学习KV数据库Redis. 一.Redis是什么? Redis:REmote DIctionary Server(远程 ...
- 【BZOJ 2460】线性基
2460: [BeiJing2011]元素 Description 相传,在远古时期,位于西方大陆的 Magic Land 上,人们已经掌握了用魔法矿石炼制法杖的技术.那时人们就认识到,一个法杖的法力 ...
- [BZOJ 4719] 天天爱跑步
Link: BZOJ 4719 传送门 Solution: 感觉求LCA又有了新姿势啊:$Tarjan$离线$O(n+m)$ 每次递归返回时将子树和父节点合并,如果询问节点已访问过则LCA就是已合并的 ...