`
sillycat
  • 浏览: 2550813 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Mobile Jquery(5)Update and Know about Express

 
阅读更多

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

分享到:
评论

相关推荐

    jQuery Mobile Up and Running

    《jQuery Mobile Up and Running》是一本专为移动应用开发者准备的指南,主要聚焦于使用jQuery Mobile框架进行响应式和触控优化的Web应用开发。jQuery Mobile是一个轻量级、跨平台的JavaScript库,旨在简化HTML5应用...

    jQuery Mobile Develop and Design 2012.pdf

    jQuery Mobile Develop and Design 2012.pdf

    jQueryMobile-HTML5模板

    **jQuery Mobile HTML5模板详解** jQuery Mobile是一款基于HTML5的前端开发框架,专门设计用于构建响应式、触摸友好的移动Web应用。它充分利用了HTML5的特性,为开发者提供了丰富的组件和交互效果,使得在手机和...

    Adobe Press Dreamweaver CS5.5, Mobile with jQuery HTML5 and CSS3

    2. 移动端设计与开发: 文档提到了“Designing and Developing for Mobile”,这意味着本书将指导读者如何使用Adobe Dreamweaver CS5.5以及其他技术来设计和开发适用于移动设备的网站和应用。随着智能手机和平板电脑...

    Jquery mobile 从设计到开发

    书籍《jQuery Mobile Develop and Design》的作者Krish Hadlock,拥有丰富的开发经验,他在书中提供了一个全面的入门指南,帮助读者通过一步步的指导学会编写代码,以创建移动网站。这本书覆盖了jQuery Mobile框架的...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jQuery Mobile API文档

    jQuery Mobile是一款基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI...

    jQuery Mobile 所需要的部署文件

    jQuery Mobile 是一个轻量级的、基于 jQuery 库的框架,专为移动设备上的网页应用设计,它提供了丰富的用户界面(UI)组件和交互效果,让开发者能够快速构建响应式和触控友好的Web应用程序。这个资源包以“Hello ...

    HTML5+JQuery Mobile 移动端WebApp案例

    HTML5和JQuery Mobile是构建移动WebApp的两个关键技术,它们共同为开发者提供了在移动设备上创建交互式、响应式的Web应用的能力。本实例通过一个金融系统的移动端页面演示了这两者的应用,旨在促进学习和理解。 ...

    jquery mobile官方git资源

    《jQuery Mobile官方Git资源详解》 在Web开发领域,jQuery Mobile是一个非常重要的框架,它为构建响应式、触摸友好的移动应用提供了强大的工具。本文将深入解析“jquery mobile官方git资源”,并围绕其中的关键知识...

    jQuery Mobile Develop and Design

    本书《jQuery Mobile Develop and Design》是一份详尽的指南,旨在为读者提供简单明了且深入浅出的jQuery Mobile开发知识。 #### 二、jQuery Mobile 简介 jQuery Mobile 是一款基于 HTML5 的移动 Web 应用框架,由 ...

    jQuery Mobile参考手册

    3.jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。 4.通过使用jQuery Mobile 可以 "写更少的代码,做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页,且兼容...

    HTML5+jQuery Mobile模板两套

    HTML5和jQuery Mobile是现代移动应用开发中的两个关键技术,它们共同为构建响应式、交互式的Web应用程序提供了强大的工具。本资源包含两套基于HTML5和jQuery Mobile的模板,可以帮助开发者快速搭建移动应用的界面,...

    Jquery Mobile 帮助手册

    jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

    jquerymobile设计完整例子

    **jQuery Mobile 设计详解** jQuery Mobile 是一个轻量级、响应式的前端框架,专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程,提供了丰富的组件和交互效果,使得开发者可以快速构建...

    jquery mobile datepicker 手机端日期选择器

    《jQuery Mobile Datepicker:手机端日期选择器深度解析》 在移动应用开发中,日期选择器是一个不可或缺的组件,它提供了用户友好的界面,让用户能够方便地选择日期。jQuery Mobile Datepicker 是一个专为手机端...

    jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery Mobile

    jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位

    jquery mobile 1.4.1版

    《jQuery Mobile 1.4.1版:移动开发的核心组件》 jQuery Mobile 是一个功能强大的前端框架,专门针对移动设备的网页开发而设计。在1.4.1版本中,它提供了一系列优化的CSS和JavaScript文件,使得开发者能够快速、...

    jQuery mobile相册

    jQuery Mobile相册是一种基于jQuery Mobile框架的移动应用组件,它为用户提供了一种优雅的方式来展示和浏览图片集,尤其适用于移动设备。jQuery Mobile是jQuery库的一个分支,专为触摸设备优化,提供了一套完整的UI...

Global site tag (gtag.js) - Google Analytics