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

框架搭建

目錄分析