本文實例講述了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訪問
PS:這裡再為大家提供兩款功能類似的在線工具供大家參考:
在線隨機數字/字符串生成工具:
http://tools.jb51.net/aideddesign/suijishu
高強度密碼生成器:
http://tools.jb51.net/password/CreateStrongPassword