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前端的工作,从某总角 ...
随机推荐
- C# 反射基础运用
反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型 (包括类.结构.委托.接口和枚举等)的成员和成员的信息. 其实有些人会问, 像我们平常引用DLL可以直接用, 为什么要用 ...
- 洛谷 P1480 A/B Problem
P1480 A/B Problem 题目描述 输入两个整数a,b,输出它们的商(a<=10^5000,b<=10^9) 输入输出格式 输入格式: 两行,第一行是被除数,第二行是除数. 输出 ...
- 洛谷 P2873 [USACO07DEC]泥水坑Mud Puddles
P2873 [USACO07DEC]泥水坑Mud Puddles 题目描述 Farmer John is leaving his house promptly at 6 AM for his dail ...
- C++ 学习路线推荐
相信有非常大一部分学计算机的童鞋都是靠自学,即使本身是计算机专业的同学,也会认为只通过课堂上的学习是远远不够的,并且在上课时所用到的教材也不够好.然而自学的时候有个非常大的问题就是找不到合适的 ...
- 【例 7-12 UVA - 1343】The Rotation Game
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 每次抽动操作最多只会让中间那一块的区域离目标的"距离"减少1. 以这个作为剪枝. 枚举最大深度. ...
- HttpWatch--简介及使用技巧
一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...
- 很安逸的离线API文档查询工具Dash和Zeal
大家开发的时候难免会查询一些文档,看一下API的调用方法等,所以会不同的语言去某一个地方去找,确实很麻烦,今天给大家安逸两款软件,肯定会让你爱不释手! Dash for macOS 官方地址:http ...
- C#中lock
http://www.cnblogs.com/apsnet/archive/2012/07/08/2581475.html
- express 学习笔记（一）路由
先导入express: var express = require('express'); var app = express(); 1.路由方法: get, post, put, head, del ...
- LA 5713 - Qin Shi Huang's National Road System(HDU 4081) MST
LA:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...