嗯额，刚刚上手了AngularJs,感觉功能很强大，做一个简单的入门笔记吧，新鲜出炉的,嘿嘿。
首先我们要了解下什么是AngularJs:
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库；
它可通过script标签添加到HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。简单的说它就是一个前端框架：主要特点有以下：
MVVM、模块化、自动化双向数据绑定、依赖注入、内部指令、语义化标签 ；
我们通过几个小的demo来演示它的使用：
demo1：双向数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJs的事件绑定</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<!--ng-app指定angular的作用域-->
<body ng-app>
<div>
<!--模型的作用-->
<input type="text" name="name" ng-model="name" />
</div>
<div>
HELLO,{{name}}<!--等价于ng-bind用于视图显示-->
</div>
</body>
</html>
首先简单介绍几个标签的作用：
ng-app 在任何元素上使用，代表 angular 应用作用域
ng-controller 指定控制器
ng-model 指定模型
ng-bind 或者 {{属性名}} 进行属性取值 用于显示
页面效果：
当我们输入值时：
这里也就是双向数据绑定的效果：更新模型，视图会自动更新， 更新视图，模型会自动更新
demo2:基于模块化实现 MVC:
ps:在 AngularJS 的 1.3 Beta15 版本之前，可以定义全局控制器 <body ng-app ng-controller=”控制器方法名”> 在 AngularJS 的 1.3 Beta15 版本后，使用控制器，必须要指定模块 <body ng-app=”模块名” ng-controller=”控制器方法名”>
<body>
<!-- ng-app="myapp" 定义了一个模块 -->
<div ng-app="myapp" ng-controller="myctrl">
<div>
<!-- ng-model模型作用 -->
<input type="text" name="name" ng-model="name" />
</div>
<div>
<!-- {{}} 等价于 ng-bind 用于数据显示 -->
Hello, {{name}}
</div>
</div>
<script type="text/javascript">
// 初始化 myapp 模块
var myapp = angular.module("myapp",[]);
// 定义模块的控制器
// 依赖注入 ，$scope作用域对象，操作当前作用域视图
myapp.controller("myctrl", ["$scope", function($scope){
// 对模型进行初始化赋值
$scope.name = "demo2";
}]);
</script>
</body>页面加载后：
修改输入框值后：
我们可以使用域对象对属性进行初始化赋值，当我们修改时，模型数据也会一起修改；
Controller 控制器 是 js 代码
Model 模型 是 name 属性
View 视图 是 {{name }}
demo3:AngularJS 事件绑定
<body>
<!-- ng-app="myapp" 定义了一个模块 -->
<div ng-app="myapp" ng-controller="myctrl">
<div>
<!-- ng-model模型作用 -->
<input type="text" name="name" ng-model="name" />
<!-- 提供按钮 -->
<input type="button" value="清空" ng-click="clearVal()" />
</div>
<div>
<!-- {{}} 等价于 ng-bind 用于数据显示 -->
Hello, {{name}}
</div>
</div>
<script type="text/javascript">
// 初始化 myapp 模块
var myapp = angular.module("myapp",[]);
// 定义模块的控制器
// 依赖注入 ，$scope作用域对象，操作当前作用域视图
myapp.controller("myctrl", ["$scope", function($scope){
// 对模型进行初始化赋值
$scope.name = "demo3";
// 在作用域 提供 clearVal 点击事件
$scope.clearVal = function(){
$scope.name = "" ; // 模型设置为空
}
}]);
</script>
</body>页面加载后：
点击清空按钮后：
demo4:集合数据遍历显示
<body ng-app="myapp" ng-controller="myctrl">
<table width="100%" border="1">
<tr>
<th>序号</th>
<th>商品编号</th>
<th>商品名称</th>
<th>价格</th>
</tr>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var myapp = angular.module("myapp",[]);
myapp.controller("myctrl",["$scope",function($scope){
$scope.products = [
{
id : 1001,
name : '数码相机',
price : 3000
},
{
id : 1002,
name : '苹果手机',
price : 7000
}
];
}])
</script>页面加载后：
demo5:AngularJS 路由使用（页面架构 ）
使用AngularJs路由功能时需要导入jar包：
<script type="text/javascript" src="js/angular-route.min.js"></script>1.编写页面布局， 将 AngularJS 加载变化部分 div，指定 ng-view
<body ng-app="myapp">
<div>
<h1>header</h1>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/users">用户管理</a></li>
<li><a href="#/products">商品管理</a></li>
</ul>
</div>
<!--显示不同页面的内容-->
<!--ng-view显示路由调用的页面-->
<div ng-view></div>
<div>
<h1>footer</h1>
</div>
</body>2.编写 Angular 路由配置 routeProvider
<script type="text/javascript">
var myapp = angular.module("myapp",["ngRoute"]);
myapp.config(function($routeProvider) {
//设置路由页面
$routeProvider
.when("/", {
templateUrl: '5_1.html'
}).when("/users", {
templateUrl: '5_2.html'
}).when("/products", {
templateUrl: '5_3.html'
}).otherwise({
redirectTo: '/'
});
});
</script>这样,我们就可以实现点击首页，用户管理或者商品管理，ng_view中的内容随之改变，而header和footer内容不变；
demo6:AngularHttp编程：
Angular文档中对此是这么描述的：
比如我要往后台传递一个参数”telephone”,action路径为customer_sendSms；我们使用AngularJs编程可以这么写：
// 1 发送一个HTTP请求，通知服务器 发送短信给目标用户
var regex = /^1(3|5|7|8)\d{9}$/;
if(regex.test(telephone)) {
// 校验通过
$http({
method: 'GET',
url: 'customer_sendSms.action',
params : {
"telephone" : telephone
}
}).error(function(data, status, headers, config) {
// 当响应以错误状态返回时调用
alert("发送短信出错，请重试");
});
} else {
// 校验失败
alert("手机号非法，请重新输入 ");
return;
}
当然，这里我们也可以设置发送成功的状态，其实跟我们之前学习的ajax请求有点像