<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/js/angular.min.js"></script>
<link href="/js/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
<title>itcastNg</title>
<script>
(function (window) {
//此处的代码不会污染全局作用域
var myApp = window.angular.module('myApp', []);
myApp.controller('DemoController', function ($scope) {
$scope.value = 10;
$scope.doCalc = function () {
$scope.value *= 2;
};
$scope.phones = [
{
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0
},
{
"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1
},
{
"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 2
}
]; }); myApp.controller('PhoneController', function ($scope, $http) {
/* phones.js json数据
[
{
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0,
"imageUrl": "/img/01.png",
"id":1
},
{
"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1,
"imageUrl": "/img/02.png",
"id": 2
},
{
"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 2,
"imageUrl": "/img/03.png",
"id": 3
}
]
*/
//json/phones.js 换成上面的json
$http.get('/html/angular/json/phones.js').success(function (data) {
$scope.phones = data;
});
}); })(window); </script>
<style>
.red { color: red; }
</style>
</head>
<body>
<div class="container" ng-app="myApp">
<div class="row" ng-controller="DemoController">
<div class="col-md-12">
<input type="text" ng-model="value" />
<input type="button" ng-click="doCalc()" value="*2" /> <br />
<input type="checkbox" ng-model="v"><span ng-class="{'red':v}">v</span><br />
</div>
<div class="row">
<div class="col-md-6">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
<p>Total number of phones: {{phones.length}}</p> </div> <div class="col-md-6">
<div>
<!--Sidebar content-->
Search: <input ng-model="query"> - <span>{{query}}</span> </div>
<div>
<!--Body content--> <ul>
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div> </div> <div class="row" ng-controller="PhoneController">
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select> <ul>
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
<hr />
</div>
</body>
</html>
或者简单点…
angular.module("myapp", [])
.controller("phoneController", function ($scope, $http, $location) {
//todo...
});
