MEAN架构Angular fullstack generator生成器

MEAN架构Angular fullstack generator生成器

在刚开始接触web前端的时候，就被迫学习了MEAN架构，做的项用的是Angular fullstack generator生成器。下面就简单介绍一下关于这个生成器的使用：

1.首先需要安装Yeoman然后需要安装Angular fullstack generator；可以使用一下语句：

npm install -g generator-angualar-fullstack

2.接着创建一个自己的文件夹用于存放项目

mkdir newProject
cd newProject

一切就绪，便可以加载：

yo angular-fullstack

这样就出现了自己的client和server application，然后下载依赖。如果需要使用jade的话：

yo angular-fullstack --jade

接下来便可以看到生成器的配置界面，分成client和server配置

这里我用的是client：JavaScript，less，jade其他的默认即可。server：mongodb：N。没用使用mongodb；



等待项目的自动构建 再执行：

grunt serve

我们将看到自己的新建的项目页面；下面我们来看看项目结构：



其中主要编辑里面的client和serve即可（gruntFile.js还有package.json有兴趣可以了解一下，在这里不将阐述)

下面我们将自己重新生成自己的应用，打开server/router.js,配置路由：

app.use('/api/things', require('./api/thing'));

通过require可以找到路由的路径，打开api/thing/index.js文件可以发现router.get(‘/’, controller.index);这句话，这个便是把路由引入控制器index的方法；我们打开我的控制器thing.controller.js,找到导出为index的部分：

exports.index = function(req, res) {
res.send('Hello World');//这里写上我们的代码，这个就是向前台发送的数据。
};

在Angularjs前端，我们通过http.get的方法来获取server传递过来的参数，打开我们的client/app/main/main.controller：

$http.get('/api/things').success(function(awesomeThings) {
$scope.awesomeThings = awesomeThings;//这里获取后台传给的数据，同样，想要传递给后台数据需：http.post。
});

之后再jade页面便可以显示：

a(href='#')
| {{awesomeThings}}

MEAN很好的体现出MVC的原则让视图和控制以及模块得以分离。实话实说，想要“一揽子”为Web应用提供一个大而全的解决方案将非常困难，MEAN架构也肯定有其局限性。在前端与后端的设计模式、原则和风格中有大量的演化，如果你觉得PHP或Rails是更明智的选择，那就继续使用下去，否则的话，不妨试试MEAN，至少在当下值得一试。