From:一条被猫抛弃的他乡流浪狗!

angular.js规范写法 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <script src="/js/angular.min.js"></script>
  6     <link href="/js/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
  7     <title>itcastNg</title>
  8     <script>
  9         (function (window) {
 10             //此处的代码不会污染全局作用域
 11             var myApp = window.angular.module('myApp', []);
 12             myApp.controller('DemoController', function ($scope) {
 13                 $scope.value = 10;
 14                 $scope.doCalc = function () {
 15                     $scope.value *= 2;
 16                 };
 17                 $scope.phones = [
 18                     {
 19                         "name": "Nexus S",
 20                         "snippet": "Fast just got faster with Nexus S.",
 21                         "age": 0
 22                     },
 23                     {
 24                         "name": "Motorola XOOM™ with Wi-Fi",
 25                         "snippet": "The Next, Next Generation tablet.",
 26                         "age": 1
 27                     },
 28                     {
 29                         "name": "MOTOROLA XOOM™",
 30                         "snippet": "The Next, Next Generation tablet.",
 31                         "age": 2
 32                     }
 33                 ];
 34 
 35 
 36             });
 37 
 38 
 39             myApp.controller('PhoneController', function ($scope, $http) {
 40                 /* phones.js json数据
 41                  [
 42                             {
 43                                 "name": "Nexus S",
 44                                 "snippet": "Fast just got faster with Nexus S.",
 45                                 "age": 0,
 46                                 "imageUrl": "/img/01.png",
 47                                 "id":1
 48                             },
 49                             {
 50                                 "name": "Motorola XOOM™ with Wi-Fi",
 51                                 "snippet": "The Next, Next Generation tablet.",
 52                                 "age": 1,
 53                                 "imageUrl": "/img/02.png",
 54                                 "id": 2
 55                             },
 56                             {
 57                                 "name": "MOTOROLA XOOM™",
 58                                 "snippet": "The Next, Next Generation tablet.",
 59                                 "age": 2,
 60                                 "imageUrl": "/img/03.png",
 61                                 "id": 3
 62                             }
 63                  ]
 64                 */
 65                 //json/phones.js 换成上面的json
 66                 $http.get('/html/angular/json/phones.js').success(function (data) {
 67                     $scope.phones = data;
 68                 });
 69             });
 70 
 71 
 72         })(window);
 73 
 74     </script>
 75     <style>
 76         .red { color: red; }
 77     </style>
 78 </head>
 79 <body>
 80     <div class="container" ng-app="myApp">
 81         <div class="row" ng-controller="DemoController">
 82             <div class="col-md-12">
 83                 <input type="text" ng-model="value" />
 84                 <input type="button" ng-click="doCalc()" value="*2" />
 85 
 86                 <br />
 87                 <input type="checkbox" ng-model="v"><span ng-class="{'red':v}">v</span><br />
 88             </div>
 89             <div class="row">
 90                 <div class="col-md-6">
 91                     <ul>
 92                         <li ng-repeat="phone in phones">
 93                             {{phone.name}}
 94                             <p>{{phone.snippet}}</p>
 95                         </li>
 96                     </ul>
 97                     <p>Total number of phones: {{phones.length}}</p>
 98 
 99                 </div>
100 
101                 <div class="col-md-6">
102                     <div>
103                         <!--Sidebar content-->
104                         Search: <input ng-model="query"> - <span>{{query}}</span>
105 
106                     </div>
107                     <div>
108                         <!--Body content-->
109 
110                         <ul>
111                             <li ng-repeat="phone in phones | filter:query">
112                                 {{phone.name}}
113                                 <p>{{phone.snippet}}</p>
114                             </li>
115                         </ul>
116                     </div>
117                 </div>
118             </div>
119 
120         </div>
121 
122         <div class="row" ng-controller="PhoneController">
123             Search: <input ng-model="query">
124             Sort by:
125             <select ng-model="orderProp">
126                 <option value="name">Alphabetical</option>
127                 <option value="age">Newest</option>
128             </select>
129 
130 
131             <ul>
132                 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
133                     {{phone.name}}
134                     <p>{{phone.snippet}}</p>
135                 </li>
136             </ul>
137         </div>
138         <hr />
139     </div>
140 </body>
141 </html>

或者简单点...

1  angular.module("myapp", [])
2         .controller("phoneController", function ($scope, $http, $location) {
3            //todo...
4         });

 

posted @ 2016-02-22 20:14  ICE_Inspire  阅读(283)  评论(0)  编辑  收藏  举报