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: 提 ...
随机推荐
- POJ 1654 乱搞题？
题意: 从一个点出发,8个方向,给出每一步的方向,求出走过的路径形成的多边形的面积. 思路: 先普及一下向量叉乘.. (摘自度娘) 也就是x1y2-x2y1. 那这不就好说了嘛. 一个经过原点的闭合多 ...
- Oracle性能优化——总体介绍
最近参加Oracle的培训,对Oracle有了更加深入的认识,在此做个学习总结. 1.Oracle数据库调优不能仅指望修改几项数据库参数就能有明显效果,问题更多出在应用方面,教育开发者正确地使用数据库 ...
- DropDownListFor
- vue-router 原理解析
“更新视图但不重新请求页面”是前端路由原理的核心之一,
- 百度地图api的简单应用
百度地图api 获取经纬度(通过浏览器的) //获取经纬度 window.navigator.geolocation.getCurrentPosition(function(position) { a ...
- Eric6中编译窗体时，弹出提示：无法启动pyuic5的解决方案
用 Eric6 与 PyQt5 结合,非常方便的实现界面与逻辑分离,满足python的极速GUI编程,不需要在界面上花很多时间. 这是一对GUI开发完美的组合! Eric6中设计窗体时,弹出提示:‘无 ...
- wp版笔记本应用源码
今天在那个WP教程网看到了一个不错的项目,简单的记事本,主要是用到的独立存储文件的操作,TimePicker和DatePicker的是用,数据绑定,界面的参考的chanraycode的,主要是锻炼自己 ...
- HTML 引入 CSS、JS 的三种方式
描述部分按 CSS 来的,其实 JavaScript 也一样,具体区别看代码 外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个 ...
- JS 马托货物
大马驮2石粮食,中马驮1石粮食,两头小马驮一石粮食,要用100匹马,驮100石粮食,该如何调配? <!DOCTYPE html> <html> <head> < ...
- 执行opatch apply 报错 OPatch failed with error code 73
.执行opatch apply 报错 OPatch failed [oracle@ora_11g 14275605]$ /opt/oracle/product/db_1/OPatch/opatch a ...