angularjs: draggable js

var startX = 0, startY = 0, x = 0, y = 0, minDragRang = 50; var targetContainer = angular.element(document.getElementsByClassName('target-container-class')); var targetHeader = angular.element(document.getElementsByClassName('target-header-class'));…

基于 Angularjs&Node.js 云编辑器架构设计及开发实践

基于 Angularjs&Node.js 云编辑器架构设计及开发实践一.产品背景二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设计三.单元测试四.持续集成及自动部署五.打包六.总结一.产品背景产品是一个内部项目,主要是基于语义网本体的云端编辑器,用于构建语义知识库.抛开语义网本体概念不谈 ,简单说就是一个简易的visual studio 云端编辑器.而图形显示则是在百度脑图的基础上改进的,增加了自己的形状和颜色,以及其他…

AngularJS + Node.js + MongoDB开发

AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero) 一.闲扯有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包括用户角色.发表微博.共享位置等等.这次也是有点私心的,为了锻炼最近看的angularjs,于是果断选择Node.js + MongoDB + angular.js的方案.当然,开发Node.js的体会越来越深刻.记得,去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能,这样才能更…

AngularJS, Ember.js, Backbone这类新框架与 jQuery的重要区别在哪里？

jQuery主要是用来操作DOM的,如果单单说jQuery的话就是这样一个功能,它的插件也比较多,大家也都各自专注一个功能,可以说jQuery体系是跟着前端页面从静态到动态崛起的一个产物,他的作用就是消除各浏览器的差异,简化和丰富DOM的API,简单易用. 而AngularJS, Ember.js, Backbone则是比较新的产物,他们的产生不是为了再页面上实现各种特效,而是为了构建更重量级的webapp,这种app通常只有一个页面,通常拥有丰富的数据和交互,业务逻辑耦合深,跟传统的web页面…

AngularJS+Node.js+socket.io 开发在线聊天室

所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍,对于基本的使用依然有很多说不清道不明的疑惑,于是决定通过做一个在线聊天室帮助理解.DEMO可以戳→chat room,代码可以戳→ChatRoom-AngularJS. 清晰图可以戳 http://sheilasun.sinaapp.com/public/images/chatroom.gif 功…

AngularJS Backbone.js Ember.js 对比

看到一篇关于AngularJS Backbone Ember.js的对比,建议看一看说说个人的观点(本人学艺不精,只是个人的观点,不保证观点完全正确,请轻拍): backbone.js 短小精悍,非常的灵活,其实拿它跟另外两者比某种程度上不太恰当,另外两者提供的是非常完整全面的框架,Backbone他所提供的正像是他的名字一样backbone,适用于较小非企业级的应用 Ember.js (我使用的是早期1.4版本,无法确定新版本是否有改进,所以以下评论只是针对老版本)在之前的一个SPA中使用过…

结构-行为-样式-angularJs ngAnimate(Js实现)

声明页面 Js 注意事项官方链接一.声明注意animate的版本要与Angular的一致. <script src="jquery.1.9.1.min.js"></script> <script src="angular.js"></script> <script src="angular-animate.js"></script> 二.页面 <body ng-…

AngularJS 授权 + Node.js REST api

作者好屌啊,我不懂的他全都懂. Authentication with AngularJS and a Node.js REST api 几个月前,我开始觉得 AngularJS 好像好牛逼的样子,于是我决定开始干它,并且录下来给你们看.BlogJS 就是第一发. Blogjs 是个非常简单的 blog, 用 AngularJS,Node.js 和 MongoDB 写的. 你可以看看在线例子,点这里看前端,点这里看后台.用户名密码都是 demo . 然后你还可以从 github 上拿源码.…

AngularJS 、Backbone.js 和 Ember.js 的比较

1 介绍我们准备在这篇文章中比较三款流行于Web的“模型-视图-*”框架:AngularJS.Backbone和Ember.为你的项目选择正确的框架能够对你及时交付项目的能力和在以后维护你自己代码的能力产生巨大影响.你也许想基于一款可靠的.稳定的和成熟的框架来构建项目,但又不想为此受到约束.Web发展迅速——新技术产生,旧的那套方法很快跟不上潮流.如此形势之下,我们准备仔细深入的比较这三个框架. 2 框架概览今天我们提到的所有框架有许多共同点:都是开源的,遵从 MIT 协议,并且都尝试通过…

angularjs和ajax的结合使用（二）

今天我们来继续丰富上次的例子.我们来搞些稍微复杂点的应用. 首先我们来加一个全选的功能. 上一篇的例子里我们看到分页时载入的是我们通过linq 查询自定义列然后构建的匿名类 .使用这种EF框架+linq 查询的方式我认为不方便的一点就是要不你就只能select 一个固定对应表的数据模型类名 ,但是序列化成json的时候对外键类引用有天然的bug ,就是框架自动序列化成json格式时会出循环引用错误 .序列化类型为XX的对象时检测到循环引用.没办法我们能做的就是屏蔽某些属性 .方式…

7_nodejs angularjs

webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b跳转方法实现/定义处包裹/去掉外围代码unwrap... 主题appearance 字体editor-colors&fonts-font 自动换行settings-editor-appearance-show line 显示行号..........................show line…

AngularJS笔记---路由视图

最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我们会有一个对应的controller和views,还有一个routerconfig. 其实在AngularJS也有类似的东西.下面我会按照Asp.net的MVC框架搭建一个AngularJs的小Demo出来. 一.创建文件目录: A. Controller文件夹放ng-controller的代码 B…

JS组件系列——Bootstrap Table 表格行拖拽

前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(…

如何在ASP.NET MVC和EF中使用AngularJS

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) AngularJS作为一个越来越流行的前端框架,在使用ASP.NET MVC和实体框架开发Web应用的时候,恰当的使用它可以让你的前端界面更易开发.今天推荐的文章就是介绍如何把AngularJS结合到ASP.NET MVC开发当中. 虽然之前开发的一套SaaS系统也是以ASP.NET MVC.实体框架为基础,前端辅以AngularJS.不过一直无暇很好总结一下这方面的经验分享给大家,刚好今天推荐的文…

angularjs 笔记(1) -- 引导

首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"><script> JS的位置可以在head标签中,也可以放到</body>前面,这个JS阻塞加载有关. 2,引导,在应用的根标签中添加ng-app,如果只是调用系统的指令和一些简单操作(不需要自己编写指令控制器等等的),只需要这样<html ng-app>:如果有自己编写的…

AngularJS介绍

AngularJS介绍–AngularJS的前世今生 AngularJS是什么在Web开发领域,我们一般使用HTML作为前端页面元素的声明式语言,使用CSS技术作为展示样式的描述语言,JavaScript作为业务处理交互的命令式语言.当我们构建非常复杂的Web应用时,纯粹而有限的HTML就显得非常不足,Javascript本身也会随着项目代码量的膨胀而难以维护和管理,研发工期和成本也会随之难以控制.这时候,我们一般使用一些类库(例如jQuery.Dojo等)或框架(例如Backbone.Emb…

AngularJs + Web API 页面开发（一）

AngularJS这个JS框架是个神马东东我也不太清楚,我也是初学者~~ AngularJS适用于single page App,单页面程序都是局部刷新的,这一点和Ajax有第一的区别,因为使用Ajax的一个致命点是会使浏览器的后退按钮失效. 在AngularJs中有几个核心的知识点:scope(块),controller(控制器),service(服务),directive(指令).Module(模块). 请看下面我画的草图. 接下来我将结合一个简单的例子给大家讲讲如何使用Angula…

angularjs笔记(一)

简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.angularjs指令指令就是扩展的HTML属性,带有前缀ng-. ng-app指令初始化一个AngularJS应用程序,也就是指定AngularJS作用范围,如<html ng-app="">作用于整个页面,<div ng-app="">作用于…

[Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

写在前面前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片段.完整的代码将在文章下面提供链接. demo 数据来源通过webapi的方式提供.获取对产品的查询,分页,增加商品,删除,修改等操作. webapi public class ProductController : ApiController { private List<Product> ls…

【AngularJS】—— 3 我的第一个AngularJS小程序

通过前面两篇的学习,基本上对AngularJS的使用有了一定的了解. 本篇将会自己手动写一个小程序,巩固下理解. 首先要注意的是,引用AngularJS的资源文件angular.min.js文件. 由于这个框架是Google的工作人员开发的,因此国内访问的时候,会被墙导致无法下载资源文件. 因此,可以使用百度开源的静态链接: http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js 代替原来的国外的资源文件链接:http://code…

AngularJS datepicker 和 datatimepicker

本文内容项目结构 AngularJS datepicker AngularJS+jQueryUI datetimepicker 本文介绍 AngualrJS datetimepicker 控件.说明三种控件:Angualr 官网提供的 datepicker,jQuery datetimepicker 以及 Angular+jQueryUI 的 datetimepicker.搞了好几天,总算跟项目集成在一起. 其实,Angular 官方提供了一套控件 Angular-ui-bootstrap ,…

easyloader.js源代码分析

http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI 组件库,使用它可以快速开发企业级的业务系统.如果你正准备开发系统后台,可以选择jquery easyui,也可以选择Ext JS.我个人的看法是,如果开发团队就两三个人,开发工期很短,就一两个月.那么选择jquery easyui就对了,jquery easyui源代码量不多,便于阅读和自行修改.…

Angularjs相关理论

1.AngularJS的工作流程: (1)浏览器载入HTML,然后把它解析成DOM (2)浏览器载入angularjs脚本 (3)AngularJS等到DOMContentLoaded事件触发 (4)AngularJS寻找ng-app指令,这个指令指示了应用的边界 (5)使用ng-app中指定的模块来配置注入器($injector) (6)注入器($injector)是用来创建“编译服务(compile service)”和“根作用域($rootScope)”的. (7)编译服务是用来编译DOM…