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 相关文章推荐
JS获取select的value和text值的简单实例
Feb 26 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
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读取IMAP邮件
2006/10/09 PHP
用Flash图形化数据(二)
2006/10/09 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
php无序树实现方法
2015/07/28 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python操作MongoDB数据库的方法示例
2018/01/04 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
vue项目实现分页效果
2021/03/24 Vue.js
新品发布会策划方案
2014/06/08 职场文书
孔子观后感
2015/06/08 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL