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

ionic1商城项目

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

技术介绍

ionic

Ionic并非一个入门级的框架，它是一个专一于用web开发技术，基于HTML5建立相似于手机平台原生应用的一个开发框架。绑定了AngularJS和SASS。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，能够实现编译成各个平台的应用程序。因此，在学Ionic以前，首先要了解学习Ionic须要具有的技能：
一、熟练运用 HTML、CSS、JavaScript；
二、熟练运用 HTML5的新元素。
三、有使用 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

框架搭建

目录分析