MEAN架構學習筆記，mean學習筆記

MEAN架構學習筆記，mean學習筆記
MEAN架構學習筆記

MEAN開發架構的資料很少，主要的資料還是來自於learn.mean.io網站上的介紹。於是抱著一種零基礎學習的心態，在瞭解的過程中，通過翻譯加上理解將MEAN架構一點點消化並且吸收，一步一步來，慢慢地記錄我學習MEAN的點點滴滴。

1、MEAN是能夠系統管理使用者的
通過MEAN的mean-cli來系統管理使用者。命令是：

$ mean user <email>$ mean user <email> --addRole <role>;$ mean user <email> --removeRole <role>;

2、MEAN可以列舉也可以安裝和卸載模組

MEAN的模組安裝後放在/node_modules檔案夾中。

$ mean list$ mean install <module>$ mean uninstall <module>

3、自訂的包應該放在
/package/custom
檔案夾中，而需要貢獻的包則放在
/package/contrib
檔案夾中。

4、核心包中有：
system：基本頁面、整體頁面配置、渲染引擎、靜態檔案、用戶端到服務端的路由等。
user：提供使用者註冊資料庫模型以及登入和註冊的相關驗證。
access：系統管理權限以及中介軟體，它包含了很多授權方法依賴user包。
theme：有關CSS以及圖片和背景資源。
articles：可以看成是部落格以及CMS管理內容的一個起點，在用戶端以及服務端它包含了完整的增刪改查操作（GRUD）。


5、所有的包都有它們對應的用戶端和服務端部分。用戶端部分在public檔案夾中，其中有：
asset：Javascript代碼、CSS以及圖片等；
controllers：前端架構Angular的控制器。
config：包含了路由檔案。
services：Angular服務（還有directives和filter檔案夾）
views：Angular視圖


服務端部分在Server檔案夾中，其中有：
config：設定檔
controllers：Angular控制器
models：資料庫Schema模型
routes：REST API路由端
views：基於SWIG的html渲染


6、依賴注入（Dependency Injection）
MEAN的依賴注入能夠在你聲明你所需要的依賴時自動解析系統所擁有的包來為你解析所有的依賴。任何註冊過的包，都會在你聲明依賴的時候變得可用。
比如說，在某個包的根目錄下，有app.js檔案，這其中包含的註冊方法中，就用到了依賴注入。
這裡MyPackage在註冊的時候，依賴了名為Tokens的包。

// Example of registering the tokens packageMyPackage.register(function(app, auth, database, Tokens) {  // I can make use of the tokens within my module  MyPackage.someExampleFunction('some parameter');  // I can override functions  MyPackage.someExampleFunction = function(param) {    //my custom logic goes here  };});

7、Angular模組和依賴
在註冊每一個包的時候，都會自動建立一個mean.[package_name]這樣的Angular模組。
同時你能夠聲明你的Angular模組需要使用的Angular依賴。比如說這樣：

// Example of adding an angular dependency of the ngDragDrop to theMyPackage.angularDependencies(['ngDragDrop']);

8、物件和彙總（Assets and Aggregation）
所有的物件（包括Javascript指令碼、CSS和圖片等）被放在public/assets檔案夾中。
Javascript指令碼、CSS和圖片能被彙總到全域的彙總檔案中。預設所有Javascript指令碼會包裹在匿名的函數中，除非{global:true}沒有放置在被包含的域中。

<pre name="code" class="javascript">//Adding jquery to the mean projectMyPackage.aggregateAsset('js','jquery.min.js');//Adding another library - global by default is falseMyPackage.aggregateAsset('js','jquery.min.js', {global:true});//Adding some css to the mean projectMyPackage.aggregateAsset('css','default.css');

沒有放在assets檔案夾中的Javascript檔案會被彙總和注入到mean項目中。如果不像這麼做，那麼應當放置在public/assets/js檔案夾中。彙總操作支援控制彙總代碼所放的位置。通常需要添加一個weight和group變數來確定它是否在正確的位置。

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

9、Settings對象
Settings對象是持久型對象，允許你在每一個包中儲存持久資訊比如說配置選項或者是管理資訊。
可以通過settings這個函數來擷取和儲存持久資訊。比如說：

MyPackage.settings({'someSetting':'some value'}, function (err, settings) {    // You will receive the settings object on success});// Another save settings example this time with no callback// This writes over the last settings.MyPackage.settings({'anotherSettings':'some value'});// Get settings. Retrieves latest saved settingsMyPackage.settings(function (err, settings) {  // You now have the settings object});

當存入資訊的時候，第一個參數是JSON格式資訊，第二個參數是回呼函數。回呼函數用來判斷資訊是否存入，第二個參數是可選的。當讀取資訊的時候，只需要一個參數即可。這個參數就是回呼函數。

10、Express路由
所有到服務端控制器的路由都是由Express控制的。包系統將會沿著包的對象一直傳遞到路由檔案。通常是/server/routes/myPackages.js。
預設的話routes函數有其它的一些參數：
MyPackage.routes(app, auth, database);
下面是位於server/routes/myPackage.js的例子：

// The Package is past automatically as first parametermodule.exports = function(MyPackage, app, auth, database) {  // example route  app.get('/myPackage/example/anyone', function (req,res,next) {    res.send('Anyone can access this');  });};

11、Angular路由
Angular也有路由，它的路由通常在public/routes/myPackage.js中。最新版本的MEAN使用的是$stateProvider。

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

當以包名稱作為開頭的話，Angular的視圖就可以通過templateUrl來公開了。

12、菜單系統
包可以勾住現有的菜單系統然後添加連結到MEAN整合的菜單中去。每一個連結都有指定title、template、menu、role。如果指定的menu並不存在，那麼一個新的menu將會被建立出來。通過menu angular service查詢連結的資訊，可以讓menu對象變在用戶端中變得可以訪問。


下面是介紹如何在app.js中為菜單添加連結的。

//We are adding a link to the main menu for all authenticated usersMyPackage.menus.add({  title: "myPackage example page",  link: "myPackage example page",  roles: ["authenticated"],  menu: "main"});

可以通過查看public/system/controllers/header.js目錄來瞭解菜單服務如何?的。


13、Html視圖渲染
包可以通過內建的渲染函數進行html的渲染。預設的渲染函數是swig。視圖存在於包中的server/views檔案夾中，並且以.html作為結尾。
下面是一個簡單渲染html的例子。

app.get('/myPackage/example/render', function (req,res,next) {  MyPackage.render('index', {packageName:'myPackage'}, function (err, html) {    //Rendering a view from the Package server/views    res.send(html);  });});

14、覆蓋預設的布局
通過自訂的包，可以覆蓋預設的布局。
下面是一個覆蓋預設系統布局而不是使用在包內的本地布局的例子：

MyPackage.register(function(system, app) {  app.set('views', __dirname + '/server/views');  // ...

不過注意，package必須依賴System包來保證它在System包後面被求值，這樣可以覆蓋視圖檔案夾。


15、覆蓋視圖
你可以覆蓋core包使用的預設的public視圖。建立一個首頁，你必須建立一個包，並且修改在public檔案夾的指令碼，就像這樣：

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

這樣會將mycustompackage/views/myhomepage.html渲染成為首頁。

16、建立自己的包

$ mean package <packageName>

它將會將包建立在/packages/custom/packageName下。

17、刪除包

$ mean uninstall myPackage

18、貢獻自己的包
如果你的包已經定型並且不會出什麼問題了，那麼你可以將你的包上傳到包程式碼程式庫中。方法是：

$ mean register # register to the mean network (see below)$ cd <packages/custom/pkgName>$ mean publish

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。