AngularJs 學習 (二)
緊接著第一部分:
推薦閱讀: http://adrianmejia.com/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/
源項目: git clone https://github.com/amejiarosario/todoAPIjs.git
首先介紹下AngularJS是一個由模型(Model)、視圖(View)、控制器(Controller)組成
Model: 用來處理數據,包括兌取和設置數據,一般是指操作數據庫。Model定義了應用層數據,它是獨立於用戶界面的,在AngularJS中,Model的應用非常簡單,
可以理解為一個Model就是一個對象。
View: 在Web應用中,視圖就是HTML網頁,是用來展示Model數據的。在AngularJs中,數據與模板引擎相結合,在加上AngularJs的指令(Directives),從而構建了一個
豐富的HTML頁面。
Controller: 控制器是用來操作Model中的數據的,在AngularJS應用中,控制器是通過controller()方法來創建JavaScript函數的。一個模塊裏面可能用多個模型和視圖,控制器
就起到了鏈接模型和視圖的作用。
頁面跳轉: 頁面跳轉就需要設計控制器,模板(視圖),路由(Router)
其中Router由AngularJS中的$routeProvider, 這是AngularJS中的一個服務
$index: 這個是Angular自帶的索引值,一般配合ng-repeat 使用
$http: $http是AngularJS的內置服務,通過他可以直接與後臺進行服務器通信。$http知識簡單地封裝了瀏覽器原生地XMLHttpRequest對象。
$http服務是只能接收一個參數的函數。這個參數就是一個對象,包含了用來生成HTTP請求的配置內容;詳情展示
基於$resource的工廠方法:
$http是一種快捷的網絡請求服務,除此之外,AngularJS還提供了另外一個服務----$rescouce. $resouce對$http做了一層封裝。用它來處理
ResetfulAPI會更加快捷。
$resource 已經封裝好的方法:
{ ‘get‘: {method:‘GET‘}, // 讀取一條記錄 ‘save‘: {method:‘POST‘}, // create record ‘query‘: {method:‘GET‘, isArray:true}, // get list all records ‘remove‘: {method:‘DELETE‘}, // remove record ‘delete‘: {method:‘DELETE‘} }; // same, remove record
上面的還缺少了一種方法就是update, 這個方法可以再$resource中進行添加
$resource(‘‘, null , { ‘update‘: {method: ‘PUT‘}
小tips:
跳轉頁面 $location.url(‘/‘)
AngularJs 學習 (二)