MEAN框架學習筆記

MEAN框架學習筆記

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

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

$ mean user 
$ mean user  --addRole ;
$ mean user  --removeRole ;

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

MEAN的模塊安裝後放在/node_modules文件夾中。

$ mean list
$ mean install 
$ mean uninstall 

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 package
MyPackage.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 the
MyPackage.angularDependencies(['ngDragDrop']);

8、物件和聚合（Assets and Aggregation）
所有的物件（包括Javascript腳本、CSS和圖片等）被放在public/assets文件夾中。
Javascript腳本、CSS和圖片能被聚合到全局的聚合文件中。默認所有Javascript腳本會包裹在匿名的函數中，除非{global:true}沒有放置在被包含的域中。

//Adding jquery to the mean project MyPackage.aggregateAsset('js','jquery.min.js'); //Adding another library - global by default is false MyPackage.aggregateAsset('js','jquery.min.js', {global:true}); //Adding some css to the mean project MyPackage.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 settings
MyPackage.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 parameter
module.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 users
MyPackage.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 

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

17、刪除包

$ mean uninstall myPackage

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

$ mean register # register to the mean network (see below)
$ cd 
$ mean publish