zoukankan      html  css  js  c++  java
  • 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__



  • 相关阅读:
    Maven 环境的配置
    zTree的简单例子
    plsql免安装客户端的配置
    HDU 1232 畅通工程
    HDU 5698 瞬间移动
    Codeforces 1015E1 Stars Drawing (Easy Edition)
    Codeforces 784B Santa Claus and Keyboard Check
    Codeforces 500C New Year Book Reading
    NSarray 赋值 拷贝 等问题记录
    UINavigationController 操作记录
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642309.html
Copyright © 2011-2022 走看看