一、<!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',[]) //在模块中创建控制器 myApp.controller('myController',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',[]) //在模块中创建控制器 myApp.controller('myController',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',[]) //在模块中创建控制器 myApp.controller('myController',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里使用