AngularJS 提供了一個 Javascript 的 MVC 框架讓開發者能夠輕易的在前端開發中實現 MVC 架構
但我認為 AngularJS 帶給前端開發者最重要的思維還是模組化以及開發模式
先從模組化談起
模組化(Modularity)已經是前端開發中一個很重要的準則了，就像大部分書籍說的
模組化能夠讓我們更能夠輕易重用(reuse)各個模組，另外能夠讓你容易地進行測試
也能夠幫助開發者快速並明確地釐清一個大型的前端應用的架構
但要組織一個大量模組間相互依賴的關係其實是一個蠻重要的課題
如果處理不當容易造成模組間的緊密耦合關係，並且降低重用性以及難於測試
要如何解耦？你可以透過 Mediator Pattern 或是 Observer Pattern 這類型的設計模式
這其實就有點像是 Event Driven Development
2014年8月16日 星期六
2014年8月3日 星期日
AngularJS 教學 - Ajax
在 AngularJS 教學 - MVC 介紹 中有特別提到 Model(模型) 的職責
其中一項就是用來跟後端作資料的操作 (CRUD)
而 AngularJS 提供了 REST 以及 Ajax 這兩種方式讓你能夠跟後端的應用程式作溝通
以下就介紹 AngularJS 的 Ajax 方法吧
首先 AngularJS 提供了 一個 Service 讓開發者能夠運用 Ajax，那個 Service 就叫做 $http
當你的模組需要用到 Ajax 的時候，可以將 $http 直接注入到你的模組中，就像 Controller 的 $scope 一樣
接著就看一下一個簡單的範例吧
其中一項就是用來跟後端作資料的操作 (CRUD)
而 AngularJS 提供了 REST 以及 Ajax 這兩種方式讓你能夠跟後端的應用程式作溝通
以下就介紹 AngularJS 的 Ajax 方法吧
首先 AngularJS 提供了 一個 Service 讓開發者能夠運用 Ajax，那個 Service 就叫做 $http
當你的模組需要用到 Ajax 的時候，可以將 $http 直接注入到你的模組中，就像 Controller 的 $scope 一樣
接著就看一下一個簡單的範例吧
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">
<head>
<title>Examples</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var
demoApp = angular.module("demoApp", []);
demoApp.factory("Todo", function($http){
return {
list:
function(){
$http.get("todos.json").success(function
(data) {
return
data;
});
}
};
});
demoApp.controller("demoCtrl", function($scope,
Todo){
$scope.loadData = function(){
$scope.todos =
Todo.list();
}
});
</script>
</head>
<body>
<div ng-controller="demoCtrl">
<button ng-click="loadData()">Load Todos</button></br>
<table>
<tr>
<td>NO.</td><td>Name</td><td>Priority</td>
</tr>
<tr ng-repeat="todo in todos">
<td>{{todo.id}}</td>
<td>{{todo.name}}</td>
<td>{{todo.priority}}</td>
</tr>
</table>
</div>
</body>
</html>
訂閱：
文章 (Atom)