第一部分  安裝時總結

一、win系統下nodejs安裝及環境配置
第一步：下載nodejs，官網：http://nodejs.org/download/

第二步：安裝nodejs
	下載完成之後，雙擊"node-v0.10.28-x86.msi"，開始安裝nodejs，自定義安裝在D:\dev\nodejs下面。

	在cmd控制檯輸入：node -v，控制檯將打印出：v0.10.28，出現版本提示表示安裝成功。
	該引導步驟會將node.exe檔案安裝到D:\dev\nodejs\目錄下，並將該目錄新增進PATH環境變數。

第三步：npm安裝
	由於新版的nodejs已經集成了npm，所以之前npm也一併安裝好了。同樣可以使用cmd命令列輸入"npm -v"來測試是否成功安裝。如下圖，出現版本提示表示安裝成功。

第四步：安裝相關環境
	npm install -g express-generator
	npm install jade -g
	npm install mysql -g
	預設情況下上述元件都是安裝在D:\dev\nodejs\node_modules資料夾下，這也是nodejs相關元件的自動查詢路徑。

第五步：安裝CoffeeScript
	npm install coffee-script -g
	確認安裝的命令：coffee -v，出現版本號表示成功安裝。

	補充說明：
	所有命令都是-g進行全域性安裝的，這樣安裝的安裝包都在當前使用者下，在磁碟的所有其他地方都可以訪問到，比較方面。否則安裝在當前目錄下，只能在當前目錄下使用。

	安裝express問題
	安裝nodejs安裝包後，通過npm安裝express後，執行express提示" express"不是內部或外部命令，原因是版本問題，當前版本是4.0.0，改成3.5.0即可執行。
	npm install -g 
 
[email protected] 

	注意：express 測試版本用大寫V

npm命令集合：
	1、npm install moduleNames：安裝Node模組
	npm install express 
	預設會安裝express的最新版本，也可以通過在後面加版本號的方式安裝指定版本，如npm install [email protected]

	npm install <name> -g 
	將包安裝到全域性環境中

	但是程式碼中，直接通過require()的方式是沒有辦法呼叫全域性安裝的包的。全域性的安裝是供命令列使用的，就好像全域性安裝了vmarket後，就可以在命令列中直接執行vm命令

	npm install <name> --save 
	安裝的同時，將資訊寫入package.json中專案路徑中如果有package.json檔案時，直接使用npm install方法就可以根據dependencies配置安裝所有的依賴包，這樣程式碼提交到github時，就不用提交node_modules這個檔案夾了。

	2、全域性安裝命令為npm install -g moduleName。
	3、npm view moduleNames：檢視node模組的package.json資料夾
	4、npm list：檢視當前目錄下已安裝的node包
	5、npm help：檢視幫助命令
	6、npm view moudleName dependencies：檢視包的依賴關係
	7、npm view moduleName repository.url：檢視包的原始檔地址
	8、npm view moduleName engines：檢視包所依賴的Node的版本
	9、npm help folders：檢視npm使用的所有資料夾
	10、npm rebuild moduleName：用於更改包內容後進行重建
	11、npm outdated：檢查包是否已經過時，此命令會列出所有已經過時的包，可以及時進行包的更新
	12、npm update moduleName：更新node模組
	13、npm uninstall moudleName：解除安裝node模組
	14、一個npm包是包含了package.json的資料夾，package.json描述了這個資料夾的結構。訪問npm的json資料夾的方法如下：
	$ npm help json 此命令會以預設的方式開啟一個網頁，如果更改了預設開啟程式則可能不會以網頁的形式開啟。
	15、釋出一個npm包的時候，需要檢驗某個包名是否已存在 $ npm search packageName
	16、npm init：會引導你建立一個package.json檔案，包括名稱、版本、作者這些資訊等
	17、npm root：檢視當前包的安裝路徑
	npm root -g：檢視全域性的包的安裝路徑
	18、npm -v：檢視npm安裝的版本
	19、npm install --save moduleName 安裝模組到本目錄
	更多命令請參看npm官方文件：https://www.npmjs.org/doc/
	
	npm install -g cnpm --registry=https://registry.npm.taobao.org（npm映象源指向淘寶） 
	cnpm install -g cordova ionic（安裝cordova ionic） 
	cnpm update -g cordova ionic（更新cordova ionic） 
	ionic -help（檢視幫助） 
	ionic -v（檢視版本） 

	ionic start myApp blank（空專案） 
	ionic start myApp tabs（帶導航條） 
	ionic start myApp sidemenu（帶側滑選單） 

	ionic platform add android（新增android平臺） 
	ionic platform remove android（移除android平臺） 
	ionic build android（編譯專案apk）ionic emulate android（執行專案apk 手機連線在手機執行 模擬器連線在模擬器執行） 
	ionic run android （相當於build + emulate） 
	ionic serve （開啟服務除錯） 

	ionic build ios（編譯專案ipk）ionic emulate ios（執行專案ipk） 

第六步：建立專案
	1、express /tmp/foo && cd /tmp/foo
	2、npm install //下載依賴包
	3、npm start //啟動專案

目錄介紹:
	node_moduls  存放所有的專案依賴庫
	package.json  專案依賴配置及開發者資訊
	app.js 程式啟動檔案
	public 靜態檔案（css js img）
	routes 路由檔案（MVC中的C，controller）
	Viesws 頁面檔案（Ejs模板）

安裝Android SDK
1、下載Android SDK，點選安裝，直接預設路徑即可！
下載地址：http://developer.android.com/sdk/index.html
2、預設路徑安裝後，安裝完成，開始配置環境變數。
3、開啟計算機屬性——高階系統設定——環境變數（如上文）
4、新建一個環境變數，變數名：ANDROID_HOME，變數值：C:\Program Files (x86)\Android\android-sdk（以你安裝目錄為準,確認裡面有tools和add-ons等多個資料夾），點選確認。
5、在變數PATH後面加上變數值%ANDROID_HOME%\tools;點選確認即可。 如果沒有這個變數，新建一個即可！新建方法見上文！
6、Android SDK配置完成，接下來驗證配置是否成功。
7、點選執行——輸入cmd——回車——輸入android -h——回車
8、 ionic  Android 環境搭建過程遇到的問題 http://bbs.ionic-china.com/read.php?tid=7&fid=4 


第七步 安裝Ionic
	1、執行npm install -g ionic
	2、建立一個Ionic APP 執行ionic start myapp[template]
		Template 有如下三種 預設是tabs project:
		tabs（預設）、sidemenu、blank
	3、安裝模板  ionic install --save 模板
	4、cordova 是頁面與裝置橋接
	5、npm install --save bower



第八步 安裝gulp相關程式碼合併、混淆工具
	npm install gulp  
	npm install gulp-concat:合併檔案
	npm install gulp-rename:重新命名檔案
	npm install gulp-sass:支援sass
	npm install gulp-minify-css:壓縮css 
	npm install gulp-connect  配置一個web伺服器
	
第九步 編譯測試
	1.android版本
		cd myapp  
		ionic platform add android  
		ionic build android  
		ionic run android  
		如果要在虛擬機器中測試，可以改用
		ionic emulate android
	2.ios版本
		$ ionic start myapp tabs  
		$ cd myapp  
		$ ionic platform add ios  
		$ ionic build ios  
		$ ionic emulate ios
	3.瀏覽器同時修改埠號
		cd myapp
		ionic serve -p 8105
		
	4.連線資料線直接測試
		ionic run android


重點集合：
一、ionic安裝失敗或者cordova安裝失敗解決方法：
映象使用方法（三種辦法任意一種都能解決問題，建議使用第三種，將配置寫死，下次用的時候配置還在）:

1.通過config命令
	npm config set registry https://registry.npm.taobao.org 
	npm info underscore （如果上面配置正確這個命令會有字串response）

2.命令列指定
	npm --registry https://registry.npm.taobao.org info underscore 

3.編輯 ~/.npmrc 加入下面內容
	registry = https://registry.npm.taobao.org
	搜尋映象: https://npm.taobao.org
	建立或使用映象,參考: https://github.com/cnpm/cnpmjs.org

4、使用cnpm(強烈建議)
	安裝cnpm
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	以後所有的npm可用cnpm代替，如:cnpm install ionic

5、如果還是一直失敗，將ionic檔案下載解壓後放到C:\Users\Auser\AppData\Roaming\npm\node_modules中

6、1.配置環境變數node的npm命令
	Path : C:\Documents and Settings\Administrator\Application Data\npm
	2.補齊npm資料夾下有關於ionic的檔案 http://download.csdn.net/detail/superjunjin/8417723
	3.補齊ionic專案下node_modules等檔案 http://download.csdn.net/detail/superjunjin/8417731
	（具體檔案見最後的壓縮包）
	ionic start myApp sidemenu  //建立帶有左側帶有menu欄的示例專案
	ionic start myApp blank   //建立空白專案
	
第二部分 開發過程總結
一、Angular 提供了 3 種方法來建立並註冊我們自己的服務。1. Provider  2. Factory  3. Service
	Providers 是唯一一種你可以傳進 .config() 函式的 service。當你想要在 service物件啟用之前，先進行模組範圍的配置，那就應該用 provider。

二、bower安裝restangular失敗（報錯：Bower : ENOGIT git is not installed or not in the PATH）
	1.新增git路徑到環境變數PATH中（命令：set PATH=%PATH%;D:\Program Files\Git\bin）
	2.執行bower install restangular 即可安裝成功
	3.http://www.ng-newsletter.com/posts/restangular.html
	4.restangular文件：https://github.com/mgonto/restangular#element-methods
	5.安裝bower install underscore
	
三、restangular需要用到的js(js少引入報錯：Uncaught ReferenceError: _ is not defined from restangular)
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
	<script type="text/javascript" src="http://cdn.jsdelivr.net/restangular/latest/restangular.min.js"></script>

四、跨域錯誤解決辦法（XMLHttpRequest cannot load  ''. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' ' is therefore not allowed access. ）
	Java程式碼中返回結果集前增加response.setHeader("Access-Control-Allow-Origin", "*");
	
五、國際化  http://yijiebuyi.com/blog/3b55056c87b73ba606c19e9338dca679.html
	1.安裝bower install angular-translate
	2.安裝bower install angular-translate-loader-static-files
	3.angular國際化不存在亂碼，如果出現亂碼可能是中文json檔案編碼非UTF-8格式
	4.國際化使用（移動端有問題  無法使用）：
		1. 需要引入JS
			<script src="lib/angular/angular.js"></script>
			<script src="lib/angular-translate/angular-translate.js"></script>
			<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
		2.建立資料夾i18n存放cn.json /en.json
			en.json：{"100001":"Login","100002":"Register"}
			cn.json：{"100001":"登入","100002":"註冊"}
		3.在app.js中config裡配置如下
			//國際化配置
			$translateProvider.preferredLanguage('cn');
			$translateProvider.useStaticFilesLoader({
			  prefix: '/i18n/',
			  suffix: '.json'
			});
		4.html頁面使用
			{{'100001' | translate }}
		5.按鈕切換語種
		  .controller('LanguageSwitchingCtrl', ['$scope', '$translate', function (scope, $translate) {
			scope.switching = function (lang) {
			  $translate.use(lang);
			};
		  }]);
			
	
六、AngularJS iframe跨域開啟內容時報錯誤的解決辦法
<iframe id="myFrame" ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe>
開啟不同域的內容時報下面的錯誤:
Blocked loading resource from url not allowed by $sceDelegate policy

解決方案：

app.config(function($sceDelegateProvider) {

   $sceDelegateProvider.resourceUrlWhitelist([

       // Allow same origin resource loads.

       'self',

       // Allow loading from our assets domain.  Notice the difference between * and **.

       'http://media.w3.org/**']);

});