angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定：
<html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",[]); //然后通过模块来创建控制器 app.controller("myController",function($scope){ $scope.add=function(){ //定义变量（以便在视图中显示） $scope.z = parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <!-- 现在要求在点击按钮的时候触发add方法 --> <body ng-app="myApp" ng-controller="myController"> 第一个数：<input ng-model="x"> 第二个数：<input ng-model="y"> <!-- 定义一个按钮，绑定点击事件，调用控制器中的add方法 --> <!-- 用的就是单击事件指令 ng-click --> <button ng-click="add()">运算</button> <!-- 取出变量z的值显示 --> 运算结果：{{z}} </body> </html>
==========
下面是循环数组，就是说我们有一个数组，要把值循环显示在页面上：
<html> <head> <title>angularJS入门小demo-6 循环数组</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",[]); //然后通过模块来创建控制器 app.controller("myController",function($scope){ //定义一个数组 $scope.list = [102,203,394,555]; }); </script> </head> <!-- 现在要求在table中循环加载显示list中的值--> <body ng-app="myApp" ng-controller="myController"> <table> <!-- 用 ng-repeat 指令循环 --> <!--其中list就是控制器中定义的list，x是在这自定义的变量代码元素 --> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html>
效果：
===
循环对象数组：
<html> <head> <title>angularJS入门小demo-7 循环对象数组</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",[]); //然后通过模块来创建控制器 app.controller("myController",function($scope){ //定义一个数组，里面存放对象 $scope.list = [ {name:'张三',shuxue:100,yuwen:100}, {name:'李四',shuxue:90,yuwen:92}, {name:'王五',shuxue:40,yuwen:50} ]; }); </script> </head> <!-- 现在要求在table中循环加载显示list中的值--> <body ng-app="myApp" ng-controller="myController"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="x in list"> <td>{{x.name}}</td> <td>{{x.shuxue}}</td> <td>{{x.yuwen}}</td> </tr> </table> </body> </html>
结果：
====
内置服务：
angular允许你添加服务，但是它也有一些内置服务，
内置服务就是提供一些功能，下面说的就是一个从后台抓数据的功能，它发送一个http请求，
上面的例子 demo7 的数据是前台写死的，下面我们要从后台请求过来。。
因为要用后台数据，所以需要一个web项目，随便找一个web项目：
将下面三个文件放在webapp下
data.json代码：
[
{"name":"张三","shuxue":100,"yuwen":100},
{"name":"李四","shuxue":90,"yuwen":92},
{"name":"王五","shuxue":40,"yuwen":50},
{"name":"赵六","shuxue":0,"yuwen":0}
]
//需要注意的是：这种json文件的形式中的json数据要写成严格json格式，
//就是key也必须用双引号引起来，而且值如果是字符串也必须用双引号引起来
demo-8.html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>angularJS入门小demo-8 内置服务 $http</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",[]); //然后通过模块来创建控制器 //要用到$http服务，在创建控制器时就要在参数上注入（依赖注入） app.controller("myController",function($scope,$http){ //数据的话我们为了不用建立数据库写sql，可以用一种后端代码的方式 //建立 一个 data.json 以.json结尾的文本文件，可以把数据写到它里面，然后浏览器就能访问到了 //它也是通过ajax方式获取的 //需要注意的是：这种json文件的形式中的json数据要写成严格json格式， //就是key也必须用双引号引起来，而且值如果是字符串也必须用双引号引起来 $scope.findList = function(){ //$http.get("test/data.do"); 实际上这里应该是个请求url //它实际上把 $http.get("data.json") 封装成一个请求对象，如果请求成功了，调用success方法 $http.get("data.json").success( function(response){ //response就是从后台请求来的数据 //定义变量 $scope.list=response; } ); } //这里也可以用这句话来代替下面视图中的 ng-init="findList" 实现自动调用方法加载数据 //$.scope.findList(); }); </script> </head> <!-- 用ng-init指令初始化控制器中的findList()方法 --> <body ng-app="myApp" ng-controller="myController" ng-init="findList()"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="x in list"> <td>{{x.name}}</td> <td>{{x.shuxue}}</td> <td>{{x.yuwen}}</td> </tr> </table> </body> </html>
效果：