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前端的工作,从某总角 ...
随机推荐
- element-UI 表单校验失效处理
1.el-form-item 的 prop属性绑定的要是字符串: eg: :prop="'answer[' + 0 + ']' " //而不是 :prop=&qu ...
- Codeforces 559A Gerald's Hexagon 数三角形
题意:按顺序给出一个各内角均为120°的六边形的六条边长,求该六边形能分解成多少个边长为1的单位三角形. 把单位三角形面积看做1,实际上就是求六边形面积.随便找六边形的三条互相不相邻的边,分别以这三条 ...
- 洛谷 P2790 ccj与zrz之积木问题
P2790 ccj与zrz之积木问题 题目背景 ccj和zrz无聊到了玩起了搭积木...(本题选自uva101,翻译来自<算法竞赛入门经典2>) 题目描述 从左到右有n个木块,编号从0到n ...
- sass和less，优秀的前端样式预处理器
身为切图界的一员,或者说在前端界打滚了一段日子的你.会慢慢地发现.如今的css编写已经不能满足自己的效率. 假设有更强大的框架,让你的css更灵活和更easy复用和维护,那该多好啊.非常明显,这个早已 ...
- CSS伪元素与伪类的区别
伪类和伪元素介绍 伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能 ...
- 4、runtime电源管理模式（内核文档runtime_pm.txt有详细描述）
系统睡眠模型是让整个系统休眠,而runtime是在系统正常工作的时候单独控制某个设备休眠和唤醒 1. runtime PM流程怎样动态地打开或关闭设备的电源?最简单的方法:在驱动程序里,在open函数 ...
- Android(Lollipop/5.0) Material Design(四) 创建列表和卡片
Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...
- vue项目中一些文件的作用
原文 简书原文:https://www.jianshu.com/p/38749e5bec3c 大纲 1.vue项目结构 2.主要的配置文件 2.1.package.json 2.2.dev-serve ...
- 20、RTC驱动程序
drivers\rtc\rtc-s3c.c s3c_rtc_init platform_driver_register s3c_rtc_probe rtc_device_register(" ...
- [Angular2 Form] Reactive Form, show error message for one field
<form [formGroup]="reactiveForm" novalidate autocomplete="off"> <div cl ...