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__





  • 相关阅读:
    HDU 1010 Tempter of the Bone
    HDU 4421 Bit Magic(奇葩式解法)
    HDU 2614 Beat 深搜DFS
    HDU 1495 非常可乐 BFS 搜索
    Road to Cinema
    Sea Battle
    Interview with Oleg
    Spotlights
    Substring
    Dominating Patterns
  • 原文地址:https://www.cnblogs.com/cynchanpin/p/7308458.html
Copyright © 2011-2022 走看看