新设计的一套UI模型，准备用AngularJS和NodeJS进行重构 欢迎大家访问
顶级域名访问： （限制访问速度）中国境内二级域名： （不限制访问速度 中国境内推荐使用）
感谢您为本话题评分。
共有8个回答
挺酷炫的，中间那个圈有点魔法阵一样的神秘感，但是菜单上好多功能都没有响应。看了一下源码，LZ js写得真溜。
界面效果不错～有空详细看下代码学习下，初步看了是用SeaJS模块化开发的。
十分感谢大家，其实刚写几天，还没有实现大部分功能，今天，一位SAE的好友对我这套作品提出了严厉的批评，我觉得的非常好，特地该大家发一下，十分感谢能对我提出批评的人。图片粘贴不上来，就发内容吧，批评 加载了29个js文件，12个CSS文件，2个图片 2个MP3文件 1个MP4视频.
独立域名下 网站花了45s才显示， jquery和juery ui库在13s加载完毕， png图片用了23s，在36s加载完毕，2m的MP4文件用了44.3s在 接近60s的时候才加载完毕
二级域名下网站花了将近7s才显示， jquery和juery ui库在1.5s左右加载完毕， png图片用了4s，在7.5s左右加载完毕，MP4文件用了7.14s在 接近9s的时候才加载完毕
惨不忍睹... 45s/7s，跳出率应该相当高了，想清楚吧同学。
我的回复：因为是模型啦，图片我用的都是1080p级别的，代码也没有压缩，里面的注释比代码都多，视频大到120MB，纯粹是看效果的，不过你观察的太仔细了，十分感谢关注，现在正在用AngularJS重新构架，希望能改正这些问题。我在当初设计构架时候，故意抛弃了延时加载（LazyLoding）我希望能等待几十秒让用户获得流畅的效果，这也是我当时提出的一种减轻服务器Web层压力的做法，完全加载后，只通过Ajax等功能从后台获取数据，尽量减轻Web层的负担，因为Web层真的太耗钱了，公司的钱真的赚得不容易，并且这些加载只是第一次，第二次就会非常快的。当然这些都是尝试，这个网站对我的后台服务器压力真的很大，没有实现什么功能的模型的都会造成这么大的压力确实应该反思。我希望用Angular来较少大量的页面事件操作代码，通过JS的合并来减少服务器开销，当然都在尝试。十分感谢您的关注。我希望您以后还可以对我的网站提出问题，也希望可以和您做朋友。再次对您表示感谢。有想交流的问题可以找我交流，QQ是： Email：
好厉害，JS大神哇，页面加载优化下就更好咯！
加载了29个js文件，12个CSS文件，2个图片 2个MP3文件1个MP4视频.
除去音视频文件，其它的文件加载不算多吧，现在随便一个首页几十上百个加载请求都很常见的。要不把静态的文件都丢到云存储里，那速度会快一些。
js的话应该不算是大问题吧，最终优化合并压缩到一个js就好了，css也是。
中间转转的貌似有点偏心的感觉是我的错觉么。。。
针对你所说的，我有几点建议：
一种减轻服务器Web层压力的做法，完全加载后，只通过Ajax等功能从后台获取数据，尽量减轻Web层的负担
不要做的太过啊少年！虽然这种追求极致是好的，但“第一次”体验的重要性就不用我多说了吧～
加载只是第一次，第二次就会非常快的
还有你说的缓存问题，我的解决办法是：使用grunt+requirejs将所有的第三方js全部合并为一个大大大大的js，专门用来给浏览器缓存使用（但请务必不要经常修改），而自己开发的js也合并，这样明显减少了请求次数（只加载3个js文件）。
3、最后，大神！请接受我的膝盖吧～ Orz
如果你认为此话题有广告、灌水的嫌疑，请给此话题评一颗星。平均分低的话题将不会再显示。
良好的讨论氛围由大家共同维护。分如下步骤：1& Angular.js 用于客户端开发，目前只用一个页面作为案例2& 跨网络领域联系是Angular.js和 Node.js3& Node.js用于服务器端开发4& 使用express.js创建REST服务5& Database – MongoDb6& Node.js MongoDb Module Extention (mongojs)架构图如下：
具体步骤：下载Node.js，然后安装mongojs和expressnpm install mongojsnpm install express配置：var application_root = __dirname,
express = require("express"),
path = require("path");//使用express var app = express();连接MongoDB:var databaseUrl = "sampledb"; var collections = ["things"]var db = require("mongojs").connect(databaseUrl, collections);继续express配置：app.configure(function () {
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(application_root, "public")));
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));});REST服务代码：app.get('/api', function (req, res) {
res.send('Our Sample API is up...');});好了，我们已经准备了后端代码，REST服务在：http://127.0.0.1:1212/api (GET方法)下面是REST服务 http://127.0.0.1:1212/getangularusers (Get Method)app.get('/getangularusers', function (req, res) { res.header("Access-Control-Allow-Origin", "http://localhost"); res.header("Access-Control-Allow-Methods", "GET, POST");
// The above 2 lines are required for Cross Domain Communication(Allowing the methods that come as Cross
// Domain Request db.things.find('', function(err, users) { // Query in MongoDB via Mongo JS Module if( err || !users) console.log("No users found");
res.writeHead(200, {'Content-Type': 'application/json'}); // Sending data via json
str='[';
users.forEach( function(user) {
str = str + '{ "name" : "' + user.username + '"},' +'\n';
str = str.trim();
str = str.substring(0,str.length-1);
str = str + ']';
res.end( str);
// Prepared the jSon Array here }
});});下面是REST服务POST代码：http://127.0.0.1:1212/insertangularmongouser(Post Method)app.post('/insertangularmongouser', function (req, res){
console.log("POST: ");
res.header("Access-Control-Allow-Origin", "http://localhost");
res.header("Access-Control-Allow-Methods", "GET, POST");
// The above 2 lines are required for Cross Domain Communication(Allowing the methods that come as Cross
// Domain Request
console.log(req.body);
console.log(req.body.mydata);
var jsonData = JSON.parse(req.body.mydata);
db.things.save({email: jsonData.email, password: jsonData.password, username: jsonData.username},
function(err, saved) { // Query in MongoDB via Mongo JS Module
if( err || !saved ) res.end( "User not saved");
else res.end( "User saved");
});});启动服务器：// Launch serverapp.listen(1212);在命令行启动node appmongodbangular.js至此服务器后端全部完成。下面是前端Angular.js部分，控制器代码'use strict';var myApp = angular.module('myApp', []); // Taking Angular Application in Javascript Variable// Below is the code to allow cross domain request from web server through angular.jsmyApp.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.mon['X-Requested-With'];
}]);/* Controllers */function UserListCtrl($scope, $http, $templateCache) {
var method = 'POST';
var inserturl = 'http://localhost:1212/insertangularmongouser';// URL where the Node.js server is running
$scope.codeStatus = "";
$scope.save = function() {
// Preparing the Json Data from the Angular Model to send in the Server.
var formData = {
'username' : this.username,
'password' : this.password,
'email' : this.email
}; this.username = ''; this.password = ''; this.email = ''; var jdata = 'mydata='+JSON.stringify(formData); // The data is to be string. $http({ // Accessing the Angular $http Service to send data via REST Communication to Node Server.
method: method,
url: inserturl,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
cache: $templateCache
success(function(response) {
console.log("success"); // Getting Success Response in Callback
$scope.codeStatus = response.
console.log($scope.codeStatus);
error(function(response) {
console.log("error"); // Getting Error Response in Callback
$scope.codeStatus = response || "Request failed";
console.log($scope.codeStatus);
}); $scope.list();// Calling the list function in Angular Controller to show all current data in HTML
$scope.list = function() {
var url = 'http://localhost:1212/getangularusers';// URL where the Node.js server is running
$http.get(url).success(function(data) {
$scope.users =
// Accessing the Angular $http Service to get data via REST Communication from Node Server
$scope.list();}Angular Template and HTML<html lang="en" ng-app="myApp"><body ng-controller="UserListCtrl">//用ng-repeat从REST服务取得users的数据模型Search: <input ng-model="user"><div class="span10">
<!--Body content-->
<ul class="users">
<li ng-repeat="user in users | filter:user ">
{{user.name}}
</li>
</ul></div>//用ng-submit将user数据模型提交给后端，保存到MongoDB<form name="myform" id="myform1" ng-submit="save()">
<fieldset>
<legend>New User</legend>
<div class="control-group">
<center><input type="text" placeholder="User…" ng-model="username" size=50 required/></center>
<center><input type="text" placeholder="Password…" ng-model="password" size=50 required/></center>
<center><input type="text" placeholder="Email…" ng-model="email" size=50 required/></center>
</div>
</fieldset>
<p>
<div><center><button type="submit" >Save now...</button></center></div>
</p></form>[该贴被admin于 17:08修改过]
banq老师最近很关注angular.js啊。。。
11:18 "@lostalien
"的内容banq老师最近很关注angular.js ... 是的，angular.js的前端MVC实现很优雅，可Scalable又很好，完全可替代以前后端表现层框架如Struts SpringMVC等等，后端只要领域层+薄的JSON格式REST层即可，更无需JSF那么重量。未来主流架构应该是：前端浏览器：angular.js等MVC框架后端: REST+ 总结为： MVC+REST+CQRS J2EE死了 javacript + 后端JSON服务方式胜出 ：[该贴被banq于 16:14修改过]
赞成 banq 老师的这种观点。angular.js 等 + REST+
1、充分分离的前端和后端，交互之需要借助JSON。2、后端完全看作是服务提供者。交互交给最接近用户的那一层去做，复杂的东西交于后端的云去做。
刚搜了下，像这种js的mvc，目前还有几个，比如backbone.js,knockout.js啥的，为啥选择angular.js呢？
最佳分辨率
OpenSource
Code & 2002-20Nodejs学习笔记（一）——初识Nodejs - 推酷
Nodejs学习笔记（一）——初识Nodejs
前言： 目前工作的分内之事相对较为单一，希望可以通过工作之余的时间给自己充充电，只是没有一个学伴或大神带，只能说是摸索着前进。起初准备好好研究下Spring这个框架，下载了源码，结合书籍准备一探究竟，看到了 Spring 如何加载bean，又如何转换成自己的数据格式等等，虽尚未涉及实战，倒算是对之前工作中遇到的一些困惑有所帮助。合计准备写一篇博客以示我的“大数据小世界”的博客还不至于长草太深，只是后来机缘巧合，想了解下关于爬虫一类的东西，Spring就先做搁置。
在度娘上搜索爬虫，铺天盖地的各色技术引入眼帘，而其中的 python 尤其是 scrapy 最为抢眼，凭借过去曾用过python写过实验计算程序的一面之缘，知道此脚本入门门槛不高，平易近人，遂狂找一通资料，准备进军python。一周了解下来，看了些基本语法，和matlab的一些语法较为接近。
可是后来，和一些小伙伴讨论，可以考虑最近杀出来的黑马nodejs，甚是抢眼。基本的出发点是 nodejs 语法与 javascript 一致，正好借着这个机会学习下js，也算是对于js从另一个角度好好认识下。（废话太多，简而言之， 解释两点：1.为什么博客许久不曾更新； 2.今天乃至后面要谈的是nodejs ）
本来准备写一篇，但是写完后发现就篇幅看来还是拆为两篇比较合适~~~
原本对于javascript就是一个小白，当然对于nodejs连小白都算不上。虽然之前有拜读过《javascript权威指南》以及学习过Angularjs，但是终究因为缺乏应用场景，始终与js的关系是若即若离。
Javascript的大名谁人不知，一门当初看来很不起眼的客户端编程语言，node相信各位也是有所耳闻吧，可以说是js的服务端的一个平台。关于nodejs可以看看百度上的解释：
Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用
模型而得以轻量和高效，非常适合在分布式设备上运行的数据密集型的实时应用。
另外，nodejs是 单线程 、 高并发 、 非阻塞 的平台。单线程？高并发？怎么解释？？？
我的理解，这个得益于node的 回调机制以及异步处理机制 。
有人要问，什么是回调机制（函数）；什么是同步/异步；什么是阻塞/非阻塞....
举一个看到的网上Scott老师说的例子：
：你想要出去潇洒，准备定个饭店，胡吃海喝一番，于是拿起电话打给了卡片上的沙县小吃，问到：老板，你们那现在还有位置么，我要带帮朋友去吃饭
：老板说，好，你电话别挂，我这就去看看……（同步的意思就是：顺序执行，一直到这个老板回来并说出是否有座位， 该事件才结束，也才能执行下一个事件 ）
需求场景2： 同1
：老板说：好，我这边还有个客人要结账，我一会帮你看看，然后给您回个电话，然后挂了电话。（异步就是老板知道这个订单了，但是可以过会再去看是否有位子或是立马去看是否有位子，电话也可以随便老板什么时候回，而在此间隙中，老板可以干很多事情，比如给客人结账或是安排进店客人就坐等等，不像场景1中必须只能去看座位，因为电话还没挂）
：就是老板给我的回电。
阻塞 ：就是场景1中的我，除了焦急的等待老板回来给我的消息，我什么也不能做。之后老板回来了并给出是否有座位的消息，我挂完电话，才能做其他事情。
非阻塞 ：就是场景2中，老板说，稍后回电。那这事我就不用想傻子一样在哪拿着电话干等着。我可以去做其他事，比如通知今晚要来共享大餐的朋友同学等。
以上是我的一些个人见解，如有不正以及误导之嫌，恳请指正，只求不误人子弟。
有了这些概念，再去想想单线程、高并发就不会觉得那么矛盾了，这也是node能够如果风靡受宠的原因吧。
关于nodejs的语法，无非就是js。当然在我看来还是需要时间来熟悉node这种相较java有很大的“随意性”和不可思议的特性。
我的机子node以及npm都已安装好（Windows环境下），并且配置好了环境变量。Git bash也已经装好。
这篇主要介绍在 搭建node环境过程中遇到的小问题以及搭建Eclipse开发Node环境的前提步骤
对于通过npm安装程序很慢甚至没有反应的情况：
可以通过在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org来解决，后面就可以通过输入cnpm install &你要安装的模块&来完成安装。
本来是想在本机上已经安装好的Myeclipse上搭建个node开发平台，但是可能是版本太老，很多操作不方便，就下载了最新的eclipse。
首先需要安装三个插件：
Help-&Install New Software
node.js插件 -- nodeclipse
更新地址：http://www.nodeclipse.org/updates
这个在不FQ的情况下好像反应很慢，下面的这个链接好像还蛮快的：&/nodeclipse/nodeclipse/0.6.0/
javascript编辑插件 -- VJET
更新地址：http://download.eclipse.org/vjet/updates-0.10
google V8插件(调试必备)
更新地址：/svn/update/dev/
完成以上安装后，重启eclipse，然后就可以新建node项目了
新建的RobotProject项目如下图所示
到目前为止，已经在Ecliplse中安装了必要的插件，并且可以在Eclipse中新建一个Node Project，但这还远远不够：一不能运行，二不能调试，欲知如何实现，请看下篇~~~
如果您觉得阅读本文对您有帮助，请点一下“ 推荐 ”按钮，您的 “推荐” 将是我最大的写作动力！如果您想持续关注我的文章，请扫描二维码，关注JackieZheng的微信公众号，我会将我的文章推送给您，并和您一起分享我日常阅读过的优质文章。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致