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 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}没有放置在被包含的域中。

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

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 <packageName>

它将会将包创建在/packages/custom/packageName下。

17、删除包

$ mean uninstall myPackage

18、贡献自己的包
如果你的包已经定型并且不会出什么问题了，那么你可以将你的包上传到包代码库中。方法是：

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