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
懒人场所
<!DOCTYPE html>
<html ng-app="myapp"> <head>
<script type="text/javascript"
src='http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js'></script>
</head> <body>
<h3>写在前面的话</h3>
<div>
<pre> angularjs简介 AngularJS是为了克服HTML在构建应用上的不足而设计的，是一个用于设计动态web应用的javascript
结构框架（区别于类库）。能够像backbone一样提供一整套方案用于设计web应用。 HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。通常，
我们是通过以下技术来解决静态网页技术在构建动态应用上的不足： 1）类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何
时使用类库。类库有：jQuery等。
2）框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架
是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。 AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们
称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。
AngularJS是一个开源的web应用框架，由Google和社区进行维护，它可以创建单页的应用程序，一个页
面的应用仅仅需要HTML,CSS和JavaScript在客户端。它的目标是增强页面的模型-视图-控制（MVC）的功能，为简化开发和测试。
它通过双向数据绑定使你的UI（视图层）与你的JavaScript对象（层模型层）的数据自动同步。帮助你
更好的构建你的应用和更方便的测试，AngularJs告诉浏览器如何依赖注入和控制反转。它帮助改良了允
许异步回调和延迟、使客户端导航和深层链接使用哈希bang格式地址和HTML5 pushStat与服务端通信更容易。 Angular 提供了：
结构模型的引入（MVC,SPA等）;
增强HTML支持新特性;
避免直接DOM操作来避免很难调试不可追踪的代码;
包含低耦合和高可复用性;
应用程序内部规则测试;
视图模板更接近服务器端模板;
设计初衷:
将DOM操作从应用中解耦. 增强了可测试性.
应用测试性与开发代码同样重要. 测试的复杂程度与代码的设计结构强相关.
客户端与服务端解耦. 实现了并发处理机制增强了代码复用性.
在开发全过程中作出指引: 从UI到业务逻辑最终到测试环节. angularjs关键特性
1）双向数据绑定:
数据绑定可能是AngularJS里最酷，最实用的功能。 它将节省你大量的样板代码编写。 一个典型的Web应用程序可以包含多达80％的代码基础，如遍历，操作，并听取了监听DOM。 数据绑定使得不用编写这些代码，这样你就可以专注于你的应用程序。
2）模板
在AngularJS，模板就是原生的HTML. 做了基于视图的增强. 这样做最大的好处在于拉近了开发与设计人员的工作流. 设计人员操作HTML完成设计，开发直接在HTML上作相应的功能开发。
3）MVC
AngularJS引入了软件设计的MVC模式.这对于使用者来说仁者见仁智者见智. AngularJS并不
是完全的MVC而是 MVVM (Model-View-ViewModel).
4）依赖注入
AngularJS 提供了依赖注入的子系统帮助开发人员降低开发复杂度，提高测试效率.依赖注入将业务代码与配置实现解耦，提高了代码的可测性.
有了DI,无需每次都创建指定的对象依赖关系及后面配置. 这样就能按需分配而无需自己制
定或是查找. 就像要说一句"Hey I need X',DI就会帮你创建并发送给你. 采用依赖注入后能体验到的好处主要包括:
代码更易于维护。
API更为简练和抽象。
代码更易于测试。
代码更加模块化、可复用性更强。
5）指令
指令可以被用来创建自定义的HTML标签，这些标签可以用作新的自定义的控件。它们也可
以用来"渲染"有一定行为的元素，也可以以一些有趣的方式来操作DOM属性。一个指令就是一个
能引入新语法的东西。把分离的组件组合成一个组件，这种创建应用的方式将使得添加、修改
和删除页面功能变得异常简单。指令是AngularJS的一个非常强大且独有的特性。 从更高的层次说, DOM 元素上的指令 (像是属性，元素名，注释或是 CSS ) 等给
AngularJS's HTML 编译器传递的数据($compile) 从而传递指定的功能到DOM元素或是子元素。 Angular 有很多这样的内置指令，像是 ngBind, ngModel, 和ngView.Y还能自定义指令，当Angular启动后HTML编译器就会自动建立DOM元素的指令映射.
6）测试
AngularJS 意识到凡是js写的代码需要加强测试. 这在 AngularJS 设计之初就有了, 于是Angular的可测试性不言而喻.
JS是解释性的动态语言，设计相应的测试决不可小觑.
AngularJS 完全基于可测的根基设计出来的. 它提供了端到端的单元测试.
摘自：http://www.admin10000.com/document/5121.html 模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。 问题：函数会影响到全局命名空间
大家应该经常性的会看到这句话，“JavaScript 中应避免使用全局函数”。因为他们很容易被
其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在改模块下，避免了该问题。 模块的定义
var app = angular.module("myApp", []);s
在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。 什么时候载入库?
对于 HTML 应用程序，通常建议把所有的脚本都放置在 body 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
在 body 元素中加载 AngularJS 库，必须放置在您的 AngularJS 脚本前面：
</pre>
</div>
<hr>
<h3>demo1 双向数据绑定</h3> Your name:
<input type="text" ng-model="yourname"
placeholder="World"> Hello {{yourname || 'World'}}!
<hr>
<h3>demo2 ng-repeat循环输出</h3>
<div ng-app="" ng-init="name=[11,22,33]">
<p>循环对象</p>
<ul>
<li ng-repeat="i in name">{{i}}</li>
</ul>
</div>
<hr>
<h3>demo3 控制器双向数据绑定</h3>
<div ng-controller="funcf">
姓
<input type="text" ng-model="firstname" /> 名
<input type="text" ng-model="lastname" />
<br /> name:{{ firstname +" "+ lastname }}
</div>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('funcf', function funcf($scope) {
$scope.firstname = "X";
$scope.lastname = "y";
});
</script>
<hr>
<h3>demo4 过滤器</h3>
<div>
转换成小写
<input type="text" ng-model="enter">{{enter | lowercase}}
<br />
<br />
<!-- lowercase小写 uppercase大写 currency格式化数字为货币格式
filter从数组项中选择一个子集 orderBy根据某个表达式排列数组 -->
向指令添加过滤器
<input type="text" ng-model="test">模型test作为过滤关键字
<ul ng-init=" names = [{name:'b'},{name:'a'},{name:'c'}] ">
<li ng-repeat="i in names | filter:test | orderBy:'name' "
>{{ $index +" "+i.name | uppercase}}</li>
<!-- $index应该是内置索引 -->
</ul>
</div>
<hr>
<h3>demo5 http</h3>
<div ng-controller="httpDemo">
<ul>
<li ng-repeat="i in names">{{i.Names}}</li>
</ul>
<script>
myapp.controller('httpDemo', function($scope, $http) {
var httpObj =
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php");
//这里当然会报错，因为这是w3cschool的例子，不是我自己的域名，受到js同源策略限制
httpObj.success(function(response) {
$scope.names = response.records;
console.log($scope);
});
});
</script>
</div>
<hr>
<h3>demo6 html DOM</h3>
<div ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点一下</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">选择</p>{{ mySwitch }}
<!-- ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。
-->
<br />
<br /> ng-show
<p ng-show="true">你看得见我，看不见我兄弟</p>
<p ng-show="false">你看不见我，看得见我弟兄</p>
ng-hide
<p ng-hide="true">你看得见我，看不见我兄弟</p>
<p ng-hide="false">你看不见我，看得见我弟兄</p>
</div>
<hr>
<h3>demo7 事件</h3>
<div ng-init="count = 0">
<input type="button" ng-click="count = count + 1" value="计数器" />
<!-- 发现不能写为count+=1 -->
<p> {{count}} </p>
</div>
</body> </html>
angularJS学习笔记二的更多相关文章
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS学习笔记(二)
一.AngularJS Select(选择框) 1.使用 ng-options 创建选择框 <div ng-app="myApp" ng-controller="m ...
- AngularJS 学习笔记二
AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML ...
- AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
随机推荐
- phpMyAdmin 完整路径泄露漏洞2
漏洞名称: phpMyAdmin 完整路径泄露漏洞 CNNVD编号: CNNVD-201307-651 发布时间: 2013-08-09 更新时间: 2013-08-09 危害等级: 中危 漏洞类 ...
- 转：给C++初学者的50个忠告
转:给C++初学者的50个忠告 1.把C++当成一门新的语言学习(和C没啥关系!真的.): ...
- bzoj 1927 [Sdoi2010]星际竞速（最小费用最大流）
1927: [Sdoi2010]星际竞速 Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 1576 Solved: 954[Submit][Statu ...
- SRM 506(2-1000pt)
DIV2 1000pt 题意:一个由n*m的网格组成的棋盘,有四种点,'.'表示空点,'#'表示是墙不能走,'$'表示起点(同样是空点),'1'~'9'表示该点有复活时间为t的怪兽.每次,可以从一个点 ...
- hdu 1698 线段树成段更新
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1698 #include <cstdio> #include <cmath> # ...
- 怎样把redis编译为库，挪为己用？
其实这是个伪命题.因为只要正常编译redis,那么在 /deps/hiredis/ 目录下就会生成动态库文件 libhiredis.so. 为了便于学习redis源码,编写一些测试程序,并进行单步跟踪 ...
- Linux Shell编程学习笔记
打算在学习过程中将每个写过的程序一个个的往上贴; 2015-07-03 1. 鸟叔第三版13.2.1节“利用日期进行文件的创建” 源代码 #!/bin/bashPATH=/bin:/sbin:/usr ...
- [置顶] 步步辨析JS中的对象成员
前提 首先我们应该明白创建一个JS对象的具体实例是实例化的过程,而实例化是通过new关键字实现的,这个对象是含有constructor的,一般的核心对象都会具有constructor以便创建其实例.因 ...
- Git客户端（Windows系统）的使用
本文环境: 操作系统:Windows XP SP3 Git客户端:TortoiseGit-1.8.5.0-32bit 一.安装Git客户端 全部安装均采用默认! 1. 安装支撑软件 msysgit: ...
- 全球最低功耗蓝牙单芯片（DA14580）系统架构和应用开发框架分析
DA14580是Dialog公司研制的蓝牙单芯片,号称全球功耗最低,是TI CC2541的四分之一,是运动手环等穿戴类电子产品的常用芯片.但是DA14580的开发门槛不低,适合有蓝牙开发经验的团队来开 ...