AngularJS 学习教程
AngularJS学习教程
简介
AngularJS 是Google的一个 JavaScript 框架，旨在简化前端应用程序的开发。
AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中
参考教程：
http://www.runoob.com/angularjs/angularjs-intro.html
引入方式：
<script src="http://{cdn.static}/libs/1.5.8/angular.min.js"></script>
Demo运行地址：
http://www.runoob.com/try/try.php?filename=try_ng_intro
游览器兼容性：
AngularJS 1.3以后抛弃了对IE8的支持。
AngularJS 1.2将继续支持IE8
如果出现兼容性问题，请找度娘，G哥解决吧！
特性：
1) 双向的数据绑定
2) HTML模板
3) MVVM（Moodel-View-ViewModel）
4) 依赖注入
5) Directives（指令）
6) 内置测试用例
接下来针对AngularJS 的特性一一做介绍，详细的标签使用大家可以参考教程自己深度挖掘。
双向数据绑定
数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。
你可以声明绑定的模型到 HTML 元素。当模型发生变化时，视图会自动更新，反之亦然。这可以减少大量的传统样板代码，保持模型和视图同步。
Demo1：
Input输入框和<h1>元素的双向绑定：
Input输入框数据的变化会被自动的更新到<h1>元素中，相对于jquery而言，避免联动代码的开发，让页面变的更清洁。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
Demo2：
checkbox和按钮是否可以点击双向绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div>
</body>
</html>
HTML模板
AngularJS 使用 HTML 模板，这使事情变得简单，并允许设计人员和开发人员同时工作。
最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。
Demo3：
将标题属性绑定到<h1>标签中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"菜鸟教程1",
"菜鸟教程2",
"菜鸟教程3",
"菜鸟教程4",
]
});
</script>
</body>
</html>
Demo4：
循环图片数组并且加入img模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function AlbumCtrl($scope) {
$scope.images = [
{"thumbnail":"img/image_01.jpg", "description":"Image 01 description"},
{"thumbnail":"img/image_02.jpg", "description":"Image 02 description"},
{"thumbnail":"img/image_03.jpg", "description":"Image 03 description"},
{"thumbnail":"img/image_04.jpg", "description":"Image 04 description"},
{"thumbnail":"img/image_05.jpg", "description":"Image 05 description"},
]
});
</script>
</body>
</html>
MVVM（Moodel-View-ViewModel）
MVVM模式是Model-View-ViewMode（模型-视图-视图模型）模式的简称，其最早出现在微软的WPF和Silverlight框架中。MVVM模式利用框架内置的双向绑定技术对MVP（Model-View-Presenter）模式的变型，引入了专门的ViewModel（视图模型）来实现View和Model的粘合，让View和Model的进一步分离和解耦。
双向绑定确实非常使用，通过封装双向绑定中间加了一个概念层ViewMode。
个人感觉跟jquery的mvc基本类似，只不过jquery需要额外的大量js开发。
依赖注入
依赖注入（Dependency Injection，即DI）
AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。
得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：
function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}
Demo5：
循环图片数组并且加入img模板：
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 依赖注入</title>
</head>
<body>
<h2>AngularJS 依赖注入</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>输入一个数字: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>结果: {{result}}</p>
</div>
<script src="../angular.min.js"></script>
<script>
<span style="background-color: rgb(255, 255, 0);">// 定义一个模块</span>
var mainApp = angular.module("mainApp", []);
<span style="background-color: rgb(255, 255, 0);">// 使用 value给defaultInput赋值</span>
mainApp.value("defaultInput", 5);
<span style="background-color: rgb(255, 255, 0);">// 创建MathService的factory和具体的方法 </span>
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
<span style="background-color: rgb(255, 255, 0);">// 封装一个CalcService暴露调用</span>
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
<span style="background-color: rgb(255, 255, 0);">// 将CalcService和参数传递到控制器</span>
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>
Directives（指令）
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
除了内置的指令以外，
还可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。
内置指令
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-repeat 指令会重复一个 HTML 元素
Demo6：
<span style="background-color: rgb(255, 255, 51);"><!-- 指定一个AngularJS程序，并初始化 firstName 为 'John' --></span>
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<span style="background-color: rgb(255, 255, 0);"><!-- 将<input/>的输入值绑定到firstName变量 --> </span>
<p>姓名：<input type="text" ng-model="firstName"></p>
<span style="background-color: rgb(255, 255, 0);"><!-- 输出firstName变量 --></span>
<p>你输入的为： {{ firstName }}</p>
</div>
自定义指令
其实就是自定义标签
Demo7：
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Directives（自定义指令）</title>
</head>
<body>
<h2>AngularJS Directives（自定义指令）</h2>
<div ng-app="myApp">
<span style="background-color: rgb(255, 255, 0);"><!-- 自定义标签使用 --> </span>
<runoob-directive></runoob-directive>
</div>
<script src="../angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
<span style="background-color: rgb(255, 255, 0);">//使用directive声明标签注意格式遇到大写字母会加【-】 </span>
app.directive("runoobDirective", function() {
return {
template : "<h3>h3大小的自定义指令!</h3>"
};
});
</script>
</body>
</html>
内置测试用例
暂时使用不到！当AngularJS的代码量达到一定程度才会用到。
需要使用karma和jasmine来进行ng模块的单元测试.
什么是Karma？
karma是一个单元测试的运行控制框架,提供以不同环境来运行单元测试,比如chrome,firfox,phantomjs等,测试框架支持jasmine,mocha,qunit,是一个以nodejs为环境的npm模块.
什么是jasmine？
jasmine是一个行为驱动开发的测试框架,不依赖任何js框架以及dom,是一个非常干净以及友好API的测试库.
参考教程：
http://www.jb51.net/article/58230.htm