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.下拉框select
245 <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>