<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<!--如果要使用angular
1 引入相关的框架
2 必须在页面body 写上一个属性ng-app表示使用angularjs应用
3 表达式页面如果需要展示数据 需要写两个大括号{{表达式 或者变量}}
-->
</head>
<body ng-app>
{{100+100}}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<!--
1.引入angular框架
2.在body标签加上属性ng-app
3.在表达式页面展示数据 {{表达式 或者变量值}}
-->
<body ng-app>
<!-- ng-model 给input起名 如果前后台接收数据，可以根据ng-model中的属性获取-->
请输入姓名：<input ng-model="name">
{{name}}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<!--
1.引入angular 框架
2.在body 加入属性 ng-app
3.在展示页面展示 {{表达式 或者变量}}
4.ng-model 给input起别名
5.ng-init 只要一加载页面,首先执行ng-init的操作
-->
<body ng-app ng-init="name='阿三'">
姓名:<input ng-model="name" >
{{name}}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
//定义 myApp 模板 并在body标签上使用模板
var app=angular.module('myApp',[]);
//在模板中声明控制器 并在body标签中使用控制器
app.controller('myController',function ($scope) {
//$scope 是angular js内置对象,有请求数据和响应数据 还有方法
$scope.add=function () {
return parseInt($scope.x)+parseInt($scope.y)
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
x:<input ng-model="x">
y:<input ng-model="y">
运算结果:{{add()}}
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
// 定义模块 myApp
var app = angular.module('myApp',[]);
// 定义控制器
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">
y:<input ng-model="y">
<!--ng-click鼠标单击事件 -->
<button ng-click="add()">运算</button>
结果：{{z}}
</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('myApp',[]);
//定义控制器
app.controller('myControler',function($scope){
$scope.lis t=[666,111,999,888];//声明数组list
});
</script>
</head>
<body ng-app="myApp" ng-controller="myControler">
<table>
<!--ng-repeat="liuyan in list" 循环遍历 no-repeat 是循环指令-->
<tr ng-repeat="liuyan in list">
<td>{{liuyan}}</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('myApp',[]);
//声明控制器
app.controller('myController',function($scope){
$scope.list=[
{name:'yanyan',salary:10000,sui:1000},
{name:'yanyan1',salary:1000,sui:100},
{name:'yanyan2',salary:100000,sui:10000}
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>工资</td>
<td>交税</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.salary}}</td>
<td>{{entity.sui}}</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" >
<title>入门小Demo-8 (内置服务)</title>
<meta charset="utf-8" />
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫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="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.salary}}</td>
<td>{{entity.sui}}</td>
</tr>
</table>
</body>
</html>
date.json文件
[
{"name":"张无忌","salary":100,"sui":93},
{"name":"岩岩","salary":10022,"sui":930},
{"name":"明明","salary":100333,"sui":932},
{"name":"龙龙","salary":100666,"sui":937}
]
