Angular Intro
AngularJS is a JavaScript Framework
AngularJS是一个Javascript框架，它可以通过<script>标签添加到HTML页面，AngularJS通过directives 扩展了HTML，通过Expressions绑定数据到前台页面显示。
Tip：把脚本加载放到<body>底部，这样会提高HTML的加载速度，不受脚本加载的限制。
AngularJS Extends HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
Angular 四个特性
1.MVC
Model：数据模型层
View：视图层，负责展示
Controller：业务逻辑和控制逻辑
好处：只是手段，目标是模块化和复用，全部借助于scope实现mvc
2.Moudules
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
3.Directives
AngularJS中重要的特性，主要是用来扩展HTML的，如ng-app，ng-controller ，都带有ng-的前缀。
4.Data Binding
{{ exp}} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
{{ exp}} 是通过 ng-model="exp" 进行同步。
ng-model 指令 绑定 HTML 元素 到应用程序数据。
Angular 环境搭建
这个很简单，可以从github下载，也可以安装nodejs，进入npm命令去install Angular。
基本的app目录是这样的
Angular 例子
1.给module添加derective
HelloAngular_Directive.html
<!doctype html> <html ng-app="MyModule"> <head> <Meta charset="utf-8"> </head> <body> <hello></hello> <div hello=""></div> </body> <script src="js/angular-1.3.0.js"></script> <script src="HelloAngular_Directive.js"></script> </html>
HelloAngular_Directive.js
<pre name="code" class="javascript">var myModule=angular.module('MyModule',[]);
myModule.directive("hello",function () {
return {
restrict: 'AECM',template: '<h2>hello,world!</h2>',replace: true
}
});
2.给module添加controller
HelloAngular_MVC.html
<!DOCTYPE html>
<html ng-app>
<head>
<title><Meta charset="utf-8"></title>
</head>
<body>
<div ng-controller="HelloAngular"><p>{{hello.text}},Angular</p></div>
</body>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script type="text/javascript" src="HelloAngular_MVC.js"></script>
</html>
HelloAngular_MVC.js
function HelloAngular($scope){
$scope.hello={
text:'Hello'
};
}
3.双向数据绑定
HelloAngular_TwoWayDataBinding.html
<!doctype html>
<html ng-app>
<head>
<Meta charset="utf-8">
</head>
<body>
<div>
<input ng-model="greeting.text"/>
<p>{{greeting.text}},AngularJS</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
</html>
