Angularjs Nodejs Grunt 一个例子

做了一个简单的示例，目的是记录环境配置以及这套框架的结构流程。

1.配置环境

默认nodejs已安装。

安装以下模块：express（nodejs框架）,grunt（javascript task runner）,grunt-contrib-watch（grunt live load插件）,grunt-express-server（grunt启动express服务端插件）。

命令行中进入程序目录，依次输入以下命令：

npm install express 回车

npm install grunt 回车

npm install grunt-contrib-watch 回车

npm install grunt-express-server 回车

安装成功后，可以在程序目录中的node_modules文件夹里看到相应的模块文件夹：

2.配置grunt 任务

打开程序目录下的Gruntfile.js文件，注册express和watch任务。

express任务启动express服务器并且运行server.js文件。watch任务监视express任务以及live reload。代码如下：

module.exports = function(grunt) {//config projectgrunt.initConfig({watch: {options: {livereload: true,},express: {files:  [ 'server.js' ],options: {spawn: false}}},//start express server and run server.jsexpress: {options: {// Override defaults here},dev: {options: {script: 'server.js'}}}});//enable pluginsgrunt.loadNpmTasks('grunt-express-server');grunt.loadNpmTasks('grunt-contrib-watch');//register taskgrunt.registerTask('default', ['express','watch']);
};

3. 主要文件

serve_data.js，server.js和index.html都在程序目录下。

index.html用angularjs resource向服务器上的‘/data’路径发起http请求。

在server.js中定义了路径‘/data’的行为是返回通过serve_data.js文件中的getData()方法获取的data变量。

index.html 的resource收到返回的data后，通过数据绑定{{data}}将其显示在页面上。

三个文件具体代码及注释如下：

index.html:

<!DOCTYPE html>
<html>
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="myApp" ng-controller=MainCtrl><div>{{data}}</div><script>var myApp = angular.module('myApp', [ 'ngResource' ]);//define app factorymyApp.factory('DataFac', function($resource) {//request data from route '/data'return $resource('data');});//define app controllermyApp.controller('MainCtrl', function($scope, DataFac) {DataFac.get(function(response) {$scope.data = response;})});</script>
</body>
</html>

server.js:

//use express
var express = require('express');
var app = express();//require file serve_data.js to use its exported modules
var instance=require('./serve_data.js')
var data=instance.getData();//define route
app.get('/data',function(req,res){res.send(data);
});//serve static index.html as default
app.use(express.static(__dirname + '/'));//bind and listen for connections on the given host and port
app.listen(9001,function(){console.log('Server listening on',9001)
})

serve_data.js:

//export funtion getData
module.exports={getData:function(){//data can be fetched from a database or a file and so on. Here for simplicity,provide json data directlyvar data={"widget": {"debug": "on","window": {"title": "Sample Widget","name": "main_window","width": 500,"height": 500},"image": { "src": "Images/test.png","hOffset": 250,"vOffset": 250,"alignment": "center"},"text": {"data": "Click Here","size": 36,"style": "bold","name": "text1","hOffset": 250,"vOffset": 100,"alignment": "center"}}} ;return data;}
}

4.运行程序

在命令行中进入程序目录，输入grunt运行grunt任务。打开浏览器进入http://localhost:9001/ ，得到以下结果：

Angularjs Nodejs Grunt 一个例子相关推荐

使用 AngularJS NodeJS 实现基于token 的认证应用（转）
认证是任何 web 应用中不可或缺的一部分.在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同.这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构 ...
AngularJS介绍 - 下一个大框架
AngularJS AngularJS是web应用的下一个巨头. AngularJS如果为创建web应用而设计,那它就是HTML的套路了.具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明 ...
用nodejs写一个简易小爬虫
今天突然心血来潮,不如我用nodejs写一个小爬虫吧,nodejs说实话,自从它出生以来,就变成了前端的福音了,我也是一直想学,也曾经自己研究过一段时间,可是我没用到过项目上,爬虫也没写过,我就上网看 ...
[asp.net core]SignalR一个例子
摘要在一个后台管理的页面想实时监控一些操作的数据,想到用signalR. 一个例子 asp.net core+signalR 使用Nuget安装包:Microsoft.AspNetCore.Sign ...
R语言使用lm构建线性回归模型、并将目标变量对数化（log10）实战：可视化模型预测输出与实际值对比图、可视化模型的残差、模型预测中系统误差的一个例子、自定义函数计算R方指标和均方根误差RMSE
R语言使用lm构建线性回归模型.并将目标变量对数化(log10)实战:可视化模型预测输出与实际值对比图.可视化模型的残差.模型预测中系统误差的一个例子 .自定义函数计算R方指标和均方根误差RMSE 目 ...
python中self_一个例子带你入门Python装饰器
============ 欢迎关注我的公众号:早起python ============ 前言在还未正式发布的python3.9中,有一个新功能值得关注,那就是任意表达式可以作为装饰器,如果你还不知 ...
ftp服务器文件备份,数据备份是十分重要的，下面是通过ftp将本机数据备份到远程服务器的一个例子...
数据备份是十分重要的,下面是通过ftp将本机数据备份到远程服务器的一个例子以备份oracle数据为例本机IP:192．168．0．1 远程IP:192．168．0．111 备份脚本 ora_bak ...
Bootice1.34版本把grub4dos0.46a写入硬盘MBR失败一个例子
Bootice1.34版本把grub4dos0.46a写入硬盘MBR失败一个例子一个同事的台式机,BIOS启动,500GB硬盘,分了四个MBR分区,C盘是激活的主分区,第二个分区50 ...
用一个例子告诉你gdb调试工具如何使用
用GDB调试程序 GDB概述 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面方式 ...

Angularjs Nodejs Grunt 一个例子

Angularjs Nodejs Grunt 一个例子相关推荐

最新文章

热门文章