1、引入angular.js
2、表达式 <body ng-app> {{100+100}}
3、<input ng-mode="name"> {{name}} 双向绑定
4、初始化name <body ng-app ng-init=" name='yufei'">
5、控制器:
<script>
//建立模块
var app=angular.module("myApp",[引入的其他模块]);
//创建控制器 控制器名 函数 $scope:控制层和视图层交换数据的挑梁
app.controller("myController",function($scope){
$scope.add=function(){ //相当于public的
return $scope.x+$scope.y;
}
});
</script>
//试图
<body ng-app="myApp" ng-controller="myController">
第一个数 <input ng-mode="X" >
第二个数 <input ng-mode="y" >
{{add()}}
</body>
6、事件指令:ng-click
<script>
//建立模块
var app=angular.module("myApp",[引入的其他模块]);
//创建控制器 控制器名 函数 $scope:控制层和视图层交换数据的挑梁
app.controller("myController",function($scope){
$scope.add=function(){ //相当于public的
$scope.z= $scope.x+$scope.y;
}
});
</script>
//试图
<body ng-app="myApp" ng-controller="myController">
第一个数 <input ng-mode="X" >
第二个数 <input ng-mode="y" >
<button ng-click="add()">运算</button>
{{z}}
7、循环数组:ng-repeat="x in list"
<script>
//建立模块
var app=angular.module("myApp",[引入的其他模块]);
//创建控制器 控制器名 函数 $scope:控制层和视图层交换数据的挑梁
app.controller("myController",function($scope){
$scope.list=[102,18,19,22,23,67,89];
});
</script>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
8、循环对象数组:
<script>
//建立模块
var app=angular.module("myApp",[引入的其他模块]);
//创建控制器 控制器名 函数 $scope:控制层和视图层交换数据的挑梁
app.controller("myController",function($scope){
$scope.list=[
{"name":"张三","数学":56,"英语":45,"语文":78},
{"name":"李四","数学":56,"英语":78,"语文":78},
{"name":"王五","数学":56,"英语":90,"语文":67}
];
});
</script>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
<td>{{x.name}}</td>
<td>{{x.数学}}</td>
<td>{{x.英语}}</td>
</tr>
</table>
9、内置服务:
<script>
//建立模块
var app=angular.module("myApp",[引入的其他模块]);
//创建控制器 控制器名 函数 $scope:控制层和视图层交换数据的挑梁
app.controller("myController",function($scope,$http){
$scope.findList=function(){
$http.get("http:ww.baidu.com").success(
function(response){
$scope.list=response;
}
);
}
});
</script>