學習-【前端】-angularjs基本框架以及向服務器發送請求的方法

        昨天寫了個跨域的東西，本身琢磨了下，想到這種方式正好也是以前想的混合app如何交互服務器的解決辦法。內心仍是蠻開心的。今天又花時間把前端客戶端部分的框架作了出來，整合的思路是參照node社區移動端的設計方案，把全部controllers和全部services放到一塊兒，不過請求數據未用$resource也沒有用原生的$http,而是使用了restangular，用完這個再把配置文件單獨整合到一個文件夾裏。整個框架看起來都十分的整潔了。

    先給個結構圖：

    

 

由於是由產品驅動的架構，因此最開始沒有使用bower,grunt等自動化部署，後來以爲不必那麼麻煩，爲了保證輕量級乾脆本身手動加入這謝依賴，其中vendor下的幾個文件還能夠用bootstrap的cdn服務，到真實部署的時候還能夠用上

<script src="http://cdn.bootcss.com/lodash.js/2.4.1/lodash.min.js"></script>

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>

<script src="http://cdn.bootcss.com/restangular/1.4.0/restangular.min.js"></script>

這裏分的結構也很清晰，index.js實際上是最開始作靜態界面的時候的動態效果實現。這裏不用理咱們只看關於angular的東西，其中app.js是入口函數，咱們須要再裏面配置各個模塊，以及設置好跨域相關配置。這裏貼出代碼：

var fruitcontroller=angular.module('fruitpoint.controllers', ['fruitpoint.services','restangular']) .config(['$httpProvider',function($httpProvider) { 		$httpProvider.defaults.useXDomain = true; 		delete $httpProvider.defaults.headers 			.common['X-Requested-With']; 	}]); ; var fruitservice=angular.module('fruitpoint.services', []); angular.module('fruitpoint.filters', ['fruitpoint.services']); angular.module('fruitpoint.directives', []);

咱們先沒必要理會filters和directives模塊，由於這裏只用到controller和service，

這兩個controller依賴相關的service，service裏則依賴上文提到的restangular，用來向服務器發送請求並賦值給做用域。

下面先看controller:

fruitcontroller .controller("indexct",function($scope,IndexService){ 	$scope.name="s"; 	IndexService.getIndexData().then(function(data, status, headers){ 		console.log(data.body); 	}); });

能夠看到是在fruticontroller，也就是標記爲fruitpoint.controllers的模塊下，配置的控制器，我這裏命名的方式是按照每一個頁面的名字，好比這裏是首頁。這個控制器依賴了相應的首頁服務，而後調用getIndexData()方法後返回一個數據。

咱們能夠用相似於上面的$scope.name將返回的數據給外部的視圖使用。

接下來是IndexService:

fruitservice .factory('IndexService',['Restangular',function(Restangular) { 	var fruitpoint = Restangular.allUrl('one',baseurl); 	return { 		getIndexData: function() { 			return fruitpoint.post(serverinterfaces.I90002); 		} 	}; }])

服務是以fruitservice模塊爲基準，這裏我把Restangular注入了服務中，關於這個Restangular的相關文檔，你們能夠訪問http://www.ng-newsletter.com/posts/restangular.html

能夠看到很詳細的配置，須要說明的是要再index.html引入上面貼的三個cdn或者vendor下的本地文件，

另外再app.js類配置好它，注意大小寫的問題，小寫的restangular表明模塊名，首字母大寫則是表明服務，若是想要在config裏配置則須要RestangularProvider。

而後咱們如今把它注入到服務中去。

Restangular.allUrl('one',baseurl);

這句話是設置好訪問的路徑，這裏的baseurl是全局變量，我把它放在fruitconfig.js中，代碼以下。

/**  *  * @authors Your Name (you@example.org)  * @date    2015-03-03 16:01:21  * @version $Id$  */ var baseurl = 'http://localhost:3000/fruitpoint'; var serverinterfaces = { 	I90002: { 		base: { 			reqTime: '201409041455123', 			proNo: '90002' 		}, 		content: { 			MR_ID: '1234' 		}, 	} }

這裏除了baseurl還有一個訪問後臺的接口數據，Restangular.allUrl完了以後返回一個對象，在getIndeData中調用post方法，由於個人服務器設計就是post的，服務器經過解析postdata中的數據獲得數據接口，找到後臺中響應的服務模塊，服務模塊調用持久模塊，持久模塊使用mysql的連接訪問mysql數據庫而後返回給前端。

 

最終由咱們的controlle將數據打印到控制檯。

這樣一來咱們的先後端所有采用統一接口，再作權限控制或者app響應數據的時候都比較方便，另外也徹底分離開了先後端，前端開發不須要依賴服務器。各自分工，後端使用了node這個新穎時髦性能友好的東西。整個框架看起來也算是比較簡潔完善，稍後我會公佈下先後端源碼，由於還想再完成app後一塊兒公開，因此可能會晚些，不過不管如何我的以爲去研究製做一個系統的框架，學習成熟項目的框架結構都比寫枯燥的代碼來的有趣。