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: 提 ...
随机推荐
- 【React Natvie】React-native-swiper的安装和配置【ES6】
react-native-swiper轮播图,是我们开发中特别常见的效果,首先感谢编写react-native-swiper的大神,让我们方便了很多.这个框架主要是用来做轮播图,焦点图等,内置了各种样 ...
- The name ‘InitialzeComponent’ does not exist in the current context
在Visual Studio中创建Windows Store项目,在MainPage.xaml.cs中出现错误: The name 'InitialzeComponent' does not exis ...
- 第5章分布式系统模式 使用客户端激活对象通过 .NET Remoting 实现 Broker
正在 .NET 中构建一个需要使用分布式对象的应用程序,并且分布式对象的生存期由客户端控制.您的要求包括能够按值或按引用来传递对象,无论这些对象驻留在同一台计算 机上,还是驻留在同一个局域网 (LAN ...
- 12) 十分钟学会android--APP通信传递消息之简单数据传输
程序间可以互相通信是Android程序中最棒的功能之一.当一个功能已存在于其他app中,且并不是本程序的核心功能时,完全没有必要重新对其进行编写. 本章节会讲述一些通在不同程序之间通过使用Intent ...
- CSS 三栏布局入门
首先,我是CSS盲[只听说过box model],没动手实践过,关于margin padding只知名称,不明细节.刚看过一叶斋大哥关于css布局的博文,再动手实践,动手记录下点滴积累以备后用. &l ...
- RedHat/CentOS 手动挂载磁盘
#创建挂载目录mkdir /mnt/sdamkdir /mnt/sdbmkdir /mnt/sdcmkdir /mnt/sddmkdir /mnt/sdemkdir /mnt/sdfmkdir /mn ...
- Boost锁~临界区保护和临界资源共享
前言: 除了thread,boost::thread另一个重要组成部分是mutex,以及工作在mutex上的boost::mutex::scoped_lock.condition和barrier,这些 ...
- Angular ui-router的常用配置参数详解
一.$urlRouterProvider服务 $urlRouterProvidfer负责监听$location,当$location变化时,$urlRouterProvider将在规则列表中查找匹配的 ...
- ZBrush细说3D海盗角色的创建艺术
一提到海盗,就不由自主想到了<加勒比海盗>,那个帅得一塌糊涂的杰克船长更是让人夜不能寐寝难安,但在艺术的世界里,角色无美丑,今天我们要讲的这位海盗,就与“帅气”八竿子打不着了,它甚至有点古 ...
- NOIP2016 DAY2 T1 组合数问题
题目描述 组合数表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的定 义,我们可以给出计算 ...