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目录里看到对应的模块目录：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VubnlfZm9yZXZlcg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
2.配置grunt 任务
打开程序文件夹下的Gruntfile.js文件。注冊express和watch任务。
express任务启动express服务器而且执行server.js文件。watch任务监视express任务以及live reload。代码例如以下：
module.exports = function(grunt) {
//config project
grunt.initConfig({
watch: {
options: {
livereload: true,
},
express: {
files: [ 'server.js' ],
options: {
spawn: false
}
}
},
//start express server and run server.js
express: {
options: {
// Override defaults here
},
dev: {
options: {
script: 'server.js'
}
}
}
});
//enable plugins
grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-contrib-watch');
//register task
grunt.registerTask('default', ['express','watch']);
};
3. 主要文件
serve_data.js。server.js和index.html都在程序文件夹下。
index.html用angularjs resource向server上的‘/data’路径发起http请求。
在server.js中定义了路径‘/data’的行为是返回通过serve_data.js文件里的getData()方法获取的data变量。
index.html 的resource收到返回的data后，通过数据绑定{{data}}将其显示在页面上。
三个文件详细代码及凝视例如以下：
index.html:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script
src="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 factory
myApp.factory('DataFac', function($resource) {
//request data from route '/data'
return $resource('data');
}); //define app controller
myApp.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 directly
var 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 构 ...
- Javascript 进阶 面向对象编程 继承的一个样例
Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...
- Nodejs+Grunt配置SASS项目自动编译
Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开 ...
- 使用 AngularJS & NodeJS 实现基于 token 的认证应用
认证是任何Web应用中不可或缺的一部分.在这个教程中,我们会讨论基于token的认证系统以及它和传统的登录系统的不同.这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构建的 ...
- openssl之EVP系列之9---EVP_Digest系列函数的一个样例
openssl之EVP系列之9---EVP_Digest系列函数的一个样例 ---依据openssl doc/crypto/EVP_DigestInit.pod翻译 (作者:Drago ...
- angularjs, nodejs, express, gulp, karma, jasmine 前端方案整合
今年转向做前端开发,主要是做angularjs开发,期间接触了nodejs平台,从此一发不可收拾. npm丰富的插件库,express 开发框架, grunt, gulp构建工具,karma测试管理工 ...
- AngularJS+NodeJS环境搭建
需要安装的软件: node-v0.12.7-x64.msi python-2.7.10.amd64.msi Git-2.5.1-64-bit.exe (注意:Git安装时,需要选择的步骤) 安装位置 ...
- nodejs:grunt使用合并压缩的基本使用
一.模块化历史 1,nodejs出现:主要解决后端js规范 2,commonjs:这个组织出来一些服务器规范 3,后端规范commonjs应用升级到前端commonjs2:cmd规范(seajs)和完 ...
- angularjs+nodejs+mongodb三件套
说实话,自己对于web前段的认识并不是太深入,但是因为项目的需要,所以有的时候肯定会需要接触到web前段的知识点.说到web前端想必大家肯定会想到css+js+html,的确web前端的工作,从某总角 ...
随机推荐
- pycharm 注册 License server方式
在输入框输入以下内容即可:http://idea.yangyusb.com
- AutoCAD 出现“安全系统(软件锁许可管理器)不起作用或未正确安装”的解决方法
感谢高飞鸟提供解决方案.当AutoCAD或自动桌子公司的其它产品在启动过程中突然停电或其它原因造成操作系统重启时,可能会造成这些产品的许可出错而无法再运行.一般出错后第一次进入时,会提示你“产品需要激 ...
- 巧用数据流让 Word 文档在线阅读
常常写博客或空间日记的朋友,对网络编辑器(如图1,是CSDN的博客编辑器)并不陌生.也比較easy做出非常绚烂的排版.但这次在做一个BS的项目,客户一直在用Office的软件中的Wor ...
- PMP杂谈--名词解释
过程:PMP中常常提到过程,好像非常高大上,实则不然,过程说白了就是一系列的行动和活动,用来创建预定的产品,服务或成果. 就这么简单. 再深入点就是,行动和活动当然都会有ITTO(输入,工具和技术.输 ...
- Python 极简教程（十三）while 循环
循环简单来说就是让一段代码按你想要的方式多次运行.软件拥有强大的运算能力,就是由循环提供的. 在 Python 中支持的循环由两种:while 循环 和for 循环. 现在我们先来讲while循环. ...
- 原生js大总结七
061.如何获取父级节点.上一个子级节点.下一个子级节点 nextElementSibling 后一个兄弟元素 (如果没有是null) previousElementSibling ...
- 8.Swift教程翻译系列——控制流之条件
3.条件语句 常常会须要依据不同的情况来运行不同的代码. 你可能想要在错误发生的时候运行一段额外的代码,或者当某个值变得太高或者太低的时候给他输出出来.要实现这些需求,你能够使用条件分支. Swift ...
- 芯片AMS1117 电源芯片
- POJ 3468 A Simple Problem with Integers 线段树区间修改
http://poj.org/problem?id=3468 题目大意: 给你N个数还有Q组操作(1 ≤ N,Q ≤ 100000) 操作分为两种,Q A B 表示输出[A,B]的和 C A B ...
- （转）DOS批处理的字符串功能
批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特定字段.合并字符串.扩充字符串等功能.下面对这些功能一一进 ...