一、<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表达式</title>
<script src="js/angular.min.js"></script>
</head>
<body >
<!--ng-app包裹的标签能使用angularjs-->
<div ng-app>
{{100+300}}
</div>
{{100+200}}
</body>
</html>
二、<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>双向绑定</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app>
<!--ng-app包裹的标签能使用angularjs-->
请输入名称：<input type="text" ng-model="myname">
显示输入的值为：{{myname}}
</body>
</html>
三、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>初始化指令</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app ng-init="myname=‘张三‘">
<!--ng-app包裹的标签能使用angularjs-->
请输入名称：<input type="text" ng-model="myname">
显示输入的值为：{{myname}}
</body>
</html>
四、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>控制器</title>
<script src="js/angular.min.js"></script>
</head>
<script>
<!--$scope是一个媒介,是控制器与视图连接的媒介-->
//$scope：建立js函数（控制器）和视图（html）之间的桥梁
var myController = function($scope){
$scope.z=1;
}
</script>
<body ng-app ng-controller="myController">
<!--ng-app包裹的标签能使用angularjs-->
x:<input type="text" ng-model="x" />
y:<input type="text" ng-model="y" />
x+y的值：{{z}}
</body>
</html>
五、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义模块中创建控制器</title>
<script src="js/angular.min.js"></script>
</head>
<script>
//创建模块‘myApp‘:模块名字，[]里面可以引入其他模块
var myApp = angular.module(‘myApp‘,[])
//在模块中创建控制器
myApp.controller(‘myController‘,function($scope){
//控制器中创建（定义变量，创建函数）
//双向绑定
$scope.add=function(){
return (parseInt($scope.x)+parseInt($scope.y));
}
})
</script>
<body ng-app="myApp" ng-controller="myController">
<!--ng-app包裹的标签能使用angularjs-->
x:<input type="text" ng-model="x" />
y:<input type="text" ng-model="y" />
x+y:{{add()}}
</body>
</html>
?
六、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件</title>
<script src="js/angular.min.js"></script>
</head>
<script>
//创建模块‘myApp‘:模块名字，[]里面可以引入其他模块
var myApp = angular.module(‘myApp‘,function($scope){
//控制器中创建（定义变量，创建函数）
//双向绑定
$scope.add=function(){
$scope.z=(parseInt($scope.x)+parseInt($scope.y));
}
})
</script>
<body ng-app="myApp" ng-controller="myController">
<!--ng-app包裹的标签能使用angularjs-->
x:<input type="text" ng-model="x" />
y:<input type="text" ng-model="y" />
x+y:{{z}}
<button ng-click="add()">计算值</button>
</body>
</html>
七、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>循环</title>
<script src="js/angular.min.js"></script>
</head>
<script>
//创建模块‘myApp‘:模块名字，[]里面可以引入其他模块
var myApp = angular.module(‘myApp‘,function($scope){
//控制器中创建（定义变量，创建函数）
//双向绑定
$scope.mylist=[
{"id":1,"username":"张三","age":100},
{"id":2,"username":"lisi","age":200},
{"id":3,"username":"lidddsi","age":2300}
]
$scope.add=function(){
$scope.z=(parseInt($scope.x)+parseInt($scope.y));
}
})
</script>
<body ng-app="myApp" ng-controller="myController">
<!--ng-app包裹的标签能使用angularjs-->
<table>
<tr>
<td>id</td>
<td>username</td>
<td>age</td>
</tr>
<tr ng-repeat="myitem in mylist">
<td>{{myitem.id}}</td>
<td>{{myitem.username}}</td>
<td>{{myitem.age}}</td>
</tr>
</table>
</body>
</html>
八、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内置服务</title>
<script src="js/angular.min.js"></script>
</head>
<script>
//创建模块‘myApp‘:模块名字，[]里面可以引入其他模块
var myApp = angular.module(‘myApp‘,function($scope,$http){
//控制器中创建（定义变量，创建函数）
//双向绑定
$http.get(‘js/data.json‘).success(
function(response){ //response就是响应的结果
$scope.mylist=response;
}
);
//
$scope.add=function(){
$scope.z=(parseInt($scope.x)+parseInt($scope.y));
}
})
</script>
<body ng-app="myApp" ng-controller="myController">
<!--ng-app包裹的标签能使用angularjs-->
<table>
<tr>
<td>id</td>
<td>username</td>
<td>age</td>
</tr>
<tr ng-repeat="myitem in mylist">
<td>{{myitem.id}}</td>
<td>{{myitem.username}}</td>
<td>{{myitem.age}}</td>
</tr>
</table>
</body>
</html>
九、在idea里使用
<!--引入js--><script src="../plugins/angularjs/angular.min.js"></script><script> //定义一个模块 var app = angular.module(‘pinyougou‘,[]); //创建一个控制器 app.controller(‘brandController‘,function ($scope,$http) { //控制器中写一个方法，当页面加载的时候调用，发送请求获取json数据 $scope.findAll=function () { $http.get(‘../brand/findAll.do‘).success( function (response) { //List<tbbrand> $scope.list=response; } ) } }) //</script>
