1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src='/images/loading.gif' data-original="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>
原标题:AngularJs 入门参考代码
关键词:JS