Web寻梦狮ionic1实战1-环境搭建及项目介绍

ionic1商城项目

项目展示截图（2018年2月1号正式上线）

技术介绍

ionic

Ionic并不是一个入门级的框架，它是一个专注于用web开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和SASS。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。所以，在学Ionic之前，首先要了解学习Ionic需要具备的技能：
1、熟练运用HTML、CSS、JavaScript；
2、熟练运用HTML5的新元素。
3、有使用JavaScript框架的的经验，尤其是熟悉AngularJS 框架。

angularJS

1.首先angular是一个mvc框架，它与jquery不同之处在于，前者致力于mvc代码解耦，采用model,controller以及view方式去组织代码，而后者提供给你了很多APi函数，你可以不用写很多原生js去实现比较复杂的效果，比如说动画，$.animate,这样的效果如果需要原生js来写的话，代码量将会比较庞大；
2.其次，jQuery没有定义你的代码如何组织，你可以将它放在一个单独的js文件中进行引用，也可以直接写在页面中采用script标签进行包裹，甚至可以直接以内联的方式写在html标签中，但是angularjs会将一个HTML页面分成若干个模块，每个模块都可以自己的scope，service以及directive，各个模块之间也可以进行通信，但是整体上结构是比较清晰的，就是说其代码组织方式是模块化的。
3.最后，jQuery的思想是先设计好页面，然后在已有页面的基础上进行dom操作后展示页面，但是angular的view可能仅仅是一个框架，对view的dom操作或者时间监听都是在directive中实现的，而且一般情况下很少自己直接去写Dom操作代码，只要你监听model。model发生变化后view也会发生变化。
学习网站： AngularJS菜鸟教程

cordova

Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。
使用Apache Cordova的人群:
移动应用开发者，想扩展一个应用的使用平台，而不通过每个平台的语言和工具集重新实现。
web开发者，想包装部署自己的web App将其分发到各个应用商店门户。
移动应用开发者，有兴趣混合原生应用组建和一个WebView(一个特别的浏览器窗口) 可以接触设备A级PI，或者你想开发一个原生和WebView组件之间的插件接口。
学习网站：w3cSchool学习Cordova入门级别

npm

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

bower

Bower是一个包管理工具。包的内容没有限制，比如：js库，框架，图片/字体资源等等或者它们的组合都可以，只要是你需要的就行，你也可以打包一些内容通过在bower上登记注册公开对外发布(当然Bower也支持提建私有包库)。
bower使用指南

gulp

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
本示例以gulp-less为例（将less编译成css的gulp插件）展示gulp的常规用法，只要我们学会使用一个gulp插件后，其他插件就差看看其帮助文档了。让我们一起来学习gulp吧！ ^_^
gulp常用地址：
gulp 自动化使用及介绍
gulp 官方网址
gulp 插件地址
gulp 官方API
gulp 中文API

项目描述

项目简介

项目模块

环境搭建

windows

mac os

框架搭建

目录分析