你的位置:首页 > Java教程

[Java教程]AngularJs 入门参考代码


 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 6 <style> 7 table, th , td { 8  border: 1px solid grey; 9  border-collapse: collapse; 10  padding: 5px; 11 } 12 table tr:nth-child(odd) { 13  background-color: #f1f1f1; 14 } 15 table tr:nth-child(even) { 16  background-color: #ffffff; 17 } 18 </style> 19 </head> 20 <body> 21  22 1.使用ng-model传值 23 <div > 24  <p>输入name : <input type="text" ng-model="name1"></p> 25  <h1>Hello {{name1}}</h1> 26 </div> 27 2.ng-init初始化 很少用 一般用 controller 28 <div ng-init="name2='John'"> 29   <p>初始化名字 <span ng-bind="name2"></span></p> 30 </div> 31 3.表达式的使用 32 <div > 33  <p>我的第一个表达式: {{ name1 + name2 }}</p> 34 </div> 35  36 <h1>AngularJS 实例</h1> 37  4.ng-init初始化一个对象 类似于jason格式 38 <div ng-init="person={firstName:'John',lastName:'Doe'}"> 39  40 <p>姓为 {{ person.lastName }}</p> 41  42 </div>  43  5.ng-init初始化一个数组 ng-repeat进行数据的遍历 44 <div ng-init="names=['A','B','C']"> 45 <ul><li ng-repeat="x in names">{{x}}</li></ul> 46 </div> 47  48  49 6.定义一个控制器 js代码可外置 50 <div ng-app="myApp" ng-controller="myCtrl"> 51  52 <h1>{{carname}}</h1> 53  54 </div> 55  56 <script> 57 var app = angular.module('myApp', []); 58 app.controller('myCtrl', function($scope) { 59   $scope.carname = "Volvo"; 60 }); 61 </script> 62   63 7.controller受 ng-model影响 64 <div ng-app="myApp" ng-controller="myCtrl"> 65   <input ng-model="name"/> 66   <h1>{{name}}</h1> 67 </div> 68 <script> 69 var app = angular.module('myApp',[]); 70  app.controller('myCtrl',function($scope){ 71    $scope.name="testname"; 72  }); 73 </script> 74  75  8.$rootScope 类似于全局变量 76 <div ng-app="myApp" ng-controller="myCtrl"> 77   <ul><li ng-repeat="x in names">{{x}}{{h}}</li></ul> 78 </div> 79 <script> 80   var a='hehe';//给 ajax 传值 提供了可能 81   var app = angular.module('myApp',[]); 82    app.controller('myCtrl',function($scope){ 83      $scope.names=['A','B','C']; 84      $scope.h=a; 85    }); 86 </script> 87  88 9.controller 控制器方法 89 <div ng-app='myApp' ng-controller='myCtrl'> 90   <h1>{{fullname()}}</h1> 91 </div> 92 <script> 93   var app = angular.module('myApp',[]); 94   app.controller('myCtrl',function($scope){ 95     $scope.aname='A'; 96     $scope.bname='B'; 97     $scope.fullname=function(){ 98       return $scope.aname+' '+$scope.bname; 99     }100   });101 </script>102 103  10.controller升级版104  <div ng-app='myApp' ng-controller='myCtrl'>105    <ul><li ng-repeat='x in names'>{{x}}</li></ul>106  </div>107  <script>108    angular.module('myApp',[]).controller('myCtrl',function($scope){109      $scope.names=['A','B','C'];110    });111  </script>112 113   11.过滤器uppercase大写 lowercase 格式化字符串为小写 114   <div ng-app='myApp' ng-init='name="aaa"'>115     {{name | currency}}116   </div>117   <script>118     angular.module('myApp',[]);119   </script>120 121     12. currency 格式化数字为货币格式122     <div ng-app='myApp' ng-init='name="aaa"'>123     数量:<input type='number' ng-model='quantity'>124     单价:<input type='number' ng-model='price'>125       <p>总价:{{quantity*price | currency}}</p>126     </div>127     <script>128       angular.module('myApp',[]);129     </script>130          131   13.orderBy 过滤器根据表达式排列数组132  <div ng-app='myApp' ng-controller='myCtrl'>133    <ul><li ng-repeat='x in names | orderBy : "num"'>{{x.num}} {{x.name}}</li></ul>134  </div>135  <script>136    angular.module('myApp',[]).controller('myCtrl',function($scope){137      $scope.names=[{num:2,name:'B'},{num:3,name:'C'},{num:1,name:'A'}];138    });139  </script>140 141   14.服务 $location.absUrl() 返回当前页面的 URL 地址142   <div ng-app='myApp' ng-controller='myCtrl'>143      {{url}}144    </div>145  <script>146    angular.module('myApp',[]).controller('myCtrl',function($scope,$location){147      $scope.url=$location.absUrl();148    });149  </script>150 151  15.$http 服务152    <div ng-app='myApp' ng-controller='myCtrl'>153      {{mydata}}154    </div>155  <script>156   var app = angular.module('myApp', []);157   app.controller('myCtrl', function($scope, $http) {158   $http.get("syscfg/workermsg.action?fn=angular").then(function (response) {159     $scope.mydata = response.data;160   });161 });162   163  </script>164 165    16.$timeout 服务 定时器166   <div ng-app='myApp' ng-controller='myCtrl'>167      {{myHeader}}168    </div>169  <script>170 var app = angular.module('myApp', []);171 app.controller('myCtrl', function($scope, $timeout) {172   $scope.myHeader = "Hello World!";173   $timeout(function () {174     $scope.myHeader = "How are you today?";175   }, 2000);176 });177  178  </script>179 180  17.$interval 服务 间隔重复执行 心跳器181   <div ng-app='myApp' ng-controller='myCtrl'>182      {{theTime}}183    </div>184  <script>185   var app = angular.module('myApp', []);186   app.controller('myCtrl', function($scope, $interval) {187     $scope.theTime = new Date().toLocaleTimeString();188     $interval(function () {189       $scope.theTime = new Date().toLocaleTimeString();190       }, 1000);191   });192  193  </script>194 195  18.创建自定义服务196    <div ng-app='myApp' ng-controller='myCtrl'>197      {{hex}}198    </div>199  <script>200   var app = angular.module('myApp', []);201   app.service('hexafy', function() {202     this.myFunc = function (x) {203       return x.toString(16);204       }205   });206   app.controller('myCtrl', function($scope, hexafy) {207    $scope.hex = hexafy.myFunc(255);208   });209  210  </script>211  212 213  19.过滤器中,使用自定义服务214  <div ng-app="myApp">215 <input type='number'ng-init='num=0' ng-model='num'/>216 <h1>{{num | myFormat}}</h1>217 </div>218 <script>219 var app = angular.module('myApp', []);220 app.service('hexafy', function() {221   this.myFunc = function (x) {222     return x.toString(16);223   }224 });225 app.filter('myFormat',['hexafy', function(hexafy) {226   return function(x) {227     return hexafy.myFunc(x);228   };229 }]);230 231 </script>232        233 20.AngularJS $http 存在跨域问题无法请求 需放置本地文件234 <div ng-app='app' ng-controller='ctrl'>235   <ul><li ng-repeat='x in names'>{{x.Name+','+x.Country+','+x.City}}</li></ul>236 </div>237 <script>238   angular.module('app',[]).controller('ctrl',function($scope,$http){239     $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")240     .success(function(response){$scope.names = response.records;});241   });242 </script>243 244 21.下拉框select245 <div ng-app="myApp" ng-controller="myCtrl">246 247 248 <select ng-model="selectedSite" ng-options="x.site for x in sites">249 </select>250 <p><a href="{{selectedSite.url}}">{{selectedSite.site}}</a></p>251 252 </div>253 254 <script>255 var app = angular.module('myApp', []);256 app.controller('myCtrl', function($scope) {257   $scope.sites = [258     {site : "Google", url : "http://www.google.com"},259     {site : "Runoob", url : "http://www.runoob.com"},260     {site : "Taobao", url : "http://www.taobao.com"}261   ];262 });263 </script>264 265 22.表格 css 参考在头部 利用oderBy排序 $index+1显示排序266 <div ng-app="myApp" ng-controller="myCtrl" >267 <table >268 <tr ng-repeat='x in sites | orderBy : "num"'>269   <td>{{$index+1}}</td>270   <td>{{x.site}}</td>271   <td>{{x.url}}</td>272 </tr>273 </table>274 275 </div>276 277 <script>278 var app = angular.module('myApp', []);279 app.controller('myCtrl', function($scope) {280   $scope.sites = [281     {num:3,site : "Google", url : "http://www.google.com"},282     {num:1,site : "Runoob", url : "http://www.runoob.com"},283     {num:2,site : "Taobao", url : "http://www.taobao.com"}284   ];285 });286 </script>287 288 289   </body>290 291 </html>