Angular学习

来源：互联网发布：淘宝自动优惠怎么取消编辑：程序博客网时间：2024/06/05 18:08

<!--ng-app定义一个angularjs程序--><html ng-app><head><script type="text/javascript" src="angular-1.0.1.min.js"></script></head><body> <!--ng-model元素值绑定到应用程序-->    Your name:<input type="text" ng-model="yourname" placeholder="world"><!--数据绑定到视图--><p ng-bind="yourname"></p></body></html>

表达式

<<!DOCTYPE html><html><head><title>angular表达式</title><script type="text/javascript" src="angular-1.0.1.min.js"></script><meta charset="UTF-8"></head><body><div ng-app="" ng-init="quantity=1;cost=5;person={firstName:'John'};points=[1,4,7]"><p>总价:{{quantity*cost }};</p><p>姓名:{{person.firstName}}</p><p>第二个值:{{points[1]}}</p></div><div ng-app="" ng-init="names=['Jani','Hege','Kai']">  <p>使用 ng-repeat 来循环数组</p>  <ul>    <li ng-repeat="x in names">      {{ x }}    </li>  </ul></div></body></html>

控制器

<<!DOCTYPE html><html><head><title>Angular Controller</title><script type="text/javascript" src="angular-1.0.1.min.js"></script><meta charset="UTF-8"></head><body><div ng-app="myapp" ng-controller="myCtrl">个人信息：<input type="text" ng-model="person"><br>显示年龄:{{person.age}};<br>显示姓名:{{showName()}};</div><script>var app=angular.module('myapp',[]);<!--使用$scope对象保存模型-->app.controller('myCtrl',function($scope){$scope.person={age:13,name:'zhouyi'};$scope.showName=function(){return "方法显示"+$scope.person.name;}})</script></body></html>

过滤器

<<!DOCTYPE html><html><head><title>Angular 过滤器</title><meta charset="UTF-8"><script type="text/javascript" src="angular-1.0.1.min.js"></script></head><body><!--过滤器用于转换数据--><div ng-app="myapp" ng-controller="personCtrl" ng-model="person"><p>姓名大写为{{person.name | uppercase}}</p><p>姓名小写为{{person.name | lowercase}}</p><input type="text" ng-model="price"><p>价格={{ price | currency }}</p><script type="text/javascript">angular.module('myapp',[]).controller('personCtrl',function($scope){$scope.person={name:'zhouyi'};});</script></body></html>

远程访问

<<!DOCTYPE html><html><head><title>Angular http</title><meta charset="UTF-8"><script type="text/javascript" src="angular-1.0.1.min.js"></script></head><body><!--Angular http--><div ng-app="app" ng-controller="ctrl">{{ names.Name+" "+names.Country }}</div><script ><!--$http.get() 从web服务器上读取静态 JSON 数据-->angular.module('app',[]).controller('ctrl',function($scope,$http){$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php").success(function (response) {$scope.names=response.records[0];});});</script></body></html>

事件

<<!DOCTYPE html><html><head><title>Angular事件</title><meta charset="UTF-8"><script type="text/javascript" src="angular-1.0.1.min.js"></script></head><body><div ng-app="app" ng-controller="myctrl"><button ng-click="count = count+1">点我</button><p>{{count}}</p><!--ng-show则与之相反的效果--><p ng-hide="myVar">点击显示姓名:{{name}}</p><button ng-click="toggle()">隐藏/显示</button></div><script type="text/javascript">angular.module('app',[]).controller('myctrl',function($scope){$scope.count=0;$scope.myVar=false;$scope.name="zhouyi";$scope.toggle=function(){$scope.myVar=!$scope.myVar;}});</script></body></html>

0 0