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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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/12/25 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
event.srcElement+表格应用
2006/08/29 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python3 处理JSON的实例详解
2017/10/29 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
解决python 找不到module的问题
2020/02/12 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
医药工作岗位求职信分享
2013/12/31 职场文书
党员的自我评价范文
2014/01/02 职场文书
法人代表授权委托书
2014/04/08 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
党员志愿者活动方案
2014/08/28 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
个人政治思想总结
2015/03/05 职场文书
法人代表资格证明书
2015/06/18 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS