<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>入门小demo</title> <script src="../js/angular.min.js"></script> <script> var app=angular.module('myapp',[]);//定义一个叫myapp的模块 //定义控制器 app.controller('myController',function($scope,$http){ $scope.add=function(){ return parseInt($scope.x)+parseInt($scope.y) }; $scope.sub=function(){ $scope.z=parseInt($scope.x)*parseInt($scope.y) }; $scope.list= [100,192,203,434 ];//定义数组 $scope.listObject= [ {name:'张三',shuxue:100,yuwen:93}, {name:'李四',shuxue:88,yuwen:87}, {name:'王五',shuxue:77,yuwen:56} ];//定义对象数组 //内置服务 $scope.findAll=function(){ $http.get('data.json').success( function(response){ $scope.listResponse=response; } ); }; }); </script> </head> <body ng-app="myapp" ng-controller="myController" ng-init="myschool='南京航空大学';findAll()" > {{100+100}} <!-- 作者:hy 时间:2018-05-22 描述:表达式的写法是{{表达式 }} 表达式可以是变量或是运算式 ng-app 指令 作用是告诉子元素一下的指令是归 angularJs 的,angularJs 会识别的 ng-app 指令定义了 AngularJS 应用程序的 根元素。 ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。 --> <br> 请输入你的姓名: <input ng-model="myname"> <br> {{myname}}你好 <br /> <!-- 作者:offline 时间:2018-05-22 描述:ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以 实时地输出变量。 --> 请输入你的学校: <input ng-model="myschool"> <br> <br /> <!-- 作者:offline 时间:2018-05-22 描述: ng-init="myschool='南京航空大学'" 初始化变量值 --> x:<input ng-model="x" /> <br /> y:<input ng-model="y" /> <br /> <button ng-click="sub()">运算</button> <br /> 加法运算结果: {{add()}} <br /> 乘法运算结果: {{z}} <!-- 作者:offline 时间:2018-05-22 描述:ng-controller 用于指定所使用的控制器。 理解 $scope: $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上 下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会 立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图 --> <br /> <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> <!-- 作者:offline 时间:2018-05-23 描述:这里的 ng-repeat 指令用于循环数组变量 --> <br /> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in listObject"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table> <br /> 内置服务:<br /> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entityResponse in listResponse"> <td>{{entityResponse.name}}</td> <td>{{entityResponse.shuxue}}</td> <td>{{entityResponse.yuwen}}</td> </tr> </table> </body> </html>
angular入门小demo
猜你喜欢
转载自blog.csdn.net/thedarkclouds/article/details/80469906
今日推荐
周排行