Mobile Jquery(5)Update and Know about Express

本文介绍如何在环境中设置并使用JQuery Mobile,并详细探讨了JQuery Mobile与AngularJS结合的方法,包括手动组合、使用适配器及angular-jqm等不同方案。此外,还介绍了Express的基础知识及Mongoose的相关信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Mobile Jquery(5)Update and Know about Express

1. Check my environment
>npm -version 1.3.23>grunt -version
grunt-cli v0.1.11
grunt v0.4.1

>npm install
>grunt

Build and release the Jquery mobile.

>grunt js
Running the build and get "dist/jquery.mobile.js" created

A lot of examples are under demos directory.

2. Recover my old JQuery Mobile knowledge
…snip…
Too old

3. Working with AngularJS
http://demos.jquerymobile.com/1.4.0/
https://github.com/jquery/jquery-mobile/tree/master/demos

3.1 Manually Put Together
>git clone https://github.com/simonguest/jqm-angular-sample

Start my mongoDB first, then use this client
https://github.com/bububa/MongoHub-Mac

>node app.js

Visit http://localhost:3000


3.2 Use adapter
>git clone https://github.com/opitzconsulting/jquery-mobile-angular-adapter.git

Build it
>npm install
>grunt
>grunt dev


3.3 Use angular-jqm
>git clone https://github.com/angular-widgets/angular-jqm.git 

Install all the dependencies
>npm install
>grunt install

Build 
>grunt

Run it 
>grunt dev

Visit the page
http://localhost:9000/test/ngSnippet.html#/main.html

4. Decide to Deal with JQM-ANGULAR-SAMPLE
4.1 Get to know about Express first
http://expressjs.com/

Find a directory which will hold our project. Check the latest version of express from nom
>npm info express version
3.4.8

First of all, like all the other nodeJS project, use this file to define the dependencies package.json
sparkworker1:express carl$ cat package.json {  "name": "hello",  "description": "first demo app",  "version": "0.0.1",  "private": true,  "dependencies": {    "express" : "3.4.8"  }
}

>npm install

List all the dependencies we have.
>npm ls

We shall use and run express in app.JS
>cat app.js
var express = require('express'); var app = express(); app.get('/hello.txt', function(req, res){ res.send('Hello Sillycat'); }); app.listen(3000);
console.log('Listening on port 3000');

Visit the URL to get this page
http://localhost:3000/hello.txt

We can also Install express to enable the command of express to generate the project or some other useful function
>sudo npm install -g express

But I do not use this.

Debug
https://github.com/visionmedia/debug

Start the express from DEBUG mode
>DEBUG=express:* node app
  express:application booting in development mode +0ms  express:router defined get /hello.txt +0ms Listening on port 3000  express:router dispatching GET /hello.txt (/hello.txt) +15s  express:router matched get /hello.txt +0ms
  express:router dispatching GET /favicon.ico (/favicon.ico) +308ms

And there is many examples of express
https://github.com/visionmedia/express/tree/master/examples

4.2 Mongoose
http://mongoosejs.com/


References:
https://github.com/jquery/jquery-mobile

JQueryMobile 1 ~ 4
http://sillycat.iteye.com/blog/1129475
http://sillycat.iteye.com/blog/1129478
http://sillycat.iteye.com/blog/1129480
http://sillycat.iteye.com/blog/1129482

http://simonguest.com/2013/04/08/jquery-mobile-and-angularjs-working-together/
https://github.com/simonguest/jqm-angular-sample
https://github.com/opitzconsulting/jquery-mobile-angular-adapter
https://github.com/angular-widgets/angular-jqm

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值