zoukankan      html  css  js  c++  java
  • ionic入门教程第八课-(加更)从无到有说Ionic、画图说明MVC-U-S

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    先不管它怎么实现的,记下它是个什么东西就好。HTMLCSSJAVASCRIPT

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

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

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

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

    首先你要下载一个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架构,别急着敲代码。

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

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

    请大家关注一下我的公众号,就算给我一点点鼓励吧大笑

    项目Demo地址:无
    如果你还有什么其他的问题,可以通过以下方式找到我

    新浪微博:小虎Oni
    微信公众号:ionic__





  • 相关阅读:
    ssm整合用到的依赖jar包(不充足)
    eclipse中Maven web项目的目录结构浅析
    何时使用抽象类?何时使用接口?
    $().attr() 和 $().css的区别
    AJAX防重复提交的办法总结
    CentOS 8 扩展LVM,更改xfs卷报错解决方法
    安装Minikube无法访问k8s.gcr.io的简单解决办法
    Windows 10、Ubuntu 18.04 双系统 双硬盘 安装经验总结
    转眼十年
    Dresdon二次开发
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642303.html
Copyright © 2011-2022 走看看