Single Page Application
使用 Angular.js
實現前後端分離式開發模式
Michael Hsu.tw Oct, 2014
NTUIM R02 BAEIR LAB 徐承志
志志暑假跑到新竹實習
接觸了一些前端的皮毛
網站架構講古
傳統的網站架構
大一計算機概論眼中的網站
第一次載入
第二次載入
從後端架構面： MVC 時代
大三 Rails 眼中的網站
從後端 MVC 的 V 獨立出來
志志碩一眼中的網站
Single Page Application
志志這個暑假眼中的網站
第一次載入
第二次交換資源
Single Page Application = SPA
- 只有在第一次載入整個頁面
- 之後透過 Ajax 動態與 Server 交換資源
- 達到降低傳輸成本
- 可以提升使用者體驗，感覺沒有一直換頁面
- ...
SPA 有什麼
HTML, CSS, JavaScript
比較好的開始實作
挑選框架以及工具
- 前端框架：Angular.js, jQuery, Backbone.js
- 寫出品質 JS：LiveScript, CoffeeScript
- 自動化建構工具： Gulp.js, Grunt.js
進入正題
Angular.js
A client-side JavaScript Framework.
Angular.js 的特點
- 以 SPA 為出發點架構網頁
- 讓 HTML 跟一份 Document 一樣好讀
- 規劃你的 JavaScript 結構
- 更簡易可以達到與使用者互動
- 實作相依性注入的特性
- 更容易進行測試
- ...
使用 Angular.js
雖然不能第一次就上手
讓大家有個基本的認識
加入ng-app 屬性: 作用範圍
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
</head>
<body>
...
</body>
</html>index.html
接著， Angular.js 基本元素
- ng-model：雙向綁定
- controller： $scope 作用域概念
- ng-click：綁定點擊功能
- Ajax $http service，與 Server 溝通
- ng-repeat, filter 呈現資料
ng-model: 雙向綁定
<input type="text" ng-model="yourName">
Hello {{yourName}}!index.html
Angular Expressions
controller, $scope:作用域
<div ng-controller="myController">
<input type="text" ng-model="yourName">
Hello {{yourName}}!
</div>
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.yourName = "Mike";
});index.html
main.js
ng-click：綁定點擊
<button class="btn" ng-click="clickFn()">Click!</button>
app.controller("myController", function($scope) {
$scope.clickFn = function() {
$scope.yourName = "Michael Hsu";
};
});index.html
main.js
Ajax: $http service
app.controller("myController", function($scope, $http) {
$scope.clickFn = function() {
$http.get("https://2014-ntuim-prepconf.firebaseio.com/Students.json")
.success(function(d) {
$scope.students = d;
});
}
});
main.js
ng-repeat, filter 就是迴圈嘛
<div ng-repeat="s in students | filter: yourName">
{{ s.id }} : {{s.name}}
</div>index.html
達成與使用者互動！
還有這麼多這麼多元素
但，我們先停在這邊
Angular.js 結構面
規劃好你的 JavaScript
資料夾結構
<html ng-app="app">
<body ng-controller="mainCtrl">
<ng-include src="'views/login.html'" ng-show="login" class="my-elm"></ng-include>
<div class="container my-elm" ng-hide="login">
<div ng-include src="'views/header.html'"></div>
<div ng-include src="'views/content.html'" style="margin-left: -40px"></div>
</div> <!-- end container -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-animate/angular-animate.min.js"></script>
<script src="js/main.js"></script>
<script src="js/services/services.js"></script>
<script src="js/directives/index.js"></script>
<script src="js/controllers/index.js"></script>
</body>
</html>
index.html
當然在 Production
不能只是這樣
使用建構工具 Gulp.js
What's Gulp.js?
(前端) 工程的建構工具
為何需要使用建構工具?
除去很多重複且繁瑣的人肉工作
操作例如
- 合併靜態檔案
- 壓縮檔案大小
- 打包應用程式
- 編譯模組
- 測試、部署
- ...
更多資訊
總結
如果你有想往前端攻城獅發展，Angular.js 是一個蠻好的開始。
資管同學社群：
[webapp] 互助學習社團
Reference
- http://2014.jsconf.cn/slides/herman-taobaoweb/index.html
- http://ihower.tw/rails3/intro.html
- http://www.humasolutions.com/single-page-app-spa-with-angularjs/
- http://ithelp.ithome.com.tw/question/10132196
- http://blog.miniasp.com/post/2013/04/24/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS.aspx
- ng-book
- 帥哥 iamblue
