angular.js学习笔记.docVIP

angular.js学习笔记AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。 AngularJS的可爱之处 AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。 如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。 那如果还不清楚angular.js呢？复制一段别人话：AngularJS是一个MV*框架，它非常适合用于创建客户端的单页应用。它不是一个库，而是一个用于创建动态web页面的框架。它专注于扩展HTML并且提供了动态数据绑定，它与其他框架也能很好的一起使用（例如jQuery）。 如果你正在创建一个单页应用，那么AngularJS在适合不过了。Gmail，Google Docs，Twitter以及Facebook都在某些地方使用了AngularJS。游戏开发或者是其他重度依赖与DOM操纵或者纯粹追求速度的应用不适合使用AngularJS。 ----------------------------------------------------------------------------------------------------------------------------------------------------- 我们开始进入实战介绍。 第一我使用的webstorm（开启live code）。 第二配合chrome。 基本上就是下图这效果，不用刷新游览器，效果直接实时动态更新，webstorm是不是很酷炫呢？ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ? 好的，首先准备ok，我们引用一个小例子。（我用注释在代码中解释） !DOCTYPE html !--//这是一个错误的注释方法，只是方面阅读 angular.js的简称都是ng，所以都是ng-xxxx的，ng-app告诉angular控制器这是个angular程序。-- !--//后面可以加这样写ng-app=‘your app name’，但是现在这样写，没用js调用会出错，未定义的ng-app。-- html ng-app head title/title !--//这是一个错误的注释方法，只是方面阅读//这个是必须的，引入angularjs，现在有新版本-- ? script type=text/javascript src=js/angular.js/script /head body !--//这是一个错误的注释方法，只是方面阅读//下面开始数据双向绑定{{Nametest}}代表绑定的模型的显示的地方-- !--//还有在input中ng-model设置数据绑定。-- div input type=text ng-model=Nametest placeholder=Enter a name here h1Hello, {{ Nametest }}!/h1 /div !--//这是一个错误的注释方法，只是方面阅读//其实双花括号可以用ng-bind代替，但是可能比较习惯{{}}，但是如果angularjs脚本加载慢，或者没加载全部就被渲染了，就会直接出现在页面上{{XXXXX}} -- div input type=text ng-model=test placeholder=Enter a name here h1 ng-bind=test/h1 /div !--//在仔细看下下我下面这个例子有点小小的不同和第一个-- div input type=text ng-model=yourName.name placeholder=Ent