Angular.js初体验

来源：互联网发布：linux 设置用户权限编辑：程序博客网时间：2024/06/18 09:32

首先什么是 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"}]

0 0