Angular+Node生成随机数的方法


Posted in Javascript onJune 16, 2017

本文实例讲述了Angular+Node生成随机数的方法。分享给大家供大家参考,具体如下:

以前写过一个PHP生成随机数,然后jquey ajax获取,再jQuery改变文本的随机数的程序

现在用Angular 和 Node来重写一下

Angular的好处是双向绑定,这样直接设置变量,不用再重新设置了

Node的好处我目前还不是很理解,可以通过count这个例子来说明一下Node和PHP的不同之处

当然了,最大的好处就是,前后端都可以用JavaScript来写了,这样的话Javascript的水平就会大幅提高!

Node

app.js

var express = require('express');
var app = express();
var count = 0;
app.get('/', function (req, res) {
 res.header('Access-Control-Allow-Origin', '*');
 var x = Math.floor(Math.random() * 1e6);
 res.send(String(x));
 console.log(count++);
});
app.listen(3000, function () {
 console.log('Example app listening on port 3000!');
});
res.header('Access-Control-Allow-Origin', '*');

这个涉及到跨域的问题,加上这句话就不是本地的也能访问了,以后要做hybrid APP这时必须要用的
然后就是生成一个随机数了,关键是count这个变量,后面执行的时候每访问一次,它都不一样,说明Node是常驻内存的,不想PHP,加载完了事

Angular

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 <div ng-app="myApp" ng-controller="customersCtrl">
  {{names}}
  <button ng-click="myClick()">获取签到码</button>
 </div>
 <script>
  var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $scope.myClick = function(){
  $http.get("http://localhost:3000").success(function (response) {$scope.names = response;});
 }
});
 </script>
</body>
</html>

有一些概念:

module

ng-app 模块,目前的理解是模块化

Controller

ng-controller 控制器 是个 对象
对象包含成员,用$scope访问

Javascript 相关文章推荐
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
js中switch case循环实例代码
Dec 30 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 #Javascript
vue高德地图之玩转周边
Jun 16 #Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 #Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 #Javascript
vue之数据交互实例代码
Jun 16 #Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
php数组指针操作详解
2017/02/14 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
JavaScript 异步调用
2017/10/25 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python numpy 按行归一化的实例
2019/01/21 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
自荐书封面下载
2013/11/29 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
体育个人工作总结
2015/02/09 职场文书
甲午大海战观后感
2015/06/02 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL