Michael Hsu
Try to Keep everything in Mind
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
Thanks!
[NTUIM RrepConf] SPA – 使用 Angular.js 實現前後端分離開發應用
By Michael Hsu
[NTUIM RrepConf] SPA – 使用 Angular.js 實現前後端分離開發應用
這是一個在台大資管人對於網站開發的心得議程。從我們一年級計算機概論課程就第一次學習簡易的 HTML、CSS 網頁，到大三資料庫系統架設 PHP 以及資料庫環境，接著或許會有些更熱血的同學會在大四接觸到用 Rails 或 Express 開發，才開始有了 MVC 的概念，每個階段對於網站開發又有不同的心得。而這次我想分享今年暑假在實習時接觸的前端框架 Angular.js，以及過程是怎麼將網站做前後端分離的應用開發。不會談論過於細節的實作程式碼，希望給大家一個概觀的架構以及怎麼開始使用 Angular.js。http://www.im.ntu.edu.tw/~b100027/
