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 相关文章推荐
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
JS中min函数实例讲解
Feb 18 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 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
Snoopy类使用小例子
2008/04/15 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
毕业生个人求职的自我评价
2013/10/28 职场文书
理工科学生的自我评价
2013/12/15 职场文书
公司活动邀请函
2014/01/24 职场文书
公司管理建议书范文
2014/03/12 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
意向书范文
2014/03/31 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
趣味运动会标语口号
2015/12/26 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL