Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
原文地址：
项目地址：
项目来源：
最近一年学习前端方面技术，不敢说有所成绩，但是也是收获了颇多的经验，前端是个大水坑，学习路上总是遇上各种的坑，新技术的层出不穷让人眼花缭乱。出于想对前端方面的技术做一些总结 ，所以就花了一些时间边学习边增加的建立了这个项目，由我和我的同事共同维护中。今天分享出来，希望能和各路高手共同学习交流，更希望可以得到诸如看官您这样的神人来指导一下。
项目介绍：
NJBlog后台采用Nodejs+express来提供Restful API.
数据库采用 Mongodb，通过Mongoose驱动。
NJBlog前台采用AngularJs进行开发。
NJBlog目前所有前端JS代码全部采用模块化编写，使用Requirejs驱动（将来可能考虑采用国产Seajs哦~）。
NJBlog使用mocha+jasmine来编写js单元测试。
前端UI使用了bootstrap。
NJBlog使用强大的grunt对项目进行构建工作。
NJBlog全部代码托管在GitHub上，使用牛逼的travis-ci进行持续集成（可用来跑单元测试）。
项目的demo由appfog和mongohq提供动力。
获得并运行项目：
首先确保您系统中安装了Mongodb和Nodejs，一起准备完善之后。按照如下操作。
1，clone代码
2，安装依赖
npm install
3，启动程序
node app.js
最后,NJBlog仅为一个前端方向的学习总结性项目，NJBlog仍在进行不断地更改完善，NJBlog不是最好的，但是可能有您所需要的，欢迎各路高手为NJBlog添砖加瓦。
我有个网站：，也想使用angularjs框架，看了别人写的程序，发现angularjs好像也能在后台使用，请问angularjs能在后台使用吗？
谢谢分享！你的前端是不是可以理解成一个Node静态文件服务器？
楼主的还是初级的吧，注册的密码验证的没有做，还要完善啊
我有个问题很好奇，为什么大多数的nodejs都搭配Mongodb而不是mysql呢。难道大家对于nosql都这么擅长？就我看来，如果单单是一个博客的话，完全用不到nosql的特性吧，现存的关系型数据库完全可以满足大家的要求啊？
谢谢，楼主分享，惭愧现在还在学习两年前的帖子
有个问题，运行到这一步时会报错
D:\NJBlog&node app.js
{ [Error: Cannot find module '…/build/Relea
js-bson: Failed to load c++ bson extension,
{ [Error: Cannot find module '…/build/Relea
js-bson: Failed to load c++ bson extension,
{ [Error: Cannot find module '…/build/Relea
js-bson: Failed to load c++ bson extension,
{ [Error: Cannot find module '…/build/Relea
js-bson: Failed to load c++ bson extension,
Express server listening on port 3000
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的更好的工作机会
在100offer，提交一份个人资料，一周内即会有5-10家Top互联网公司主动向你发出邀请。100offer确保你的隐私万无一失，同时Consultant将为你全程提供专业服务。
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
web在线直播课
潭州教育是中国较早的在线教育平台,教学内容涵盖网络营销,java,javascript,jquery,android,ios,mysql,围棋,刺绣,养殖,农业,手艺,网页设计,平面设计,影视后期,CAD建筑机械,网络营销,商战智慧,办公软件,三维设计,工业设计,淘宝摄影,英语,音乐,大学代理,Photoshop教程,
Max教程,Maya教程,CAD教程,会声会影教程,AI教程,淘宝开店,摄影教程,免费教程,素材下载等众多在线学习精品课程。经过10年的发展,潭州教育已经发展为中国规模较大的在线教育平台。
JavaScript 代码片段
精心挑选的有用的 JavaScript 代码片段，你可以在30秒或更短的时间内理解。
Parcel 中文文档
快速，零配置的 Web 应用程序打包器
您的位置： » 分类:
» 文章: webpack 2 入门
您可能感兴趣的文章
近期最热文章
- 2,792 - 2,760
关注WEB前端开发公众号&nbsp>&nbsp
&nbsp>&nbsp
android教程 &nbsp>&nbsp
Angular2 Material Design开发环境搭建
摘要：Angular2和Angular1有什么区别?就是Java和Javascript,雷锋和雷锋塔的区别。刚会用Angular1做些小项目,发现Angular2来了,据说性能上提升还是蛮多,所以还是从0开始吧。Angular2虽然还是支持用es5代码开发,但连官方教程都已经用TypeScript,对于之前没有接触过的人来说,学习还是有些成本的。作为一个新手,搭建环境还是折腾了很久,所以记录下来方便其他新手。流程:使用angular-cli创建项目集成AngularMaterial
Angular2和Angular1有什么区别?就是Java和Javascript,雷锋和雷锋塔的区别。刚会用Angular1做些小项目,发现Angular2来了,据说性能上提升还是蛮多,所以还是从0开始吧。Angular2虽然还是支持用es5代码开发,但连官方教程都已经用TypeScript,对于之前没有接触过的人来说,学习还是有些成本的。
作为一个新手,搭建环境还是折腾了很久,所以记录下来方便其他新手。 流程: 使用 angular-cli 创建项目 集成 Angular Material
angular-cli和Angular Material目前都还在beta阶段,毕竟Angular2正式发布也没有很久,用于生产请自己斟酌。 创建Angular2项目 安装angular-cli npm install -g angular-cli 在适当的位置创建项目 ng new angular2Democd angular2Demong serve
创建过程会自动使用npm下载依赖,ng serve即启动内置的服务器,默认端口4200。使用浏览器打开 http://localhost:4200,可以看到项目已经启起来了。
此时打开chrome的network,可以发现有个vendor.bundle.js特别大,有2M多,图上4M多是因为我已经加了Material库。这是webpack把所有依赖的库都打包在一起了,而且没有任何压缩。
显然这么大的文件放到生产环境中是不合适的。这是因为默认情况下,启动的是开发模式。
生成生产环境代码: ng build --prod --env=prod
执行后,会在项目根目录下生成dist目录,所有优化后的代码
以生产模式启动服务器 ng serve --prod
再看network,发现所有资源自动打上了版本号vendor.xxx.bundle.js也被压到了200多k。 集成Material 安装
Material是以组件的形式开发的,所以安装也使用npm npm install --save @angular/material
2.修改app.module.ts
打开src/app/app.module.ts,引入material模块 import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { HttpModule } from '@angular/http';import { AppComponent } from './app.component';import { MaterialModule } from '@angular/material';@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, MaterialModule.forRoot() ], providers: [], bootstrap: [AppComponent]})export class AppModule { } 引入css样式
在src目录下新建material-design.scss: @import '
/material/core/theming/all-theme';// NOTE: Theming is currently experimental and not yet publically
md-core();$primary: md-palette($md-deep-purple);$accent: md-palette($md-amber, A200, A100, A400);$theme: md-light-theme($primary, $accent);@include angular-material-theme($theme);.m2app-dark { $dark-primary: md-palette($md-pink, 700, 500, 900); $dark-accent: md-palette($md-blue-grey, A200, A100, A400); $dark-warn: md-palette($md-deep-orange); $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn); @include angular-material-theme($dark-theme);}
打开根目录下的angular-cli.json,styles配置增加刚刚的文件 &apps&: [ { &root&: &src&, &outDir&: &dist&, &assets&: [ &assets&, &favicon.ico& ], &index&: &index.html&, &main&: &main.ts&, &test&: &test.ts&, &tsconfig&: &tsconfig.json&, &prefix&: &app&, &mobile&: false, &styles&: [ &styles.css&, &material-design.scss& ], &scripts&: [], &environments&: { &source&: &environments/environment.ts&, &dev&: &environments/environment.ts&, &prod&: &environments/environment.prod.ts& } } ], 配置MaterialDesign字体
index.html增加: &link href=&//fonts.lug.ustc.edu.cn/icon?family=Material+Icons& rel=&stylesheet&&
使用了中科大的google font镜像 如果需要用到md-slider(可拖动的进度条)和md-slide-toggle(带滑动动画的开关),还需要安装HammerJS,否则到此环境搭建已完成。
npm install –save hammerjs
npm install –save-dev @types/hammerjs
修改src/app/app,module.ts,引入hammerjs import 'hammerjs';
修改src/tsconfig.json,配置types增加hammerjs { &compilerOptions&: { &baseUrl&: &&, &declaration&: false, &emitDecoratorMetadata&: true, &experimentalDecorators&: true, &lib&: [&es6&, &dom&], &mapRoot&: &./&, &module&: &es6&, &moduleResolution&: &node&, &outDir&: &../dist/out-tsc&, &sourceMap&: true, &target&: &es5&, &typeRoots&: [ &../node_modules/@types& ], &types&: [ &hammerjs& ] }}
所有配置到此结束,我们写一段简单的代码测试一下。
编辑src/app/app.component.html: &md-progress-spinner mode=&indeterminate& &&/md-progress-spinner&
启动服务器,如果所有配置没有错,页面上应该显示旋转的进度圈。
& 2016, 冰冻鱼. 请尊重作者劳动成果,复制转载保留本站链接!应用开发笔记
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
为您提供0门槛上云实践机会
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
Angular2 Material Design开发环境搭建相关信息，包括
的信息，所有Angular2 Material Design开发环境搭建相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
服务与支持
账号与支持
关注阿里云
International1.在项目中想使用第三方的库（比如jquery等）
场景说明，项目需要使用juqery的一个标签云插件
想要使用这个插件需要引入jquery以及这个插件的一个js文件
解决流程：
1.配置package.json添加新的依赖，然后进行update，下载新的库
另外一个插件的js文件在npm中找不到，直接将下载好的js文件放到assets文件中
2.配置angular-cli.json文件
另外需要注意的是，在需要使用jquery的组件中，需要声明$变量，如果你使用jquery那么声明jquery变量（declare var jquery:），如果不声明的话会报错：
2.部署时遇到的问题
在项目中我需要用到angular material，我按照material的文档要求
在index.html中引入indigo-pink.css
可是当部署到服务器时会出现找不到indigo-pink.css的错误
ng build完之后你会发现dist文件夹里面只有这些文件
当你把build好的文件部署到服务器时，自然就找不到在node_modules中的indigo-pink.css文件了
可是，你会发现build好的dist文件夹中有一个assets文件夹，所以
解决方案：
将indigo-pink.css放到assets中
随后修改index.html:
问题解决！
若博客中有错误的地方请指正，谢谢！}