Angular+Node生成隨機數(shù)的方法
本文實例講述了Angular+Node生成隨機數(shù)的方法。分享給大家供大家參考,具體如下:
以前寫過一個PHP生成隨機數(shù),然后jquey ajax獲取,再jQuery改變文本的隨機數(shù)的程序
現(xiàn)在用Angular 和 Node來重寫一下
Angular的好處是雙向綁定,這樣直接設(shè)置變量,不用再重新設(shè)置了
Node的好處我目前還不是很理解,可以通過count這個例子來說明一下Node和PHP的不同之處
當(dāng)然了,最大的好處就是,前后端都可以用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這時必須要用的
然后就是生成一個隨機數(shù)了,關(guān)鍵是count這個變量,后面執(zhí)行的時候每訪問一次,它都不一樣,說明Node是常駐內(nèi)存的,不想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:這里再為大家提供兩款功能類似的在線工具供大家參考:
在線隨機數(shù)字/字符串生成工具:
http://tools.jb51.net/aideddesign/suijishu
高強度密碼生成器:
http://tools.jb51.net/password/CreateStrongPassword
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
AngularJS在$scope變量中使用臟值檢查來實現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動態(tài)設(shè)施setter和getter不同,臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。2015-09-09
Angularjs中如何使用filterFilter函數(shù)過濾
這篇文章主要介紹了Angularjs中如何使用filterFilter函數(shù)過濾的相關(guān)資料,需要的朋友可以參考下2016-02-02
詳解Angular-cli生成組件修改css成less或sass的實例
這篇文章主要介紹了詳解Angular-cli生成組件修改css成less或sass的實例的相關(guān)資料,這里主要講解修改angular-cli.json文件,生成css或者less,需要的朋友可以參考下2017-07-07
詳解AngularJs路由之Ui-router-resolve(預(yù)加載)
本篇文章主要介紹了詳解AngularJs路由之Ui-router-resolve(預(yù)加載),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06

