Angularjs 入门小Demo

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>

猜你喜欢

转载自blog.csdn.net/qq_39716220/article/details/85045260