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 });