AngularJS DEMO - 不断更新中

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head><title>Angular DEMO 1</title><script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
</head>
<body ng-app ng-init="name='World'" ><h1>Hello,{{name}}!</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>Angular DEMO 2</title><script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
</head>
<body ng-app ng-init="name='World'" >Say hello to : <input type="text" ng-model="name" /><h1>Hello,{{name}}!</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>Angular DEMO 3</title><link type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.css" /><script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script><script type="text/javascript" src="/bower_components/angularjs/angular.js"></script><script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script></head>
<body ng-app="app" ><div ng-controller="HelloCtrl">Say hello to : <input type="text" ng-model="name" /><h1>Hello,{{name}}!</h1><h1>Hello,{{getName()}}!</h1></div><script>angular.module('app', []).controller('HelloCtrl',['$scope',function($scope){$scope.name='World';$scope.getName=function(){return $scope.name;}}]);</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>Angular DEMO 4</title><link type="text/css" rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" /><script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script><script type="text/javascript" src="/bower_components/angularjs/angular.js"></script><script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script><style type="text/css">
.text-warning{color:red;
}</style>
</head>
<body ng-app="app" ><div class="container" ng-controller="Demo4Ctrl"><div class="row"><p>Remaining:<span ng-class="{'text-warning':shoudWarn()}" ng-bind="remain()"></span></p><textarea ng-model="text">{{text}}</textarea> </div><div class="row"><button ng-disabled="!hasValidLength()" class="btn btn-primary" ng-click="send()">Send</button><button class="btn btn-warning" ng-click="clear()">Clear</button></div></div> <script>angular.module('app',[]).controller('Demo4Ctrl',['$scope',function($scope){$scope.text="";var MAX_LENGTH=20;var WARN_THRESHOLD = 5;$scope.remain = function(){return MAX_LENGTH - $scope.text.length;};$scope.hasValidLength=function(){return $scope.text.length<=MAX_LENGTH;};$scope.shoudWarn=function(){return $scope.remain()<WARN_THRESHOLD;}}]);</script>
</body>
</html>

tips：

本文由wp2Blog导入，原文链接：http://devonios.com/index.html

转载于:https://my.oschina.net/yangyan/blog/859447

AngularJS DEMO - 不断更新中相关推荐

.NET Core微服务之路：不断更新中的目录 (v0.42)
原文:.NET Core微服务之路:不断更新中的目录 (v0.42) 微服务架构,对于从事JAVA架构的童鞋来说,早已不是什么新鲜的事儿,他们有鼎鼎大名的Spring Cloud这样的全家桶框架支撑, ...
阿里最新面试必备项之Java的String类，持续更新中！
最新腾讯面试必备项之Java的String类,持续更新中! 1.1 String的特性 String类:代表字符串.Java程序中的所有字符串字面值(如"abc")都作为此类的实例 ...
微信小程序-仿淘宝(附真机测试图)（持续更新中。。。）
醉前端微信小程序已开始公测, 醉前端的开发热情依然不减... 这是仿手机淘宝做的微信小程序,目的在于享受开发,学习小程序,欢迎大家批评指正. demo资源地址:demo gihub传送门 tip: ...
JAVA面试大全(持续更新中...)
本文旨在收集Java面试过程中出现的问题,力求全面,仅作学习交流,欢迎补充,持续更新中-,部分段落选取自网上,部分引用文章已标注,部分已记不清了,如侵权,联系本人 Java基础 1.面向对象的概述面 ...
前端MUI+H5+HBuilderX开发APP（IOS，android），后台Springboot,java学习与实践文章，更新中（二）
前端MUI+H5+HBuilderX开发APP(IOS,android),后台Springboot,项目搭建,图标设置等,更新中(二) 新建我的第一个APP manifest.json: 图标设置: ...
【Vue全家桶+SSR+Koa2全栈开发】项目搭建过程整合学习目录（持续更新中）
写在开头大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看所有前端知识点梳理,github传送门 ...
最实用的微信小程序大全，持续更新中...
最全的小程序开发教程,点击下载掘金App. 小程序上线 1月9日,张小龙没有食言,微信小程序如约而至.凌晨刚过,我们便在微信发现页看到了小程序的入口. 微信发现页之后的一个小时里,每个微信群都在疯狂 ...
根据Spring-Security安全框架搭建问答论坛系统(更新中.....)
论坛问答系统系统设计与实现什么是Spring安全框架为什么需要Spring-Security 启动Spring-Security 访问控制器方法密码加密 Spring-Security的权限管理 ...
嵌入式相关开源项目、库、资料------持续更新中
学习初期最难找的就是找学习资料了,本贴精心汇总了一些嵌入式相关资源,包括但不限于编程语言.单片机.开源项目.物联网.操作系统.Linux.计算机等资源,并且在不断地更新中,致力于打造全网最全的嵌入式资 ...

AngularJS DEMO - 不断更新中

AngularJS DEMO - 不断更新中相关推荐

最新文章

热门文章