选择最适合项目需求的JavaScript框架，可以提高你发布有竞争力的web app的能力。最后，你对基于JavaScript的app或网站找到了一条奇妙的思路。选择正确的框架可能对你项目的成功有着相当大的影响。它可以影响你按时完成项目并在将来维护代码的能力。JavaScript框架，如Angular.js，Ember.js或React.js，给你的代码带来结构，并保持其有序化，从而使您你的app更灵活，更具可扩展性，并更容易开发。Javascript场景的易变性Web开发的变...
数据绑定通过把一个文本输入框绑定到person.name属性上，就能把我们的应用变得更有趣一点。这一步建立起了文本输入框跟页面的双向绑定。在这个语境里“双向”意味着如果view改变了属性值，model就会“看到”这个改变，而如果model改变了属性值，view也同样会“看到”这个改变。Angular.js 为你自动搭建好了这个机制。如果你好奇这具体是怎么实现的，请看我们之后推出的一篇文章，其中深入讨论了digest_loop 的运作。要建立这个绑定...
AngularJS 简介AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架，既适合做普通 WEB 应用也可以做 SPA（单页面应用，所有的用户操作都在一个页面中完成）。与同为 MVC 框架的 Dojo 的定位不同，AngularJS 在功能上更加轻量，而相比于 jQuery，AngularJS 又帮您省去了许多机械的绑定工作。在一些对开发速度要求高，功能模块不需要太丰富的非企业级 WEB 应用上，AngularJS 是一个非常好的选择。AngularJS 最为复杂同时也是最...
因为工作中实际开发需要，才开始接触angular框架。从当初的比葫芦画瓢，被各种问题、概念折磨摧残，到现在有一定的了解认识，觉得有必要将自己的认识进行简单的总结。不到位的地方还望多多包涵。1.双向数据绑定目前业内盛行各种MV**框架，相关的框架不断涌现，而angular就是其中的一种(MVVM)。MV**框架其实最核心的问题就是将view层和model分离开来，降低代码的耦合性，做到数据和表现的分离，MVC、MVP、MVVM均有相同的目标，而他们...
指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令，以及介绍如何在实际项目中使用。在这篇文章的最后（第二部分），我会指导你如何使用Angular指令来创建一个简单的记事本应用。 概述 一个指令用来引入新的HTML语法。指令是DOM元素上的标记，使元素拥有特定的行为。举例来说，静态的HTML不知道如何来创建和展现一...
数据绑定 通过把一个文本输入框绑定到person.name属性上，就能把我们的应用变得更有趣一点。这一步建立起了文本输入框跟页面的双向绑定。在这个语境里“双向”意味着如果view改变了属性值，model就会“看到”这个改变，而如果model改变了属性值，view也同样会“看到”这个改变。Angular.js 为你自动搭建好了这个机制。如果你好奇这具体是怎么实现的，请看我们之后推出的一篇文章，其中深入讨论了digest_loop 的运作。 要建立这个绑...
“指令属性”就是绑定在DOM元素上的函数，它可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等等等。当浏览器启动、开始解析HTML（像平时一样）时，DOM元素上的指令属性就会跟其他属性一样被解析。当一个Angular.js应用启动，Angular编译器就会遍历DOM树（从有ng-app指令属性的那个DOM元素开始，如我们在本系列第一篇里所提过的），解析HTML，寻找这些指令属性函数。当在一个DOM元素上找到一个或多个这样的指令属...
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架，既适合做普通 WEB 应用也可以做 SPA（单页面应用，所有的用户操作都在一个页面中完成）。与同为 MVC 框架的 Dojo 的定位不同，AngularJS 在功能上更加轻量，而相比于 jQuery，AngularJS 又帮您省去了许多机械的绑定工作。在一些对开发速度要求高，功能模块不需要太丰富的非企业级 WEB 应用上，AngularJS 是一个非常好的选择。AngularJS 最为复杂同时也是...
1. 简介 无论你正在编写一个旧的应用程序还是在一个大型应用中采用AngularJS，性能是一个重要的方面。了解是什么原因导致AngularJS应用程序慢下来非常重要，要知道，在开发过程中做出权衡是很重要的。本文将介绍一些AngularJS比较常见的性能问题，以及优化的建议。 2. 性能测试工具 本文采用jsPerf http://jsperf.com/ 性能测试的基准。 3. 软件性能 评价软件性能有两个基本的因素： 首先是算法的时间复杂度。一个简单的例子就是线...
我们知道，AngularJS并没有自带立等可用的数据建模方案。而是以相当抽象的方式，让我们在controller中使用JSON数据作为模型。但是随着时间的推移和项目的成长，我意识到这种建模的方式不再能满足我们项目的需求。在这篇文章中我会介绍在我的AngularJS应用中处理数据建模的方式。 为Controller定义模型 让我们从一个简单的例子开始。我想要显示一个书本(book)的页面。下面是控制器(Controller)： BookControllerapp.controller('Boo...
首先设定一段Angularjs代码的ng-class：比较容易理解的Angularjs ng-class设置样式代码，那我们使用React怎么去实现它呢？ 首先在state设置一个变量比如： isShowLoginMenu，在不同场景改变它的值，然后在绑定在class样式上面 or 使用Angularjs我们可以这样做：登录了 你好，{userName} 未登录 那我们使用React要怎么去实现这样的场景呢？React.createClass({ getInitialState: function() { return { isLogin: true, userName...
如上图所示，我们需要实现如下这些验证功能： 控件都是必输控件 都需要控制最大长度 第一次打开页面，控件不能显示为错误状态 输入内容再清空后，必输控件需要显示为错误状态 只有所有输入合法后，发布按钮才能变为可用状态 通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码： HTML。DemoJS代码（真的只有一行哟） ContractCreateController.jsvar ftitAppModule = angu...
本文通过实现两个简单的业务需求，探讨AngularJS和传统的JavaScript控制DOM实现方式的差别，并尝试理解#31;MVW此类框架在流行的Web前端开发中的编程思想。 这个需求很常见，比如，一个两级菜单，在第一级别菜单项点击时候，对应的子菜单项目应该显示或隐藏。 jQuery的实现：代码如下:Item 1Item child 1// javascript $(li.parent_item).click(function(){$(this).children(ul.child).toggle(); })AngularJS的实现：代码如下:Item ...
目的：把AngularUI的模板应用到现有项目上 步骤如下： 按功能表修改demo界面学习angularUI如何加载全部页面，为了设置自定义加载模板，在demo/demo.js中找到这一段代码如下: //当#为/,/scroll等等，请求index.html中 + home.html的页面 app.config(function($routeProvider) {$routeProvider.when(/, {templateUrl: home.html, reloadOnSearch: false});$routeProvider.when(/scroll, {templateUrl: scroll.ht...
angularUI下载地址：https://github.com/Clouda-team/BlendUI 下载解压后，demo在根目录 现在测试官网demo的使用 用浏览器打开mobile-angular-ui-master/demo/index.html,发现没加载样式或者js。然后，审查元素后，发现加载的路径不对，于是进行了以下修改 第5行： 去掉所有/网站根目录路径，改为相对路径 demo.js和demo.css在demo目录下， 第30,34行： 修改后的index.html代码如下:Mobile Angular UI Demong-app="MobileAngularUi...