一、angular表达式
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <!-- 如果要使用angular 1、必须先引入相关的框架 2、必须在页面body上写一个属性ng-app表示使用angular js应用 3、表达式页面如果需要展示数据，需要写上两个大括号，例：{{表达式或者变量}} --></head><body ng-app> {{100*100}}</body>二、双向绑定
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script></head><body ng-app> <!-- ng-model 指令是指给input起名；后台如果接收表单数据，可以根据ng-model中的属性名获取值 页面也可以通过这个属性获取值，本质数据放到当前页面的$ scope中保存 --> 请输入你的姓名：<input ng-model="myName"><br> {{myName}},你好！！！</body>三、初始化指令
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script></head><body ng-app ng-init="myName=‘张三‘"> <!-- ng-init是初始化指令，只要页面已加载就执行ng-init $scope是angular js内置对象，有请求的数据和相应的数据，还有方法 --> 请输入你的姓名：<input ng-model="myName"><br> {{myName}},你好</body>四、
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script> /* * 1、var app=angular.module(‘myApp‘,[]); * 定义一个myApp的模块后在body标签上声明使用模块的名称 *2、app.controller(‘myController‘,function ($scope) {} * 在模块中声明控制器后在body标签上声明使用控制器 */ var app=angular.module(‘myApp‘,[]);//定义了一个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">X:<input ng-model="X"><br>Y:<input ng-model="Y"><br>运算结果：{{add()}}</body>五、事件指令
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script> //定义app模块 var app=angular.module(‘myApp‘,[]); //定义myController控制器 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">X:<input ng-model="X"><br>Y:<input ng-model="Y"><br><button ng-click="add()">运算</button><br>结果：{{Z}}</body>六、循环数组
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script> var app=angular.module(‘myApp‘,[]); //定义控制器 app.controller(‘myController‘,function ($scope) { //声明数组list $scope.list=[123,12,22,1323]; }); </script></head><body ng-app="myApp" ng-controller="myController"> <table> <tr ng-repeat="list in list"> <td>{{list}}</td> </tr> </table></body>七、循环对象遍历数组
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script> var app=angular.module(‘myApp‘,[]); //定义控制器 app.controller(‘myController‘,function ($scope) { //定义数组 $scope.list=[ {name:‘lisi‘,saylary:12120,sui:120}, {name:‘zhangsan‘,saylary:2200,sui:20}, {name:‘张三‘,saylary:391073,sui:390} ] }); </script></head><body ng-app="myApp" ng-controller="myController"> <table> <tr> <td>姓名</td> <td>工资</td> <td>税收</td> </tr> <tr ng-repeat="list in list"> <td>{{list.name}}</td> <td>{{list.saylary}}</td> <td>{{list.sui}}</td> </tr> </table>八、内置服务
<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script> var app=angular.module(‘myApp‘,[]); //定义控制器，$http主要欧诺个来发送http请求，ajax请求，$http.get用来发送get请求 app.controller(‘myController‘,function ($scope,$http) { $scope.findAll=function () { $http.get(‘data.json‘).success(function (response) { $scope.list=response; }); } }); </script></head><body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table> <tr> <td>姓名</td> <td>工资</td> <td>税收</td> </tr> <tr ng-repeat="list in list"> <td>{{list.name}}</td> <td>{{list.salary}}</td> <td>{{list.sui}}</td> </tr> </table></body>
原文地址：https://www.cnblogs.com/zhangrongfei/p/11328258.html
时间： 2024-11-09 06:45:59