MEAN 全棧框架學習筆記：核心套件架構、依賴注入、路由、資產聚合與套件開發

MEAN 全棧框架學習筆記：核心套件架構、依賴注入、路由、資產聚合與套件開發

MEAN (MongoDB, Express, Angular, Node.js) 以 JavaScript 貫穿全棧，提供一套模組化開發框架。本文整理官方 mean-cli 使用、核心套件結構、依賴注入、Angular/Express 路由、資產聚合、Settings 持久化、選單系統、視圖覆蓋與自訂套件開發流程。

一、mean-cli 常用指令

二、核心套件與目錄結構

每個套件包含 public/（客戶端）與 server/（伺服端）兩大目錄：

• public/assets：JS、CSS、圖片
• public/controllers：Angular 控制器
• public/config：路由配置
• public/services：Angular 服務、指令、過濾器
• public/views：Angular 視圖
• server/config：伺服端配置
• server/controllers：Express 控制器
• server/models：Mongoose Schema 模型
• server/routes：REST API 路由
• server/views：Swig 模板

三、依賴注入

套件註冊時聲明所需依賴，框架自動解析已註冊套件：

// 套件根目錄 app.js
MyPackage.register(function(app, auth, database, Tokens) {
  // Tokens 為另一已註冊套件，自動注入
  MyPackage.someExampleFunction = function(param) { /* 自訂邏輯 */ };
});

四、Angular 模組與相依

每個套件自動建立 mean. Angular 模組，可聲明額外 Angular 依賴：

MyPackage.angularDependencies(['ngDragDrop']);

五、資產聚合

public/assets 下的資源可聚合至全域檔案：

MyPackage.aggregateAsset('js', 'jquery.min.js');           // 預設包裹於 IIFE
MyPackage.aggregateAsset('js', 'jquery.min.js', {global:true}); // 全域暴露
MyPackage.aggregateAsset('css', 'default.css');

控制載入順序：

MyPackage.aggregateAsset('js', 'first.js', {global:true, weight:-4, group:'header'});

六、Settings 持久化物件

儲存配選項或管理資訊：

// 寫入
MyPackage.settings({'someSetting':'value'}, function(err, settings){ /* 回調 */ });
MyPackage.settings({'another':'value'}); // 覆蓋寫入，無回調

// 讀取
MyPackage.settings(function(err, settings){ /* 取得最新 settings 物件 */ });

七、Express 路由

server/routes/myPackage.js：

module.exports = function(MyPackage, app, auth, database) {
  app.get('/myPackage/example/anyone', function(req,res,next){
    res.send('Anyone can access this');
  });
};

八、Angular 路由 (UI-Router $stateProvider)

public/routes/myPackage.js：

$stateProvider.state('myPackage example page', {
  url: '/myPackage/example',
  templateUrl: 'myPackage/views/index.html'
});

視圖路徑以套件名為前綴。

九、選單系統

在 app.js 掛載選單項目：

MyPackage.menus.add({
  title: 'MyPackage Example',
  link: 'myPackage example page',
  roles: ['authenticated'],
  menu: 'main'
});

客戶端透過 menu Angular service 存取選單資料。

十、HTML 視圖渲染與覆蓋

伺服端渲染 Swig 模板：

app.get('/myPackage/example/render', function(req,res,next){
  MyPackage.render('index', {packageName:'myPackage'}, function(err, html){
    res.send(html);
  });
});

覆蓋系統預設佈局：

MyPackage.register(function(system, app){
  app.set('views', __dirname + '/server/views'); // 依賴 system 套件確保載入順序
});

覆蓋核心套件視圖：

angular.module('mean.mycustompackage', ['mean.system'])
  .config(['$viewPathProvider', function($vpp){
    $vpp.override('system/views/index.html', 'mycustompackage/views/myhomepage.html');
  }]);

十一、建立與發布自訂套件

$ mean package mypackage        # 建立於 /packages/custom/mypackage
$ mean uninstall mypackage      # 移除
$ mean register                 # 註冊帳號
$ cd packages/custom/mypackage
$ mean publish                  # 發布至倉庫

1. 上一篇文章： MySQL 陷阱：InnoDB 與 MyISAM 不支援 Hash 索引，建立時卻不報錯
2. 下一篇文章： Excel 數據挖掘實戰（四）：利用「突出顯示異常值」快速識別離群數據

DB2 教學

機房重構實戰：View、Trigger、Stored Procedure 綜合應用

機房重構實戰：View、Trigger、Stored Pro

善用 Technology Explorer for IBM DB2 實現 db2auth 使用者與群組驗證管理

db2auth 外掛優勢與考量 使用 DB2 資料儲存

從 MySQL/PostgreSQL 遷移至 DB2 Express-C 完整實戰指南

前言：免費企業級資料庫的最佳選擇 MySQL 與 Postg

DB2 資料遷移三大實戰方法：備份還原、EXPORT/IMPORT、db2look+db2move 完整對比與避坑指南

DB2 資料遷移無銀彈，需根據平台相容性、停機容忍度、資料量