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 });
转载于:https://www.cnblogs.com/ICE_Inspire/p/5208073.html
