angularjs1-1
2024-05-19 01:12:36
<!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>
本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/7224661.html，如需转载请自行联系原作者
angularjs1-1相关推荐
- 关于vue，angularjs1,react之间的对比
1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡temp ...
- Angularjs1.x 中的 service,factory,provider,constant,value
了解 Angularjs1.x 中的 service,factory,provider,constant,value 的应用场景及区别 不管 service , factory 还是 provider ...
- Angularjs1培训
Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...
- angularjs1.6.x实例教程
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zeping891103/article/details/77446544 AngularJS是一款优 ...
- angularjs1访问子组件_vue 组件通信看这篇就够了(12种通信方式)
vue 组件间的通信是 vue 开发中很基础也十分重要的部分,作为使用 vue 的开发者每天都在使用.同时,vue 通信也是面试中非常高频的问题,有很多面试题,都是围绕通信展开. 本文会介绍常见的通信 ...
- angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程
官网上的解释为: The $http service is a core AngularJS service that facilitates communication with the remot ...
- Angularjs1.x 项目结构
大部分的项目结构是以 directives , service, controller 为基础来搭建的项目架构的,但这里更偏向于以应用场景来进行项目架构,因此这里的目录结构可能与您之前遇到的结构不同, ...
- Angularjs1.x 中的 constant, value
constant 常量 constant 在 angularjs 中指的是定义的常量,在应用启动时创建且不可随意更改 定义 constant angular.module('MyApplication ...
- 初识 Angularjs1.x ，了解5个W和1个H
What 什么是 angularjs AngularJS是Google开发的纯客户端JavaScript技术的WEB框架 When 什么时候使用 当你需要开发一个单页应用的时候,就可以使用 angul ...
- angularjs1访问子组件_Vue学习笔记之组件的应用
Vue组件的应用: 1.基础使用:第一步创建组件,第二步注册组件,第三步使用组件.在注册组件是需要用到template的属性. 全局组件和局部组件 组件的嵌套(父子组件):注意先后顺序,先声明,后面才 ...
最新文章
- 广联达加密锁驱动_广联达（GGJ）安装教程
- Travis CI : 最小的分布式系统(二)
- 前端能读取压缩包内容吗?_解决前端多环境部署的痛点
- ModelSim入门及Testbench编写——合理利用仿真才是王道
- 用 Python 将 QQ 好友头像生成祝福语
- java 账户和密码 3次_模拟登录,给三次机会,并提示还有几次。Java实现
- apk部分手机安装失败_3关于Apk安装失败问题的解决方法
- 如何快速理解模糊PID算法 ---（一）
- 基于html房屋管理系统,一种Web界面的互联网房屋销售管理系统设计的制作方法...
- 超详细的linux部署redis实战记录
- 高频交易揭：美国五大高频易访录
- 利用官方预训练模型快速计算Inception Score和FID
- AB测试平台的工程实现
- Unity3D基础数学向量
- 苹果iphone手机蓝牙自动打开故障怎么解决
- 深入理解 Plasma（四）Plasma Cash
- 如何将JPG格式图片转换成BMP格式
- 搭建阿里云物联网平台实现MQTT通信
- [Pandas技巧] 多列值合并成一列
- 项目管理（如何进行项目质量管理）