ionic入门教程第二课-从Tabs案例看Ionic的MVC架构

首先使用上一节课提到的方法创建一个tabs的Demo。提示：有时候案例下载不下来，可以反复尝试或者使用淘宝镜像。

建议在需要创建项目的地方，按住shift加鼠标右键选择在此处打开命令窗口，这样创建完的项目，就在当前的目录下，

若使用系统cmd直接创建，则项目保存在当前用户的文件夹里，可能有些朋友会找不到项目。



使用命令行创建项目ionic start firstApp tabs



出现第一行绿字时，其实就可以关闭窗口了，创建的项目已经可用，但是我还是习惯等命令行全部执行完毕。

我使用的是WebStorm来打开项目的。项目结构如图所示。



各个文件夹的作用我们暂且不论，此刻我们先关注上图中标注的文件夹。WWW文件夹下放的就是我们的项目。

从MVC的角度去分析，其中视图文件存放在templates文件夹中，控制器放在js文件夹中。

其实简单的理解的话，视图绑定控制器，是使用ng-controller=“控制器名称”来做数据绑定的。

相当于控制权声明，告诉系统这一部分的UI数据是由某某控制器控制的。

但是这里使用了比这个简单绑定更为高级的绑定方式。我们打开js文件夹下的app.js文件。

其中部分代码我们先不看，先关注下图中这一部分代码，就是所谓的路由。



这里是使用路由名称对应视图和控制器的方法，具体实现暂不关注，因为我的目的是快速入门，很多概念我描述的并非完全正确。

我只是提供一种比较简单易上手的理解方式，对于这部分理论，我建议直接查看官方文档。

简单理解的话，其实这个demo就是在整个项目中放了一个ion-tabs，相当于放了一本书，但并不关注这本书的容量和内容。

然后在tabs.html中使用ion-tab标签来声明这本书有多少页，并不关注每页的内容。

然后在路由中绑定每个ion-tab子项的对应视图。到这里才会去关注每页的内容。

可以打开对应的html文件查看。

我们先使用调试工具打开index.html



其中底部的三个选择卡就是ion-tab，点击切换路由地址，再由绑定的路由地址对应显示到相应的页面。

此处我们拿中间的chats来说明。首先我们在app.js中的路由代码中找到chats的视图和控制器



这里我们可以知道这个视图的控制器是ChatsCtrl，然后我们可以在js文件夹中的controllers.js找到ChatsCtrl.这是Demo才这么写的，真实项目中应该是一个控制器一个文件的。



打开视图文件templates文件夹中的tab-chats.html



首先我们要关注的是$scope.chats,这个数组对象在视图文件中使用ng-repeat去对它遍历取值，再将它的子元素的值绑定到界面元素中。

常用到的绑定数据方式还有ng-bind、ng-src等。

我们回过头来看ChatsCtrl中的$scope.chats=Chat.all();这里的Chat是一个服务，即为了完成某项功能或者获取某些数据而单独封装的一个方法集。

这里我们就要开始关注js文件夹中的另一个文件services.js。

这就是ionic又一个优点了，把对服务器的访问和一些功能需求单独放到服务中去实现，也可以理解为是一个单独的服务模块，可以在项目中多次使用。

增加了代码的复用性，减少了许多维护成本。

这样子的一套MVC，使得代码逻辑非常的简洁明了。本文中忽略了许多文件的相关性，这部分内容将在后续的教程中不断的补充。

这里只是先简单的介绍一下ionic的机制。

有其他问题的可以关注一下公众号提问(右侧双下划线)：ionic__