标签：var doc UNC nbsp sde tab 添加 pre lis
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",[]) //创建控制器 $scopek控制器和视图层交互数据桥梁 app.controller("myController",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",[]) //创建控制器 $scopek控制器和视图层交互数据桥梁 app.controller("myController",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",[]) //创建控制器 $scopek控制器和视图层交互数据桥梁 app.controller("myController",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",[]) //创建控制器 $scopek控制器和视图层交互数据桥梁 app.controller("myController",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>
标签：var doc UNC nbsp sde tab 添加 pre lis
原文地址：https://www.cnblogs.com/jinyu-helloword/p/10459482.html
