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 ProceduresIn 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