ionic入门教程第八课-（加更）从无到有说Ionic、画图说明MVC-U-S

ionic入门教程第八课-（加更）从无到有说Ionic、画图说明MVC-U-S

这节课的内容，有些前面几节已经说过了。

公司这次给我一个任务，让我带一个没有编程基础的同事学习ionic。

今天是我跟他讲的第一课，晚上把讲的笔记整理了一下，觉得还是挺适合零基础的朋友学习的。

有些前面讲过了，在这里重复一下就当是回顾内容了。

直接上笔记了，字写的很丑，没有时间重新整理，将就一下。

如果面试的时候有人问我，angularJs有什么有点，那我一定会回答。

他使用了MVC架构使得代码清晰，模块独立，便于编程和后期维护。

使用的自动化双向绑定，使得变成过成简单便捷。

使用语义化标签使得代码易于理解和记忆。

还能够使用cordova将项目编译成安卓和ios项目，达到一端开发，三端同步上线，

虽然现在在安卓端的性能还比不上原生开发，但是在ios端且有原生开发的性能。

嗯，我今天就是从这个问题开始讲起的，因为我习惯于对一个事物先有感性的理解。

我一直跟我同事强调一个概念，你先对这个东西有一个感性的认识。

你就带着阅读文章的心情看技术文档，别管他是什么，看的时候留心一下，

带着这是个什么东西的想法去阅读技术文档。

首先我昨天让他花了一天的时间看完了W3C上的html、css和javascript的内容。

如果你也是对前端一无所知，那我建议你先移步到下面的网址看完html、css、javascript的内容，

记住一点，很重要，带着阅读的心态，带着这是什么东西的问题去读就好，先对这些东西有一个感性的认识。

这几个东西会在你后续的工作和学习中不断的翻阅才能真正的掌握。

比如看到<p>标签，你就像这是一个文本，看到<a>标签你就想这是一个链接，看到img就想是一个图片，

先不管它怎么实现的，记下它是个什么东西就好。HTML\CSS\JAVASCRIPT

记住一点先对他们有个感性的认识就好，不要太急。

你就可以边看边做下面的事情。

工欲善其事，必先利其器。下面我们要安装一些工具。你可在再下载和安装的过程中，去看看别的内容，或者先看教程后面的内容。

这些东西要点时间，等待的时候可以先调到下面红字提醒的那里先看。

首先你要下载一个git，百度输入搜索git



点击进入官网，根据自己的系统选择下载内容，下载完了直接运行安装，全部默认下一步就可以了。（这个git不是一定要装的，ionic可以不用它，反正我让我同事装了）

（2016.4.22注：在“Adjusting your PATH environment”选项中，选择第二个，把git安装到全局变量里面。不然使用的时候要从gitCMD打开才行。）

然后下载nodejs





也是一样下载完了安装，全部默认下一步。

在下载和安装的这段时间，你可以接着往下看。

因为我用的是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、自动化双向绑定



这里拿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架构，别急着敲代码。

这些概念的东西可以先记下来。比较好