angular.js四大特征：mvc模式、双向绑定、依赖注入、模块化设计
法则：高内聚低耦合
1.表达式{{}}：
使用angular需要引入<script src="angular.min.js"></script>
同时在body添加：ng-app
<html>
<head>
<title>AngularJSDEMO-1表达式</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
2.双向绑定：
ng-model="name"
<html> <head> <title>AngularJSDEMO-2双向绑定</title> <script src="angular.min.js"></script> </head> <body ng-app> 请输入姓名：<input ng-model="name"> <input ng-model="name"> {{name}} </body> </html>
3.初始化指令
ng-init="name=‘程大海‘"将name初始化为程大海
<html> <head> <title>AngularJSDEMO-初始化指令</title> <script src="angular.min.js"></script> </head> <body ng-app ng-init="name=‘程大海‘"> 请输入姓名：<input ng-model="name"> <input ng-model="name"> {{name}} </body> </html>
4.控制器
<html> <head> <title>AngularJSDEMO-控制器</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",[]) //创建控制器 $scopek控制器和视图层交互数据桥梁 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"> 第二个数：<input ng-model="y"> {{add()}} </body> </html>
5、事件指令
<html> <head> <title>AngularJSDEMO-2双向绑定</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",function($scope){ $scope.add= function(){ $scope.c= parseInt( $scope.x)+parseInt($scope.y); } }); </script> </head> <body ng-app="myApp" ng-controller="myController" > 第一个数：<input ng-model="x"> 第二个数：<input ng-model="y"> <button ng-click="add()">运算</button> {{c}} </body> </html>
6、循环数组
<html> <head> <title>AngularJSDEMO循环数组</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",function($scope){ $scope.list = [102,2030,1023,123,23]; }); </script> </head> <body ng-app="myApp" ng-controller="myController" > <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html>
7.循环对象数组
<html> <head> <title>AngularJSDEMO循环数组</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",function($scope){ $scope.list = [ {name:"张三",shuxue:100,yuwen:100},{name:"lisi",shuxue:22,yuwen:2},{name:"wangwu",shuxue:33,yuwen:1}] }); </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.shuxue}}</td> <td>{{entity.yuwen }}</td> </tr> </table> </body> </html>
8.内置服务
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>angular入门小demo</title> <script src="angular.min.js"></script> <script> //建立模块 var app = angular.module("myApp",function($scope,$http){ $scope.findList= function(){ $http.get("data.json").success(function(response){ $scope.list = response; }) } }); </script> </head> <body ng-app="myapp" ng-controller="controller" ng-init="findList"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen }}</td> </tr> </table> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
