AngularJS 启程二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body ng-app="uniqApp">
<div ng-controller="firstCtr">
<p>{{123}}</p>
<p>{{param}}</p>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('uniqApp',[])
.controller('firstCtr',['$scope',function(a){
a.param='abc';
}])
</script></body>
</html>
angular 第一个完整小例子
<!DOCTYPE html>
<html>
<head></head>
<body ng-app="uniqApp">
<div ng-controller="firstCtrl">
<p>{{123}}</p>
<p>{{param}}</p>
</div>
<div ng-controller="secondCtrl">
<p>{{param}}</p>
</div> <script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('uniqApp',[])
.controller('firstCtrl',['$scope',function($scope){
$scope.param='abc';
}])
.controller('secondCtrl',['$scope',function(foo){
foo.param='bar';
}]);
</script>
</body>
</html>
例子二
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}]);
</script>
</body> </html>
例子三
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价（手动）</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}]);;
</script>
</body> </html>
例子四
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价(自动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价(手动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<div ng-controller="repeatCtrl">
<ul>
<li ng-repeat="person in persons">
{{person.userName+'-------'+person.age}}
</li>
</ul>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}])
.controller('repeatCtrl',['$scope',function(repeatScope){
repeatScope.persons=[{userName: 'kobe',age : 39},
{userName: 'kobe2',age : 39},
{userName: 'kobe3',age : 39},
{userName: 'kobe4',age : 39},
{userName: 'kobe5',age : 39},
{userName: 'kobe6',age : 39},
{userName: 'kobe7',age : 39}
]
}]);
</script>
</body> </html>
例子四加入遍历
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价(自动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价(手动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<div ng-controller="repeatCtrl">
<ul>
<li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
</li>
</ul>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}])
.controller('repeatCtrl',['$scope',function(repeatScope){
repeatScope.persons=[{userName: 'kobe',age : 39},
{userName: 'kobe2',age : 39},
{userName: 'kobe3',age : 39},
{userName: 'kobe4',age : 39},
{userName: 'kobe5',age : 39},
{userName: 'kobe6',age : 39},
{userName: 'kobe7',age : 39}
]
}]);
</script>
</body> </html>
例子五看看其他index,even,odd作用
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价(自动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价(手动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<div ng-controller="repeatCtrl">
<ul>
<li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
</li>
</ul>
</div>
<div ng-controller="toggleCtrl">
<p ng-show="isTrue" ng-bind="param"></p>
<p ng-hide="isTrue" ng-bind="param2"></p>
<button ng-click="switchToggle()">切换按钮</button>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}])
.controller('repeatCtrl',['$scope',function(repeatScope){
repeatScope.persons=[{userName: 'kobe',age : 39},
{userName: 'kobe2',age : 39},
{userName: 'kobe3',age : 39},
{userName: 'kobe4',age : 39},
{userName: 'kobe5',age : 39},
{userName: 'kobe6',age : 39},
{userName: 'kobe7',age : 39}
]
}])
.controller('toggleCtrl',['$scope',function(toggleScope){
toggleScope.isTrue=true;
toggleScope.param='这是真的';
toggleScope.param2='这是假的';
toggleScope.switchToggle=function(){
toggleScope.isTrue=!toggleScope.isTrue;
}
}])
;
</script>
</body> </html>
指令大集合，ng-bind,ng-show,ng-hide
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title>
<style>
.oddClass{
background:red;
}
.evenClass{
background:green;
}
</style>
</head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价(自动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价(手动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<div ng-controller="repeatCtrl">
<ul>
<li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
</li>
</ul>
</div>
<div ng-controller="toggleCtrl">
<p ng-show="isTrue" ng-bind="param"></p>
<p ng-hide="isTrue" ng-bind="param2"></p>
<button ng-click="switchToggle()">切换按钮</button>
<div style="width:180px;height:200px;" ng-mouseenter="enter()" ng-mouseleave="leave()" ng-style="eventStyle"></div>
<ul>
<li ng-class="{oddClass:$odd,evenClass:$even}" ng-repeat="person in persons" ng-bind="{{person.userName+'---------'+person.age}}">
</li>
</ul>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}])
.controller('repeatCtrl',['$scope',function(repeatScope){
repeatScope.persons=[{userName: 'kobe',age : 39},
{userName: 'kobe2',age : 39},
{userName: 'kobe3',age : 39},
{userName: 'kobe4',age : 39},
{userName: 'kobe5',age : 39},
{userName: 'kobe6',age : 39},
{userName: 'kobe7',age : 39}
]
}])
.controller('toggleCtrl',['$scope',function(toggleScope){
toggleScope.isTrue=true;
toggleScope.param='这是真的';
toggleScope.param2='这是假的';
toggleScope.switchToggle=function(){
toggleScope.isTrue=!toggleScope.isTrue;
}
toggleScope.persons=[{userName:'tom',age:40},
{userName:'tom2',age:40},
{userName:'tom3',age:40},
{userName:'tom4',age:40},
{userName:'tom5',age:40}
];
toggleScope.eventStyle={background:'red'};
toggleScope.enter=function(){
toggleScope.eventStyle={background:'green'}
}
toggleScope.leave=function(){
toggleScope.eventStyle={background:'red'}
}
}])
;
</script>
</body> </html>
ng-class,ng-style,ng-mouseenter,ng-mouseleave
AngularJS 启程二的更多相关文章
- AngularJS进阶(二十七)实现二维码信息的集成思路
AngularJS实现二维码信息的集成思路 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,与君共勉! 注:点击此处进行知识充电 ...
- angularjs（二）模板终常用的指令的使用方法
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- angularJS 服务二
$http服务 一 介绍 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据.我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏 ...
- 媲美jQuery的JS框架----AngularJS（二）
前言 对于AngularJS什么,小编在这就不多做介绍了.大家可以看小编的上一篇博客. 言归正传,小编在上一篇博客中介绍了AngularJS中的指令.表达式还有非常实用的三种服务.接下来,带大家看一看 ...
- AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储
AngularJS项目开发技巧之localStorage存储 注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...
- angularJS（二）：作用域$scope、控制器、过滤器
app.controller创建控制器 一.作用域 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. ...
- AngularJs之二
今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl"> < ...
- angularjs笔记(二)
AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...
随机推荐
- Asp.Net_优化
ASP.NET: 一.返回多个数据集 检查你的访问数据库的代码,看是否存在着要返回多次的请求.每次往返降低了你的应用程序的每秒能够响应请求的次数.通过在单个数据库请求中返回多个结果集,可以减少与数据库 ...
- Nginx 配置高可用
阅读本文需要安装Nginx 一 什么是高可用 nginx作为负载均衡服务器 所有请求都到了nginx 可见nginx处于非常重要的位置 如果nginx服务器宕机 后端web服务器将无法提供服务 影响严 ...
- ctf入门常见类别
原视频在这里:实验吧-名师指导http://www.shiyanbar.com/course-video/watch-video/cid/419/vid/2000网络安全从业者尝试介绍 web应用渗透 ...
- MongoDB作为Windows服务来安装 错误1053：服务没有及时响应启动或控制请求
这个问题我解决了一晚上,用尽了所有百度 博客上的方法,都是失败的 结果重新换了一种安装的方法 视频讲解 非常清楚 https://www.bilibili.com/video/av31240330? ...
- linux内核分析第一次实验
http://blog.sina.com.cn/s/blog_78e559950102wneg.html
- 搭建ZooKeeper
从http://zookeeper.apache.org/ 官网上下载最新的zookeeper版本, 我下载的版本是 zookeeper-3.4.6.tar.gz, 解压: 配置conf/zoo.cf ...
- 《当大数据遇见网络：大数据与SDN》
总体结构: <当大数据遇见网络:大数据与SDN> 摘要 大数据和SDN无论是对于学术界还是工业界来说都极具吸引力.传统上人们都是分别在最前沿工作中研究这两个重要的领域.然而一方面,SDN的 ...
- PAT 甲级 1117 Eddington Number
https://pintia.cn/problem-sets/994805342720868352/problems/994805354762715136 British astronomer Edd ...
- Mybatis 从入门到精通一：mybatis的入门
1.Mybatis简介 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation(阿帕奇软件基金会) 迁移到了google ...
- 什么是Asp.net Core？和 .net core有什么区别？
为什么要写这篇文章 写这篇文章有两个原因,第一个是因为新站点创建出来后一直空置着,所以写一篇文章放在这里.第二就是因为近来在做一些基于Asp.net core平台的项目开发,也遇到了一些问题,正好趁此 ...