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 Validation里默认的验证方法
Feb 14 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
js实现产品缩略图效果
Mar 10 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP的加密方式及原理
2012/06/14 PHP
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python+opencv实现动态物体识别
2018/01/09 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
Python内存读写操作示例
2018/07/18 Python
Python 读写文件的操作代码
2018/09/20 Python
如何基于python实现脚本加密
2019/12/28 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
经贸专业毕业生求职信
2014/03/23 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
百家讲坛观后感
2015/06/12 职场文书
党校团干班培训心得体会
2016/01/06 职场文书