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将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
vue指令做滚动加载和监听等
May 26 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
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
koa-router源码学习小结
2018/09/07 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
详细探究Python中的字典容器
2015/04/14 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python 列表降维的实例讲解
2018/06/28 Python
python调试神器PySnooper的使用
2019/07/03 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
总裁助理岗位职责
2014/02/17 职场文书
优秀家长事迹材料
2014/05/17 职场文书
医德医风演讲稿
2014/05/20 职场文书
西岭雪山导游词
2015/02/06 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL