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前端的工作,从某总角 ...
随机推荐
- Django路由分配以及模版渲染
路由上: 在网络上区分不同的电脑通过IP.端口和网卡的MAC地址等,在web框架中怎么区分不同的请求呢,就是通过 ‘url(路由)’ ,url 学名叫做全球统一资源定位符,其实就是一个网址 一个url ...
- MyBatis学习总结（12）——Mybatis+Mysql分页查询
package cn.tsjinrong.fastfile.util; /** * @ClassName: Page * @Description: TODO(分页组件的父类,用来封装分页的 通用 ...
- nagios 安装配置（包含nrpe端）全 （一）
一.nagios安装: 1.安装下面命令: 这是本人监控服务时自己定义插件所用到的几个系统命令.可不安装. (1)iostat:监控磁盘IO信息: apt-getinstall sysstat (2) ...
- Android RxBus的实现及简单使用
RxJava目前已经很火了,如果你尚未了解请看这里.对于RxJava这里不多做介绍.RxBus并不是一个库,而是一种模式.相信大多数开发者都使用过EventBus,作为事件总线通信库,如果你的项目已经 ...
- 初学者路径规划 | 人生苦短我用Python
纵观编程趋势 人生苦短,我用Python,比起C语言.C#.C++和JAVA这些编程语言相对容易很多.Python非常适合用来入门.有人预言,Python会成为继C++和Java之后的第三个主流编程语 ...
- 原生js大总结五
041.在js中如何用方法将10进制的字符转换成16进制和8进制 数字.toString(16) 数字.toString(8) 042.如何创建时间对象 new Date() 04 ...
- 学习redis--安装(二)
安装前准备,我是在虚拟机中安装centos,然后安装redis. 安装 1.安装VMware,并安转centos系统 2.将redis的压缩包,上传到linux系统中(将下载到pc中的文件,拖到cen ...
- 详解javascript: void(0);
原文 简书原文:https://www.jianshu.com/p/08ae8cbeb3be 什么是javascript: void(0); 我们经常会使用到 javascript:void(0) 这 ...
- HDU 1874 畅通工程续 SPFA || dijkstra||floyd
http://acm.hdu.edu.cn/showproblem.php?pid=1874 题目大意: 给你一些点,让你求S到T的最短路径. 我只是来练习一下SPFA的 dijkstra+邻接矩阵 ...
- 【z02】选择客栈
(hotel.cpp/c/pas) [问题描述] 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照 某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示) ...