MEAN框架學習筆記

MEAN框架學習筆記

MEAN開發框架的資料很是少。基本的資料仍是來自於learn.mean.io站點上的介紹。

因而抱着一種零基礎學習的心態，在瞭解的過程當中，經過翻譯加上理解將MEAN框架一點點消化並且吸取，一步一步來。慢慢地記錄我學習MEAN的點點滴滴。

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

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

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

MEAN的模塊安裝後放在/node_modules目錄中。

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

三、本身定義的包應該放在
/package/custom
目錄中，而需要貢獻的包則放在
/package/contrib
目錄中。

四、核心包中有：
system：基本頁面、整體頁面佈局、渲染引擎、靜態文件、client到服務端的路由等。

user：提供用戶註冊數據庫模型以及登陸和註冊的相關驗證。
access：管理權限以及中間件，它包括了很是多受權方法依賴user包。

theme：有關CSS以及圖片和背景資源。

articles：可以當作是博客以及CMS管理內容的一個起點，在client以及服務端它包括了完整的增刪改查操做（GRUD）。

五、所有的包都有它們相應的client和服務端部分。client部分在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渲染


六、依賴注入（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
  };
});

七、Angular模塊和依賴
在註冊每一個包的時候。都會本身主動建立一個mean.[package_name]這種Angular模塊。
同一時候你能夠聲明你的Angular模塊需要使用的Angular依賴。比方說這樣：

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

八、物件和聚合（Assets and Aggregation）
所有的物件（包含Javascript腳本、CSS和圖片等）被放在public/assets目錄中。

Javascript腳本、CSS和圖片能被聚合到全局的聚合文件裏。默認所有Javascript腳本會包裹在匿名的函數中。除非{global:true}沒有放置在被包括的域中。

<pre name="code" class="javascript">//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'});

九、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格式信息，第二個參數是回調函數。

回調函數用來推斷信息是否存入，第二個參數是可選的。當讀取信息的時候，僅僅需要一個參數就能夠。這個參數就是回調函數。

十、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');
  });
};

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

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

當以包名稱做爲開頭的話，Angular的視圖就可以經過templateUrl來公開了。

十二、菜單系統
包可以勾住現有的菜單系統而後加入連接到MEAN集成的菜單中去。每一個連接都有指定title、template、menu、role。假設指定的menu並不存在，那麼一個新的menu將會被建立出來。經過menu angular service查詢連接的信息，可以讓menu對象變在client中變得可以訪問。

如下是介紹怎樣在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文件夾來了解菜單服務怎樣實現的。


1三、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);
  });
});

1四、覆蓋默認的佈局
經過本身定義的包，可以覆蓋默認的佈局。

如下是一個覆蓋默認系統佈局而不是使用在包內的本地佈局的樣例：

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

只是注意，package必須依賴System包來保證它在System包後面被求值，這樣可以覆蓋視圖目錄。


1五、覆蓋視圖
你可以覆蓋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渲染成爲主頁。

1六、建立本身的包

$ mean package <packageName>

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

1七、刪除包

$ mean uninstall myPackage

1八、貢獻本身的包
假設你的包已經定型並且不會出什麼問題了，那麼你可以將你的包上傳到包代碼庫中。方法是：

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