您的位置：首页 > Web前端 > AngularJS

AngularJS入门案例

2017-12-25 18:29 393 查看

AngularJS入门案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJSDemo01--表达式</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<!--
第一步：表达式指令 ng-app ng-model {{}}
-->
<body ng-app>
姓名：<input ng-model="myName"/><br />
您输入的姓名：{{myName}}
</body>
</html>

----------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJSDemo02---双向绑定</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<!--
双向数据绑定
-->
<body ng-app>
姓名：<input ng-model="myName" /><br />
欢迎：<input value="{{myName}}"/>先生/女士
</body>
</html>

------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJSDemo03---初始化指令</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<!--
初始化数据值
-->
<body ng-app ng-init="myName='张振华'">
姓名：{{myName}}
</body>
</html>

-------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJSDemo04---控制器</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
/*
* 第一步：自定义模版
* 第二步：自定义控制器
* 第三步：自定义方法
* */
//自定义模版
var app=angular.module("myApp",[]);
//自定义控制器
app.controller("myController",function($scope){
//自定义加法
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y);
}

})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" /><br />
y:<input ng-model="y" /><br />
两个参数之和为：{{add()}}
</body>
</html>

-----------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJSDemo05---事件指令</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",function<
d9d0
span class="hljs-params">($scope){
$scope.add=function(){
return $scope.z=parseInt($scope.x)+parseInt($scope.y);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x" /><br />
y:<input ng-model="y" /><br />
<button ng-click="add()">加法运算</button>
结果为：{{z}}
</body>
</html>

---------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJSDemo06---循环数组</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.list=[100,199,200,198];//定义一个数组
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table border="1" cellpadding="10" cellspacing="0">
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>

---------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJSDemo07---循环内置对象</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.list=[
{name:'张三',shuxue:100,yuwen:90},
{name:'李四',shuxue:100,yuwen:90},
{name:'王五',shuxue:100,yuwen:90}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>姓名</th>
<th>数学成绩</th>
<th>语文成绩</th>
</tr>
<tr ng-repeat="x in list" align="center">
<td>{{x.name}}</td>
<td>{{x.shuxue}}</td>
<td>{{x.yuwen}}</td>
</tr>
</table>
</body>
</html>

--------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJSDemo08---内置服务</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myController",function($scope,$http){
$scope.findAll=function(){
//请求路径
$http.get('data.json').success(
function(response) {
$scope.list=response;
}
);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>姓名</th>
<th>数学成绩</th>
<th>语文成绩</th>
</tr>
<tr ng-repeat="s in list" align="center">
<td>{{s.name}}</td>
<td>{{s.shuxue}}</td>
<td>{{s.yuwen}}</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angularjs
相关文章推荐
新的分享
章节导航