再次实操一次angular的基本语法
URL：
https://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/?utm_source=javascriptweekly&utm_medium=email
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="js/lib/angular.min.js"></script>
<script >
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', 'Math', function($scope, Math) {
var a = 12;
var b = 24;
$scope.myModel = '';
$scope.result = Math.multiply(a, b);
$scope.greeting = 'Todd Motto';
$scope.numbers = [10, 25, 35, 45, 60, 80, 100];
$scope.lowerBound = 42;
$scope.greaterThanNum = function(item) {
return item > $scope.lowerBound;
};
$scope.user = {};
$scope.user.details = {
"username": "Todd Motto",
"id": "89101112"
};
}]);
myApp.directive('customButton', function() {
return {
restrict: 'A',
replace: true,
transclude: true,
templateUrl: 'templates/customButton.html',
link: function (scope, element, attrs) {
//dom mani/event
}
};
});
myApp.service('Math', function() {
this.multiply = function(x, y) {
return x * y;
};
});
myApp.filter('reverse', function() {
return function(input, uppercase) {
var out = '';
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
if (uppercase) {
out = out.toUpperCase();
}
return out;
}
});
myApp.controller('EmailsCtrl', ['$scope', function($scope) {
$scope.emails = {};
$scope.emails.messages = [{
"from": "Steve Jobs",
"subject": "I think I'm holding my phone wrong :/",
"sent": "2013-10-01T08:05:59Z"
},{
"from": "Ellie Goulding",
"subject": "I've got Starry Eyes, lulz",
"sent": "2013-09-21T19:45:00Z"
},{
"from": "Michael Stipe",
"subject": "Everybody hurts, sometimes.",
"sent": "2013-09-12T11:38:30Z"
},{
"from": "Jeremy Clarkson",
"subject": "Think I've found the best car... In the world",
"sent": "2013-09-03T13:15:11Z"
}];
$scope.deleteEmail = function(index) {
$scope.emails.messages.splice(index, 1);
};
$scope.main = {};
$scope.main.test1 = [];
$scope.main.test2 = [{"some": "data"}];
}]);
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
welcome, {{ user.details.username}}.<br>
user ID: {{ user.details.id }}<br>
{{result}}<br>
<a custom-button>Click Me</a><br>
no filter: {{greeting}}<br>
Reverse: {{greeting|reverse}}<br>
<input type="text" ng-model="lowerBound" /><br>
<li ng-repeat="number in numbers|filter: greaterThanNum">
{{number}}
</li><br>
<input type="text" ng-model="myModel" placeholder="Start typing..." />
<p>My model data: {{ myModel }} </p>
</div>
<div ng-controller="EmailsCtrl">
<ul>
<li ng-repeat="message in emails.messages">
<p>{{ message.index }}</p>
<p>From: {{ message.from }}</p>
<p>Subject: {{ message.subject }}</p>
<p>{{message.sent|date:'MMM d, y h:mm:ss a'}}</p>
<p><a ng-click="deleteEmail($index)">Delete email</a></p>
</li>
</ul>
<p>Test 1: {{ main.test1.length > 0 && 'My data' || 'No data' }}</p>
<p>Test 2: {{ main.test2.length > 0 && 'My data' || 'No data' }}</p>
</div>
<a href="" ng-click="toggle = !toggle">Toggle nav</a>
<ul ng-show="toggle">
<li>Link 1</li>
<li>Link 2</li>
<li>Kub 3</li>
</ul>
</div>
</body>
</html>
再次实操一次angular的基本语法的更多相关文章
- 新硬盘挂载-fdisk+mount案例实操
新硬盘挂载-fdisk+mount案例实操 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 现在很多服务器都支持热插拔了,当有新的硬盘插入到服务器上我们需要将其分区,格式化,然后挂载 ...
- linux基础实操四
实操一: 1)为新加的硬盘分区,一个主分区大小为10剩余空间给扩展分区,在扩展分区上划分2个逻辑分别为5G 2)式化主分区为ext3系统 #mkfs.ext3 /dev/sdb1 3 将逻辑分区设置为 ...
- 【Social listening实操】作为一个合格的“增长黑客”，你还得重视外部数据的分析！
本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 在本文中,作者引出了"外部数据"这一概 ...
- （二）Linux实操之——网络配置、进程管理、服务管理、组管理、YUM
接上段 (一)Linux实操之——权限.任务调度.磁盘分区 4.网络配置 4.1 NAT模式的网络配置 目前我们采用的网络配置是NAT模式. windows下cmd通过 ipconfig 命令可以 ...
- 大数据学习笔记——Linux完整部署篇(实操部分)
Linux环境搭建完整操作流程(包含mysql的安装步骤) 从现在开始,就正式进入到大数据学习的前置工作了,即Linux的学习以及安装,作为运行大数据框架的基础环境,Linux操作系统的重要性自然不言 ...
- css知识笔记：水平垂直居中（别只看，请实操！！！）
css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...
- css知识笔记：垂直居中（别只看，请实操！！！）
css实现元素的垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...
- css知识笔记：水平居中（别只看，请实操！！！）
css实现元素的水平居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...
- 干货 | 京东云应用负载均衡（ALB）多功能实操
应用负载均衡(Application Load Balancer,简称ALB)是京东云自主研发的一款七层负载均衡产品,主要面向HTTP和HTTPS流量的WEB应用程序,提供灵活的功能配置.应用负载均衡 ...
随机推荐
- 大数据分析与机器学习领域Python兵器谱
http://www.thebigdata.cn/JieJueFangAn/13317.html 曾经因为NLTK的缘故开始学习Python,之后渐渐成为我工作中的第一辅助脚本语言,虽然开发语言是C/ ...
- tcp MSL
MSL(最大分段生存期)指明TCP报文在Internet上最长生存时间,每个具体的TCP实现都必须选择一个确定的MSL值.RFC 1122建议是2分钟. TIME_WAIT 状态最大保持时间是2 * ...
- iOS 用instancetype代替id作返回类型有什么好处？
2014-07-07更新:苹果在iOS 8中全面使用instancetype代替id Steven Fisher:只要一个类返回自身的实例,用instancetype就有好处. @interface ...
- HDU 2204 Eddy's爱好（容斥原理）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2204 解题报告:输入一个n让你求出[1,n]范围内有多少个数可以表示成形如m^k的样子. 不详细说了, ...
- 在VMware上面安装Solaris 10
导读 Oracle Solaris 11 是世界上最先进的企业操作系统,提供安全.速度.简单的企业云环境和DevOps.在这篇文章中我们将使用Solaris 10版本,但您可以按照同样的步骤,来安装刚 ...
- ios开发者到真机测试
ios就是矫情, 没事搞那么多步奏, 搞得我都不会弄了, 不懈努力后还是弄好了, 总结一下, 避免新人走弯路. 苹果的脾气就是这样, 只能慢慢学了 1. 生成CSR (开发者证书认证请求) 打开钥匙 ...
- hiho一下第91周《Events Arrangement》（前半部分）
题目大意 现在有一场持续时间为M的游乐会,在游乐会上有N种不同的表演节目,同一时间只能有一个节目进行表演. 每种节目最多可以表演K次,且每种节目具有自己的三个属性值a[i],b[i],c[i]. 当一 ...
- nginx（三）初步搭建nginx虚拟主机
上面就是nginx基于域名.ip访问的配置,掌握住格式,就很好配置了. 一.基于域名的虚拟主机的配置:1.我们在此复习一下DNS的配置:[root@mgmserver /]# hostnamemgms ...
- 【系统】CentOS、Ubuntu、Debian三个linux比较异同
CentOS.Ubuntu.Debian三个linux比较异同 2014-07-31 12:58 53428人阅读 评论(6) ...
- 跨域请求获取Solr json检索结果并高亮显示
Solr提供了json格式的检索结果,然而在跨域的情况下如何调用呢?我们可以利用jquery提供的jsonp的方式获取Solr检索结果. <script type="text/java ...