<!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />' </header> <div ng-app="myMode"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="name"></p> <hello></hello> {{name}} <p ng-bind="name"></p> </div> <script src="angular-1.3.0.js"></script> <script type="text/javascript"> var myModele=angular.module("myMode",[]); myModele.directive("hello",function(){ return{ restrict:'E', template:'<div class="red">hello 2131313<strong>你好</strong>everyone</div>', replace:true } }) </script> <style type="text/css"> .red{ color:red; } </style> </body> </html>
<!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> </header> <div ng-app=""> hello angular <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="name"></p> <div ng-bind="name"></div> //网络慢不会出现{{}} {{name}} </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> 姓名: {{person.firstName + " " + person.lastName}} </div> </div> <script> //在angularjs中不建议这样写 控制器污染了全局命名空间 var app = angular.module("myApp", []); app.controller("personController", function($scope,$http) { $http.get('data.php').success(function(data){ console.log(data); }).error(function(err, status, headers, config){ }) //$http.post 采用postJSON方式发送数据到后台， 解决办法：在php中使用 $postData=file_get_contents('php://input', true); 这样就可以获取到前端发来的数据 var postData={text:'这是post的内容'}; var config={params:{id:'5',name:'张三'}} $http.post('data1.php',postData,config) .success(function(data) { console.log(data); }).error(function(data){ //错误代码 }); //jsonp myUrl ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK"; $http.jsonp(myUrl).success( function(data){ console.log(data); } ).error(function(){ alert('shibai'); }); $http('post',url).success(function(){ }).error(function(){ }) }); </script> </body> </html>
<!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> </header> <div ng-app="myApp"> <div ng-controller="firstController"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> {{firstName | uppercase }}} {{lastName}} {{price | currency}} </div> <div ng-controller="secondController"> <ul> <li ng-repeat="p in person"> 姓名：{{p.name}} 年龄：{{p.age}} </li> </ul> <p>循环对象：</p> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> <p>输入过滤： </p> <p><input type="text" ng-model="name"></p> <ul> <li ng-repeat="x in names | filter:name | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> </div> </div> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller('firstController',function($scope){ $scope.firstName="zhangsan"; $scope.lastName="李四"; $scope.price="12121212"; }); app.controller('secondController',function($scope){ $scope.person=[ {name:'张三',age:'25'}, {name:'李四',age:'30'}, {name:'王五',age:'36'} ]; $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> 姓名: {{person.firstName + " " + person.lastName}} </div> </div> <script> //在angularjs中不建议这样写 控制器污染了全局命名空间 var app = angular.module("myApp", []); app.controller("personController", function($scope,$http) { $http.get('data.php').success(function(data, status, headers, config){ console.log(data); console.log(status); console.log(headers); console.log(config); }).error(function(err, status, headers, config){ }) $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> </body> </html>
<!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> </header> <div ng-app="myApp"> <div ng-controller="firstController"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> {{firstName}} {{lastName}} </div> <div ng-controller="secondController"> {{person[0].name}} {{person[0].age}} <ul> <li ng-repeat="p in person"> 姓名：{{p.name}} 年龄：{{p.age}} </li> </ul> </div> </div> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller('firstController',function($scope){ $scope.firstName="张三"; $scope.lastName="李四"; }); app.controller('secondController',function($scope){ $scope.person=[ {name:'张三',age:'25'}, {name:'李四',age:'30'}, {name:'王五',age:'36'} ] }); </script> </body> </html>