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同时提交多个Web表单的方法
Dec 26 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
JavaScript中DOM详解
Apr 13 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
详解VUE 数组更新
Dec 16 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
Vue开发环境跨域访问问题
Jan 22 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
信用卡效验程序
2006/10/09 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
python进阶教程之异常处理
2014/08/30 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
python获取list下标及其值的简单方法
2016/09/12 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
python类共享变量操作
2020/09/03 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
工程项目经理任命书
2014/06/05 职场文书
视光学专业自荐信
2014/06/24 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL