需要导入： angular-1.3.0.js
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular入门</title>
<script type="application/javascript" src="angular-1.3.0.js"></script>
</head>
<body ng-app="">
<div>{{8+2}}</div>
<div>{{10*5}}</div>
<div>{{2/6}}</div>
<div>{{9-5}}</div>
<hr>
<!--ng-init 指令初始化 AngularJS 应用程序变量。-->
<div ng-init="user={id:6,name:'张三'}">
<!--ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTM-->
<div>ID：<span ng-bind="user.id"></span></div>
<div>用户名：<span ng-bind="user.name"></span></div>
</div>
<hr>
<!--ng-init 指令初始化 AngularJS 应用程序变量。-->
<div ng-init="username=['张三','李四','王五']">
<!--ng-repeat 指令会重复一个 HTML 元素： ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。-->
<ul ng-repeat="name in username | limitTo:2"><!--limitTo:限制的意思-->
<li>{{name}}</li>
</ul>
</div>
<hr>
<!--ng-init 指令初始化 AngularJS 应用程序变量。-->
<div ng-init="usernamea=['zhangsan','lisi','wangwu']">
<ul ng-repeat="name in usernamea | filter:'a'"><!--filter:过滤的意思 -->
<li>{{name}}</li>
</ul>
<hr>
<!--ng-init 指令初始化 AngularJS 应用程序变量。-->
<button ng-init="cishu=0" ng-click="cishu=cishu+1">点击我增加次数</button>
<button ng-init="cishu" ng-click="cishu=cishu-1">点击我减少次数</button>
<p>点击次数：{{cishu}}</p>
</div>
<hr>
<div>
<!--ng-model 指令把输入域的值绑定到应用程序变量 name。-->
姓：<input type="text" ng-model="xing">
名：<input type="text" ng-model="ming">
</div>
<p>姓名：{{xing+ming}}</p>
<hr>
</body>
</html>
上图看看效果：
===========================================================================================
接下来是过滤器：
<script>
//自定义过滤器
var app=angular.module("ll",[]);
app.filter("upper",function () {
return function (msg ,flag) {
return msg.toUpperCase() //全都大写
}
})
app.filter("lower",function () {
return function (msg,flag) {
return msg.toLowerCase() //全都小写
}
})
app.filter("submit",function () {
return function (msg,flag) {
return msg.substr(0,5) //截取
}
})
</script>
</head>
<body ng-init="books = [{id: 1, title: 'Thinking in Java', isRecommend: false, price: 28},
{id: 2, title: 'Thinking in C++', isRecommend: true, price: 32},
{id: 3, title: 'MySQL', isRecommend: false, price: 26}]">
<table border="1px">
<tr>
<td>序号：</td>
<td>ID：</td>
<td>标题：</td>
<td>是否推荐：</td>
<td>价格</td>
</tr>
<tr ng-repeat=" a in books">
<td>{{$index}}</td>
<td>{{a.id}}</td>
<!--改变这里的名字（submit）给上面的方法用可以实现 截取 全都大写或小写-->
<td>{{a.title | submit}}</td>
<td>
<i ng-show="a.isRecommend">是</i>
<i ng-hide="a.isRecommend">否</i>
</td>
<td>{{a.price}}</td>
</tr>
</table>
</body>
上图片：
接下来是自定义指令：
<script>
//自定义指令
//Angular通过被称为指令的属性来拓展HTML；通过内定指令来为应用添加功能。
var app=angular.module("myApp",[]);
app.directive("myJavabc",function () {
return{
restrict:'ECMA',
template:'你好！！！', //这里是需要在网页展示的信息
}
})
</script>
</head>
<body ng-app="myApp">
<!--我们定义了一个my-hello的指令；
使用directive来完善这个指令，返回一个对象，有3个值，
1、restrict共四个值：E：标签指令，C：class指令，M：注释指令，A：属性指令
使用方法：-->
<!--标签指令-->
<my-javabc></my-javabc>
<!--class指令-->
<div class="my-javabc"></div>
<!--注释指令-->
<span my-javabc></span><br>
<!--属性指令-->
<!-- directive:my-javabc -->
<!--注意：replace必须为true时，自定义指令的注释才能解析；-->
</body>
