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：基本页面、总体页面布局、渲染引擎、静态文件、client到服务端的路由等。

user：提供用户注冊数据库模型以及登录和注冊的相关验证。

access：管理权限以及中间件，它包括了非常多授权方法依赖user包。

theme：有关CSS以及图片和背景资源。

articles：能够看成是博客以及CMS管理内容的一个起点，在client以及服务端它包括了完整的增删改查操作（GRUD）。

5、全部的包都有它们相应的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渲染





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对象变在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文件夹来了解菜单服务怎样实现的。





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