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

A client-side JavaScript Framework. 

Angular.js 的特點

  1. 以 SPA 為出發點架構網頁
  2. 讓 HTML 跟一份 Document 一樣好讀
  3. 規劃你的 JavaScript 結構
  4. 更簡易可以達到與使用者互動
  5. 實作相依性注入的特性
  6. 更容易進行測試
  7. ...

使用 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 基本元素 

  1. ng-model:雙向綁定
  2. controller: $scope 作用域概念
  3. ng-click:綁定點擊功能
  4. Ajax $http service,與 Server 溝通
  5. 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

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/

  • 9,287