angularjs1-1
<!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>
angularjs1-1的更多相关文章
- Angularjs1培训
Angularjs1培训: angularjs解决什么问题? 从无穷无尽的DOM操作中解放出来,专注于业务逻辑,DOM操作不叫业务逻辑,那是试图呈现. 组件化,模块化为构建大型项目铺平道路,模块发开发 ...
- Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定
一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...
- angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)
笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新 可以在我的博客 查看我 已经封装好的 纯 js写的图片查看器插件 博客链接 懒得把 ...
- 关于vue，angularjs1,react之间的对比
1.时间投入的问题:相对于react和angularjs,学习vue的时间成本低,而且容易上手. 2.JSX的可读性比较一般.代码的可读性不如vue,当然,vue也支持jsx,但是vue更提倡temp ...
- Angular系列-AngularJs1使用Ace编辑器
Ace编辑器 Ace编辑器是一个嵌入web的代码编辑器,支持语法高亮,自动补全等功能,如果想在页面展示或编辑代码,使用该工具是很合适的. 参考项目地址:https://github.com/ajaxo ...
- AngularJS1.X版本基础
AngularJS 知识点: DataBinding Providers Validators Directives Controllers Modules Expressions Factori ...
- Angular企业级开发-AngularJS1.x学习路径
博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...
- angularjs1 实现地图添加自定义控件（搜索功能）及事件
// 添加地图自定义控件的事件 function addEventHandler(target, eventName, handler) { if (target.addEventListener) ...
- AngularJS1.3一些技巧
前言 框架选择.在上一篇文章评论中,有人说angular1.3是个过时的东西,建议使用angular2.其实这种说法很像拿jQuery1.x和jQuery2.x做比较,新的版本当然会有优化优势的地方, ...
- 【原创】angularjs1.3.0源码解析之service
Angular服务 在angular中,服务(service)是以提供特定的功能的形式而存在的. angular本身提供了很多内置服务,比如: $q: 提供了对promise的支持. $http: 提 ...
随机推荐
- C++中值传递（pass-by-value）和引用传递（pass-by-reference）
1.pass-by-value的情况: 缺省情况C++以pass-by-value(继承C的方式)传递对象至(或来自)函数.函数参数都是以实际参数的复件为初值,调用端所获得的也是函数返回值的一个复件, ...
- mysql.connector 事务总结
mysql.connector事务总结: connection.autocommit = 0 (默认值) 事务处理 使用 connection.commit()方法 #!/usr/bin/env py ...
- C - Insomnia cure
Problem description «One dragon. Two dragon. Three dragon», — the princess was counting. She had tro ...
- function at line ### more than 60 upvalues
lua中函数的upvalues是有上限的,在luaconf.h中定义: /*@@ LUAI_MAXUPVALUES is the maximum number of upvalues per func ...
- 介绍一个简单的Parser
我们已经学习了怎样创建一个简单的Monad, MaybeMonad, 并且知道了它如何通过在 Bind函数里封装处理空值的逻辑来移除样板式代码. 正如之前所说的,我们可以在Bind函数中封装更复杂的逻 ...
- [Offer收割]编程练习赛34
共同富裕 显然每次选最大的数字,其余的加一.也可以理解为每次选一个最大的数字减一,直到所有数字都变成最小的数字为止. #include<stdio.h> #include<strin ...
- Git Learning Part II - Working locally
file status life circle basic: modified: Examples: untracked: unmodified: modified: Git branching ...
- 第九课： - 导出到CSV / EXCEL / TXT
第 9 课 将数据从microdost sql数据库导出到cvs,excel和txt文件. In [1]: # Import libraries import pandas as pd import ...
- Linux集群搭建与Hadoop环境搭建
今天是8月19日,距离开学还有15天,假期作业完成还是遥遥无期,看来开学之前的恶补是躲不过了 今天总结一下在Linux环境下安装Hadoop的过程,首先是对Linux环境的配置,设置主机名称,网络设置 ...
- jquery-ui实现拖拽功能
https://www.runoob.com/jqueryui/jqueryui-tutorial.html