Angularjs Nodejs Grunt Example

A simple demo sample was made to document the environment configuration and the structure flow of the framework.

1. Configuring the Environment

The default Nodejs is installed.

Install the following modules: Express (Nodejs framework), Grunt (JavaScript task Runner), Grunt-contrib-watch (grunt live load plugin), Grunt-express-server (Grunt start express service end plugin).

Enter the program folder in the command line, and then enter the following command:

NPM Install Express return

NPM Install grunt Enter

NPM Install Grunt-contrib-watch Enter

NPM Install Grunt-express-server Enter

After successful installation, you can see the corresponding module directory in the Node_modules directory in the program directory:

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvc3vubnlfzm9yzxzlcg==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma== /dissolve/70/gravity/center ">

2. Configuring Grunt Tasks

Open the Gruntfile.js file under the Programs folder. Register for Express and watch missions.

The Express task starts the Express server and executes the Server.js file. Watch tasks monitor express tasks and live reload. The code is as follows:

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: {//Overri De 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. Main documents

Serve_data.js. Both Server.js and index.html are under the Programs folder.

Index.html initiates an HTTP request to the '/data ' path on the server with the ANGULARJS resource.

The behavior of the path '/data ' defined in Server.js is to return the data variable obtained through the GetData () method in the Serve_data.js file.

After the index.html resource receives the returned data, it is displayed on the page by using databinding {{data}}.

Three files detailed code and gaze such as the following:

Index.html:

<! DOCTYPE html>

server.js:
Use Expressvar 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 routeapp.get ('/data ', function (req,res ) {res.send (data);});  /serve static index.html as Defaultapp.use (express.static (__dirname + '/')),//bind and listen for connections on the given Host and Portapp.listen (9001,function () {console.log (' Server listening on ', 9001)})

serve_data.js:
Export Funtion getdatamodule.exports={getdata:function () {//data can is fetched from a database or a file and so on. Here for simplicity,provide JSON data Directlyvar data={"Widgets": {"Debug": "On", "window": {"title": "Sample widget", "Nam E ":" Main_window "," width ": $," height ": +," image ": {" src ":" Images/test.png "," hoffset ": +," VOffset ": 250," Alignment ":" Center "}," text ": {" Data ":" Click here "," size ": $," style ":" Bold "," name ":" Text1 "," hoffset ": +," vOffset ": +," alignment ":" Center "}}}; return data;}}

4. Execution Procedures
In the command line, enter the program folder and type grunt to perform the grunt task. Open the browser to enter http://localhost:9001/and get the following results:



 
Angularjs Nodejs Grunt Example