AngularJs

AngularJs教學

Jesse 2019/12/30 10:00:00
840

AngularJs建立一個簡單的SPA頁面:

 

什麼是SPA:

SPASingle Page Application)意思是僅有一個頁面的應用程式,也就是說網頁不需跳轉頁面就可以達到基本的新增、查詢、修改、刪除資料功能。

 

為什麼要使用SPA:

1. Server-side 的工作丟給 Client-side,以降低 Server 的負載量。

2.提升用戶體驗,讓操作流程變得更加流暢,不需要等待跳轉畫面的時間。

使用SPA的缺點:

1.由於畫面都是過script渲染,可能會造成SEO的表現變差

 

由於畫面交由client-side來渲染,前端的開發工作會變得較為複雜,因此我們需要一個好的框架來做管理,可以降低開發的複雜度,也可以統一開發的風格,讓後續維護工作變簡單。

 

本文將簡單示範,如何使用AngularJs建立一個SPA demo,步驟如下:

 src

首先,在主畫面引入AngularJsLibrary,主畫面可以是JSP,也可以是html

 

AngularJs最基本的功能只需要angular.min.js就可以執行了,本文因為需要Route功能,所以引入angular-route.min.js模塊。

 

步驟一:建立一個模組。

script內,建立一個模組,命名為=myApp,並且注入ngRoute模組。

 

 

Angular 建立最基本的模組語法如下

var app= angular.module('yourAppName', []);

第一個參數是自訂模組名稱,第二個陣列參數則是說當使用這模組(Module)時,它還會需要使用那些額外的模組(Module),可以是自己建的或是原生的,預設帶入ng模組。當使用到Angular提供的原生模組時,要引入相應的模塊。

 

步驟二:設定URL路徑mapping

URL來決定畫面呈現那些元件,以及使用那個controller

 

Config方法可以在Module載入前做一些設定。

引入的ngRoute模組後,可以透過依賴注入的方式獲得$routeProvider物件,使用when方法可以定義URL、畫面、controller之間的對應關係。

Otherwise方法可以在URL都對應不到時重導。

 

步驟三:建立controller

建立前面在config內有使用到的controller

 

 

 

一個模組可以,定義多個controller,來處理畫面中不同的區塊,每個controller都有獨立的作用域,在controller注入$scope物件,可以在作用域內定義方法,以及變數,每個controller之間$scope互相獨立。若controller之間需要互相溝通,可以使用service物件,或者可以在網址上帶入參數,在接收方controller注入$routeParams,以此取得傳入參數。

 

本文中以service裡的陣列模擬DB裡面的資料,將dbData物件,注入到各個controller中,service也可以放共用方法讓各個controller共享。

實際在專案要取得server端資料中可以使用$http物件發送ajaxserver端。語法如下:

 

 

步驟四:準備畫面


建立一個主要畫面index.html,然後在主要畫面上,建一些a標籤用來改變URL

html標籤上定義一個ng-app屬性,名稱為要該畫面要套用的模組,一個html只能定義一個ng-app做為根模組。ng-app也可以定義在bodydiv上,表示AngularJs只作用在此範圍內。

 

ng-view屬性會根據URL動態載入不同的模板,以及套用對應的controller

 

再建立之前config定義的各html模板,一個最基本的SPA畫面就完成了。

 

 

 

上圖是query.html,透過主畫面ng-app=”myapp”宣告,可以使用ng-…的宣告式,在input標籤設定ng-model屬性可以將畫面的值,雙向綁定到masterCtrl裡面的$scope中的屬性例如ng-model=”myName”,在controller中可以$scope.myName取得。

ng-repeat可以將$scope中的陣列動態渲染到畫面上,{{ name }} angular表達式,可以將$scope裡的值取出,也可以加入Filtter,讓資料格式化呈現,而不會影響到資料本身例如:{{ x.date | date:"yyyy-MM-dd"}},可以將日期格式化成"yyyy-MM-dd"。更多用法可以參考官方文件: https://docs.angularjs.org/api/ng/filter

ng-click 可以在畫面上監聽click事件,用法跟原生onclick差不多,但是ng-click內呼叫的方法必須要在$scope中有定義。

 

畫面呈現如下:

 

 

新增畫面的html如下:

 

上圖是新增跟修改的頁面,主要以editBean物件傳值,saveAdd方法將editBean push 到dbData中,這樣查詢時就可以取得最新的資料了。

 

 

新增畫面呈現如下:

 

 

 

以上就是以AngualrJs製作SPA簡單的範例,本文主要介紹AngualrJs使用方法,詳細的設計概念以及實現原理,還是建議讀者可以上網搜尋參閱,對於開發及除錯都會頗有幫助

Jesse