输出指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularJs-输出指令</title>
<!--引入依赖-->
<script src="js/angular.min.js"></script>
</head>
<body>
<h3>
angular输出语法：{{输出对象}}
</h3>
<!--
ng-app：相当于创建并使用一个默认模块
ng-app：它所在的标签以及他下面的所有子标签都将能识别angularJs指令
-->
<div ng-app>
{{100+100}}
</div>
</body>
</html>双向绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularJs-双向绑定</title>
<!--引入依赖-->
<script src="js/angular.min.js"></script>
</head>
<body>
<h3>
ng-model：表明在$scope中定义了一个变量username
{{}}表明是去$scope中取出数据或者直接输出常量
</h3>
<!--
双向绑定：
view的html改变，controller的js也改变
controller的js改变，view的html也改变
view的html与controller的js是数据共享的
view的html中的数据存到scope中去了
-->
<div ng-app>
用户名：<input ng-model="username"><br>
用户名：{{username}}
</div>
</body>
</html>初始化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularJs-双向绑定，初始化</title>
<!--引入依赖-->
<script src="js/angular.min.js"></script>
</head>
<body>
<h3>
ng-init：初始化赋值、初始化调用等等
</h3>
<div ng-app>
用户名：<input ng-model="username" ng-init="username='tom'"><br>
用户名：{{username}}
</div>
</body>
</html>控制器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularJs-控制器</title>
<!--引入依赖-->
<script src="js/angular.min.js"></script>
<script>
//用js创建模块
<!--
controller的js必须绑定一个模块==controller必须在模块下创建
创建一个控制层（控制层中可以写方法，也可以写变量）：
第一个参数：给控制器取名字
第二个参数：“类”
-->
var app=angular.module('tom',[])
/*
controller的js必须绑定一个模块==controller必须在模块下创建
创建一个控制层（控制层中可以写方法，也可以写变量）：
第一个参数：给控制器取名字
第二个参数：“类”
function ($scope) 传进去，不然没法获取x、y，也无法添加方法add
*/
app.controller('demoController',function ($scope) {//类的主体开始
//写方法
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y);
}
});//类的主体结束
</script>
</head>
<body ng-app="tom" ng-controller="demoController">
<!--控制器，以前写java代码，现在写angularJs代码-->
<!--
模块：在模块内都能识别angularJs代码
ng-app：创建一个默认模块并使用
ng-app="tom"：引用js创建的模块
引用控制器：ng-controller="demoController"
-->
<!--
实现x与y的相加：
1.先将x、y存到scope中 → ng-model
2.在js创建模块，并在页面引用（在页面直接相加是字符串，需要用到js）
3.在js模块下创建controller
4.在controller中添加方法，计算结果
-->
x:<input ng-model="x"><br>
y:<input ng-model="y"><br>
<!--调用demoController的add方法-->
结果：{{add()}}
</body>
</html>点击指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularJs-点击指令</title>
<!--引入依赖-->
<script src="js/angular.min.js"></script>
<script>
//用js创建模块
var app=angular.module('tom',[])
/*
controller的js必须绑定一个模块==controller必须在模块下创建
创建一个控制层（控制层中可以写方法，也可以写变量）：
第一个参数：给控制器取名字
第二个参数：“类”
function ($scope) 传进去，不然没法获取x、y，也无法添加方法add
*/
app.controller('demoController',function ($scope) {//类的主体开始
//写方法
$scope.add=(function () {
$scope.z = parseInt($scope.x)+parseInt($scope.y);
})
});//类的主体结束
</script>
</head>
<body>
<!--控制器，以前写java代码，现在写angularJs代码-->
<!--
模块：在模块内都能识别angularJs代码
ng-app：创建一个默认模块并使用
ng-app="tom"：引用js创建的模块
控制器：ng-controller="demoController"
-->
<div ng-app="tom" ng-controller="demoController">
<!--
实现x与y的相加：
1.先将x、y存到scope中 → ng-model
-->
x:<input ng-model="x"><br>
y:<input ng-model="y"><br>
<!--调用demoController的add方法-->
<!--ng-click：点击事件
ng-click="add()"：调用add
{{z}}：页面中不需要写scope，js中要写
-->
<button ng-click="add()">运算：</button>{{z}}
</div>
</body>
</html>循环输出数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module('tom',[]);
app.controller('myController',function($scope){
$scope.list=[1,2,3,4,5,6];
});
</script>
</head>
<body ng-app="tom" ng-controller="myController">
<table border="1" cellspacing="0" cellpadding="0">
<tr ng-repeat="entity in list">
<td>{{entity}}</td>
</tr>
</table>
</body>
</html>
循环输出对象数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module('tom',[]);
app.controller('myController',function($scope){
$scope.list=[
{name:'tom',math:85},
{name:'jerry',math:96},
{name:'tony',math:85}
];
});
</script>
</head>
<body ng-app="tom" ng-controller="myController">
<table border="1px" cellpadding="0" cellspacing="0">
<tr>
<td>姓名</td>
<td>数学</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.math}}</td>
</tr>
</table>
</body>
</html>
angularJs内置对象$http（和后台交互要使用$http：
eg（一组json数据Data.json，模拟从后台获取数据到前台页面：
[
{"name":"tom","math":85},
{"name":"jerry","math":96},
{"name":"tony","math":85}
]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJs内置对象$http</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module('tom',[]);
app.controller('myController',function($scope,$http){
//创建方法
$scope.getDate=function () {
//使用$http向后台发送请求
$http.get('data.json').success(function (response) {
$scope.list=response;
});
}
});
</script>
</head>
<body ng-app="tom" ng-controller="myController" ng-init="getDate()">
<table border="1px" cellpadding="0" cellspacing="0">
<tr>
<td>姓名</td>
<td>数学</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.math}}</td>
</tr>
</table>
</body>
</html>over~
2187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
