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