angularjs事例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Guess The Number !</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>

<body ng-app="app">
<div class="container" ng-controller="GuessTheNumberController">
<h2>猜数字 !</h2>
<p class="well lead">请猜出电脑生成的随机数,它的范围在1到1000之间.</p>
<label>请您出手: </label><input type="number" ng-model="guess"/>
<button ng-click="verifyGuess()" class="btn btn-primary btn-sm">确定</button>
<button ng-click="initializeGame()" class="btn btn-warning btn-sm">重来</button>
<p>
<p ng-show="deviation<0" class="alert alert-warning">爷,您出价过高了!</p>
<p ng-show="deviation>0" class="alert alert-warning">爷,少了点,再加点,再加点.</p>
<p ng-show="deviation===0" class="alert alert-success">爷,还真让您说准了!.</p>
</p>
<p class="text-info">您猜过的次数是 : <span class="badge">{{numOfTries}}</span><p>
</div>
<script src="angular.js"></script>
<script type="text/javascript">
angular.module(‘app‘,[])
.controller(‘GuessTheNumberController‘, GuessTheNumberController);

function GuessTheNumberController($scope) {
$scope.verifyGuess = function () {
$scope.deviation = $scope.originalVal - $scope.userGuess;
$scope.numOfTries = $scope.numOfTries + 1;
}
$scope.initializeGame=function() {
$scope.numOfTries = 0;
$scope.originalVal = Math.floor((Math.random() * 1000) + 1);
$scope.userGuess = null;
$scope.deviation = null;
}
alert("1");
}
</script>
</body>
</html>

时间: 2024-10-26 10:31:38

angularjs事例的相关文章

如何将angularJs项目与requireJs集成

关于angularjs.requirejs的基础知识请自行学习 一.简单事例的项目目录如下: -index.html -scripts文件夹 --controller文件夹 --- mianController.js --- controller1.js ---controller2.js --directives文件夹 ---mainDirective.js ---directive.js --app.js --router.js --main.js 二.首页 首先你的index.html大概

angularJS和requireJS和angularAMD

最近因为要用到angularJS开发项目,因为涉及到的静态资源比较多,所以想把js文件通过requireJS来按需加载,这两个框架以前都使用过,但是结合到一起还没有用过,那就试一下,看能否达到目的. requireJS是为了实现js文件异步加载和管理模块之间依赖性的框架,详情请看阮一峰 require.js的用法和RequireJS 中文网这里就不做介绍了. 我们先来创建模版容器index.html <!DOCTYPE html> <html> <head> <t

[转]AngularJs 多语言的使用 angular-translate

本文转自:http://www.tuicool.com/articles/zeymimB 随着世界各地Web访问量的增加,作为开发者的我们也在不断让应用国际化.本地化.当用户访问我们的应用时,他应该能够在运行时立即切换语言环境. 鉴于我们正在开发的是AngularJS客户端应用,尤其不希望用户必须刷新页面或者访问一个完全不同的URL.当然,AngularJS可以很容易地调整那些国际化读者的本机语言环境,或许通过为不同语言生成不同模板的方式为应用提供服务. 然而,这个过程可能会很麻烦,当我们想要改

AngularJS与RequireJS集成方案

关于angularjs.requirejs的基础知识请自行学习 一.简单事例的项目目录如下: -index.html -scripts文件夹 --controller文件夹 --- mianController.js --- controller1.js ---controller2.js --directives文件夹 ---mainDirective.js ---directive.js --app.js --router.js --main.js 二.首页 首先你的index.html大概

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如