angularJS学习笔记二
angularJS四个特性
1.MVC
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngular">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>
function HelloAngular($scope) {
$scope.greeting = {
text: 'Hello'
};
}
输出为：Hello，Angular
ng-controller控制器绑定到HelloAngular函数，函数中定义了一个greeting对象，属性text值为'hello'
分析：
M：{{}}为模型
V：视图是能看得见的，当然是HTML咯
C：HelloAngular充当控制器
下面是demo，如果是新手，还是老老实实的把代码敲一遍比较好，毕竟俺们都是写代码的，不停地敲，不停地思考才能敲得更快，更好，bug更少！
上面是图片格式的，最下面为懒人准备了html
懒人场所
1 <!DOCTYPE html> 2 <html ng-app="myapp"> 3 4 <head> 5 <script type="text/javascript" 6 src='http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js'></script> 7 </head> 8 9 <body> 10 <h3>写在前面的话</h3> 11 <div> 12 <pre> 13 14 angularjs简介 15 16 AngularJS是为了克服HTML在构建应用上的不足而设计的，是一个用于设计动态web应用的javascript 17 结构框架（区别于类库）。能够像backbone一样提供一整套方案用于设计web应用。 18 19 HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。通常， 20 我们是通过以下技术来解决静态网页技术在构建动态应用上的不足： 21 22 1）类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何 23 时使用类库。类库有：jQuery等。 24 2）框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架 25 是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。 26 27 AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们 28 称为标识符(directives)的结构，让浏览器能够识别新的语法。例如： 29 使用双大括号{{}}语法进行数据绑定； 30 使用DOM控制结构来实现迭代或者隐藏DOM片段； 31 支持表单和表单的验证； 32 能将逻辑代码关联到相关的DOM元素上； 33 能将HTML分组成可重用的组件。 34 AngularJS是一个开源的web应用框架，由Google和社区进行维护，它可以创建单页的应用程序，一个页 35 面的应用仅仅需要HTML,CSS和JavaScript在客户端。它的目标是增强页面的模型-视图-控制（MVC）的功能，为简化开发和测试。 36 它通过双向数据绑定使你的UI（视图层）与你的JavaScript对象（层模型层）的数据自动同步。帮助你 37 更好的构建你的应用和更方便的测试，AngularJs告诉浏览器如何依赖注入和控制反转。它帮助改良了允 38 许异步回调和延迟、使客户端导航和深层链接使用哈希bang格式地址和HTML5 pushStat与服务端通信更容易。 39 40 Angular 提供了： 41 结构模型的引入（MVC,SPA等）; 42 增强HTML支持新特性; 43 避免直接DOM操作来避免很难调试不可追踪的代码; 44 包含低耦合和高可复用性; 45 应用程序内部规则测试; 46 视图模板更接近服务器端模板; 47 设计初衷: 48 将DOM操作从应用中解耦. 增强了可测试性. 49 应用测试性与开发代码同样重要. 测试的复杂程度与代码的设计结构强相关. 50 客户端与服务端解耦. 实现了并发处理机制增强了代码复用性. 51 在开发全过程中作出指引: 从UI到业务逻辑最终到测试环节. 52 53 54 55 56 angularjs关键特性 57 1）双向数据绑定: 58 数据绑定可能是AngularJS里最酷，最实用的功能。 它将节省你大量的样板代码编写。 一个典型的Web应用程序可以包含多达80％的代码基础，如遍历，操作，并听取了监听DOM。 数据绑定使得不用编写这些代码，这样你就可以专注于你的应用程序。 59 2）模板 60 在AngularJS，模板就是原生的HTML. 做了基于视图的增强. 这样做最大的好处在于拉近了开发与设计人员的工作流. 设计人员操作HTML完成设计，开发直接在HTML上作相应的功能开发。 61 3）MVC 62 AngularJS引入了软件设计的MVC模式.这对于使用者来说仁者见仁智者见智. AngularJS并不 63 是完全的MVC而是 MVVM (Model-View-ViewModel). 64 4）依赖注入 65 AngularJS 提供了依赖注入的子系统帮助开发人员降低开发复杂度，提高测试效率.依赖注入将业务代码与配置实现解耦，提高了代码的可测性. 66 有了DI,无需每次都创建指定的对象依赖关系及后面配置. 这样就能按需分配而无需自己制 67 定或是查找. 就像要说一句"Hey I need X',DI就会帮你创建并发送给你. 68 69 采用依赖注入后能体验到的好处主要包括: 70 代码更易于维护。 71 API更为简练和抽象。 72 代码更易于测试。 73 代码更加模块化、可复用性更强。 74 5）指令 75 指令可以被用来创建自定义的HTML标签，这些标签可以用作新的自定义的控件。它们也可 76 以用来"渲染"有一定行为的元素，也可以以一些有趣的方式来操作DOM属性。一个指令就是一个 77 能引入新语法的东西。把分离的组件组合成一个组件，这种创建应用的方式将使得添加、修改 78 和删除页面功能变得异常简单。指令是AngularJS的一个非常强大且独有的特性。 79 80 从更高的层次说, DOM 元素上的指令 (像是属性，元素名，注释或是 CSS ) 等给 81 AngularJS's HTML 编译器传递的数据($compile) 从而传递指定的功能到DOM元素或是子元素。 82 83 Angular 有很多这样的内置指令，像是 ngBind, ngModel, 和ngView.Y还能自定义指令，当Angular启动后HTML编译器就会自动建立DOM元素的指令映射. 84 6）测试 85 AngularJS 意识到凡是js写的代码需要加强测试. 这在 AngularJS 设计之初就有了, 于是Angular的可测试性不言而喻. 86 JS是解释性的动态语言，设计相应的测试决不可小觑. 87 AngularJS 完全基于可测的根基设计出来的. 它提供了端到端的单元测试. 88 摘自：http://www.admin10000.com/document/5121.html 89 90 91 模块定义了一个应用程序。 92 模块是应用程序中不同部分的容器。 93 模块是应用控制器的容器。 94 控制器通常属于一个模块。 95 96 问题：函数会影响到全局命名空间 97 大家应该经常性的会看到这句话，“JavaScript 中应避免使用全局函数”。因为他们很容易被 98 其他脚本文件覆盖。 99 AngularJS 模块让所有函数的作用域在改模块下，避免了该问题。 100 101 模块的定义 102 var app = angular.module("myApp", []);s 103 在模块定义中 [] 参数用于定义模块的依赖关系。 104 中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。 105 106 什么时候载入库? 107 对于 HTML 应用程序，通常建议把所有的脚本都放置在 body 元素的最底部。 108 这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。 109 在 body 元素中加载 AngularJS 库，必须放置在您的 AngularJS 脚本前面： 110 </pre> 111 </div> 112 <hr> 113 <h3>demo1 双向数据绑定</h3> Your name: 114 <input type="text" ng-model="yourname" 115 placeholder="World"> Hello {{yourname || 'World'}}! 116 <hr> 117 <h3>demo2 ng-repeat循环输出</h3> 118 <div ng-app="" ng-init="name=[11,22,33]"> 119 <p>循环对象</p> 120 <ul> 121 <li ng-repeat="i in name">{{i}}</li> 122 </ul> 123 </div> 124 <hr> 125 <h3>demo3 控制器双向数据绑定</h3> 126 <div ng-controller="funcf"> 127 姓 128 <input type="text" ng-model="firstname" /> 名 129 <input type="text" ng-model="lastname" /> 130 <br /> name:{{ firstname +" "+ lastname }} 131 </div> 132 <script> 133 var myapp = angular.module('myapp', []); 134 myapp.controller('funcf', function funcf($scope) { 135 $scope.firstname = "X"; 136 $scope.lastname = "y"; 137 }); 138 </script> 139 <hr> 140 <h3>demo4 过滤器</h3> 141 <div> 142 转换成小写 143 <input type="text" ng-model="enter">{{enter | lowercase}} 144 <br /> 145 <br /> 146 <!-- lowercase小写 uppercase大写 currency格式化数字为货币格式 147 filter从数组项中选择一个子集 orderBy根据某个表达式排列数组 --> 148 向指令添加过滤器 149 <input type="text" ng-model="test">模型test作为过滤关键字 150 <ul ng-init=" names = [{name:'b'},{name:'a'},{name:'c'}] "> 151 <li ng-repeat="i in names | filter:test | orderBy:'name' " 152 >{{ $index +" "+i.name | uppercase}}</li> 153 <!-- $index应该是内置索引 --> 154 </ul> 155 </div> 156 <hr> 157 <h3>demo5 http</h3> 158 <div ng-controller="httpDemo"> 159 <ul> 160 <li ng-repeat="i in names">{{i.Names}}</li> 161 </ul> 162 <script> 163 myapp.controller('httpDemo', function($scope, $http) { 164 var httpObj = 165 $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php"); 166 //这里当然会报错，因为这是w3cschool的例子，不是我自己的域名，受到js同源策略限制 167 httpObj.success(function(response) { 168 $scope.names = response.records; 169 console.log($scope); 170 }); 171 }); 172 </script> 173 </div> 174 <hr> 175 <h3>demo6 html DOM</h3> 176 <div ng-init="mySwitch=true"> 177 <p> 178 <button ng-disabled="mySwitch">点一下</button> 179 </p> 180 <p> 181 <input type="checkbox" ng-model="mySwitch">选择</p>{{ mySwitch }} 182 <!-- ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。 183 ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。 184 --> 185 <br /> 186 <br /> ng-show 187 <p ng-show="true">你看得见我，看不见我兄弟</p> 188 <p ng-show="false">你看不见我，看得见我弟兄</p> 189 ng-hide 190 <p ng-hide="true">你看得见我，看不见我兄弟</p> 191 <p ng-hide="false">你看不见我，看得见我弟兄</p> 192 </div> 193 <hr> 194 <h3>demo7 事件</h3> 195 <div ng-init="count = 0"> 196 <input type="button" ng-click="count = count + 1" value="计数器" /> 197 <!-- 发现不能写为count+=1 --> 198 <p> {{count}} </p> 199 </div> 200 </body> 201 202 </html>
