angular前端框架简单小案例
Posted zhangrongfei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular前端框架简单小案例相关的知识，希望对你有一定的参考价值。
一、angular表达式
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<!--
如果要使用angular 1、必须先引入相关的框架
2、必须在页面body上写一个属性ng-app表示使用angular js应用
3、表达式页面如果需要展示数据，需要写上两个大括号，例：表达式或者变量
-->
</head>
<body ng-app>
100*100
</body>
二、双向绑定
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app>
<!--
ng-model 指令是指给input起名；后台如果接收表单数据，可以根据ng-model中的属性名获取值
页面也可以通过这个属性获取值，本质数据放到当前页面的$
scope中保存
-->
请输入你的姓名：<input ng-model="myName"><br>
myName,你好！！！
</body>
三、初始化指令
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app ng-init="myName=‘张三‘">
<!--
ng-init是初始化指令，只要页面已加载就执行ng-init
$scope是angular js内置对象，有请求的数据和相应的数据，还有方法
-->
请输入你的姓名：<input ng-model="myName"><br>
myName,你好
</body>
四、
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
/*
* 1、var app=angular.module(‘myApp‘,[]);
* 定义一个myApp的模块后在body标签上声明使用模块的名称
*2、app.controller(‘myController‘,function ($scope)
* 在模块中声明控制器后在body标签上声明使用控制器
*/
var app=angular.module(‘myApp‘,[]);//定义了一个myApp的模块
//定义控制器$scope响应请求的数据和方法
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>
五、事件指令
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
//定义app模块
var app=angular.module(‘myApp‘,[]);
//定义myController控制器
app.controller(‘myController‘,function ($scope)
$scope.add=function ()
$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><br>
结果：Z
</body>
六、循环数组
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module(‘myApp‘,[]);
//定义控制器
app.controller(‘myController‘,function ($scope)
//声明数组list
$scope.list=[123,12,22,1323];
);
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="list in list">
<td>list</td>
</tr>
</table>
</body>
七、循环对象遍历数组
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module(‘myApp‘,[]);
//定义控制器
app.controller(‘myController‘,function ($scope)
//定义数组
$scope.list=[
name:‘lisi‘,saylary:12120,sui:120,
name:‘zhangsan‘,saylary:2200,sui:20,
name:‘张三‘,saylary:391073,sui:390
]
);
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>工资</td>
<td>税收</td>
</tr>
<tr ng-repeat="list in list">
<td>list.name</td>
<td>list.saylary</td>
<td>list.sui</td>
</tr>
</table>
八、内置服务
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module(‘myApp‘,[]);
//定义控制器，$http主要欧诺个来发送http请求，ajax请求，$http.get用来发送get请求
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>
<tr>
<td>姓名</td>
<td>工资</td>
<td>税收</td>
</tr>
<tr ng-repeat="list in list">
<td>list.name</td>
<td>list.salary</td>
<td>list.sui</td>
</tr>
</table>
</body>
以上是关于angular前端框架简单小案例的主要内容，如果未能解决你的问题，请参考以下文章