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 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
js实现九宫格布局效果
May 28 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
php5 图片验证码实现代码
2009/12/11 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
关闭时刷新父窗口两种方法
2014/05/07 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
JavaScript类的写法
2016/09/17 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
vue中监听返回键问题
2019/08/28 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
详解javascript脚本何时会被执行
2021/02/05 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python学生管理系统学习笔记
2019/03/19 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
师德师风建设整改措施思想汇报
2014/10/11 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书