首先什么是 AngularJS?
"AngularJS 是专门为应用程序设计的 HTML。"
AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
下面直接上我的代码(一个简单的获取服务器上的一个json文件的demo):
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="controller">
<p>在输入框中尝试输入:</p>
<p>姓:<input type="text" ng-model="firstname"></p>
<p>名:<input type="text" ng-model="lastname"></p>
<p>{{firstname+" "+lastname}}</p>
<ul>
<!-- <li ng-repeat="x in names | orderBy:'age'">
{{(x.name|uppercase)+','+x.age}}
</li> -->
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module("myApp", [])
.controller("controller", function($scope,$http) {
$scope.firstname = "jim";
$scope.lastname = "zhu";
// $scope.names = [{
// "name": "zhazha",
// "age": 12
// }, {
// "name": "zha11zha1",
// "age": 2
// }, {
// "name": "zuzu",
// "age": 112
// }];
$http.get("names.json")
.success(function(response) {
$scope.names = response;
console.log(response)
});
});
</script>
</body>
</html>
names.json 内容:
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]