要想使用 angularJS , 需要在头部引入 angular.min.js 文件 <script src="angular.min.js"></script> .
angular.min.js 文件下载地址: https://pan.baidu.com/s/1-n0ZmWNLXS--HeCBVA3fAA
demo-01 - 表达式 :
<html>
<head>
<title>入门小Demo-01 - 表达式</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{
{100+100}}
</body>
</html>运行结果将展示在页面: 100
demo-02 - 双向绑定 :
<html>
<head>
<title>demo-02 - 双向绑定</title>
<script src="angular.min.js"></script>
</head>
<body ng-app >
请输入姓名:<input ng-model="name"><br>
请输入年龄:<input ng-model="age"><br>
姓名+年龄:{
{name}}+{
{age}}
</body>
</html>运行时, 分别输入 姓名 和 年龄 可进行字符串拼接
demo-03 - 初始化指令 :
<html>
<head>
<title>demo-03 - 初始化指令</title>
<script src="angular.min.js"></script>
</head>
<body ng-app ng-init="name='张三'">
请输入姓名:<input ng-model="name"><br>
请输入年龄:<input ng-model="age"><br>
姓名+年龄:{
{name}}+{
{age}}
</body>
</html>运行时, 姓名输入框中会有之前定义的默认初始值
demo-04 - 控制器 :
<html>
<head>
<title>demo-04 - 控制器</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app = angular.module("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">
第一个数:<input ng-model="x"><br>
第二个数:<input ng-model="y"><br>
结果:{
{add()}}
</body>
</html>运行时, 输入两个数字的结果会自动显示出来
demo-05 - 事件指令 :
<html>
<head>
<title>demo-05 - 事件指令</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app = angular.module("myApp", []);
//创建控制器 $scope 控制层与视图层之间交换数据的桥梁
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">
第一个数:<input ng-model="x"><br>
第二个数:<input ng-model="y"><br>
<button ng-click="add()">运算</button><br>
结果:{
{z}}
</body>
</html>给"运算"添加单击事件, 运行时, 点击"运算", 结果处才会显示输入两个数字的结果
demo-06 - 循环数组 :
<html>
<head>
<title>demo-06 - 循环数组</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app = angular.module("myApp", []);
//创建控制器 $scope 控制层与视图层之间交换数据的桥梁
app.controller("myController",function($scope){
$scope.list = [100,200,300,400,500,600,700,800,900];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{
{x}}</td>
</tr>
</table>
</body>
</html>运行时, list 数组中的结果将会循环显示出来
demo-07 - 循环数组对象 :
<html>
<head>
<title>demo-07 - 循环对象数组</title>
<script src="angular.min.js"></script>
<script>
//建立模块
var app = angular.module("myApp", []);
//创建控制器 $scope 控制层与视图层之间交换数据的桥梁
app.controller("myController",function($scope){
$scope.list = [
{name:'张三',age:18,gender:'男',birthday:'1999-10-21'},
{name:'李四',age:21,gender:'男',birthday:'1996-08-15'},
{name:'刘美',age:22,gender:'女',birthday:'1995-12-12'},
{name:'姜芯',age:19,gender:'女',birthday:'2000-10-13'},
{name:'王五',age:16,gender:'男',birthday:'2003-02-14'},
];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>生日</td>
</tr>
<tr ng-repeat="student in list">
<td>{
{student.name}}</td>
<td>{
{student.age}}</td>
<td>{
{student.gender}}</td>
<td>{
{student.birthday}}</td>
</tr>
</table>
</body>
</html>运行时, list 数组中的对象将会循环显示出来