requirejs+anjularjs+express框架
1.目录
2.首页login.html如下：
<!DOCTYPE html>
<html>
<head>
<title>登录界面</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller="login-controller">
<form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post" name="myForm" novalidate>
<fieldset>
<legend>用户登录</legend>
<div class="form-group">
<label class="col-sm-3 control-label" for="username">用户名</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="用户名111" required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="password">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="password" name="password" ng-model="password" placeholder="密码" required/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button ng-disabled="myForm.$invalid" ng-click="login()" type="button" class="btn btn-primary">登录</button>
</div>
</div>
</fieldset>
</form>
</div>
<script type='text/javascript' src='/lib/jquery.min.js'></script>
<script type='text/javascript' src='/lib/bootstrap.min.js'></script>
<script type='text/javascript' src='/lib/require.js' data-main='/bootstrap/main.js'></script>
</body>
</html>
首先需要引入requirejs，指明入口函数（data-main中设定），平时我们自动加载会在html元素上用（ng-app），这里我们采用手动加载的方式。
index.html
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div>index 页面！</div>
<script type='text/javascript' src='/lib/jquery.min.js'></script>
<script type='text/javascript' src='/lib/bootstrap.min.js'></script>
<script type='text/javascript' src='/lib/require.js' data-main='/bootstrap/main.js'></script>
</body>
</html>
3.main.js（主要配置下所需的js文件）
require.config({
paths: {
'angular': '../angular/angular',
'angular-cookies': '../angular/angular-cookies',
'angular-route': '../angular/angular-route'
} ,
shim: {
'angular': {
exports: 'angular'
},
'angular-cookies': {
deps: ['angular']
},
'angular-route': {
deps: ['angular']
}
},
deps:['bootstrap']
});
这里主要是需要requirejs异步载入，而deps:['bootstrap']主要是让我先加载这个文件。
4.配置手动加载的文件bootstrap.js
require(['angular', 'angular-cookies','angular-route','../modules/login-module','../controllers/login-controller'], function (angular) {
'use strict';
//手动启动
angular.bootstrap(document, ['login-module']);
});
5.login-module(主要是路由的设置)
define(['angular'], function (ng) {
'use strict';
var app = ng.module('login-module', ['ngCookies']);
return app;
});
6.login-controller（控制器）
define(['../modules/login-module'], function(app) {
'use strict';
app.controller('login-controller',['$scope',function($scope){
$scope.login=function(){
if($scope.username!=""&&$scope.password!=""){
location.href="/";
}
}
}])
});
7.app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var login = require('./routes/login');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
//app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/login', login);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
8.路由
login.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.render('login',{title:"用户登录"});
})
module.exports = router;
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
requirejs+anjularjs+express框架的更多相关文章
- Node.js、Express框架获取客户端IP地址
Node.js //传入请求HttpRequest function getClientIp(req) { return req.headers['x-forwarded-for'] || req.c ...
- Win8.1 安装Express 框架
1.安装Windows Node.js客户端 2.安装Express框架 我本机是Win8.1的,使用命令npm install -g express安装Express,安装完成后显示一些安装明细,刚 ...
- Node.js Express 框架学习
转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...
- Node.js Express 框架
Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...
- express框架路由配置及congtroller自动加载
express框架在node官方推荐的一个框架,关于如何入门的文章,已经很多了,我就不在累赘了,本文的核心是如何修改文件使得更接近一个MVC的框架 express原生是通过require的方式实现了模 ...
- nodejs学习笔记二：解析express框架项目文件
上一章介绍了如何去创建一个express框架的工程项目,这章介绍一下express框架下的文件和用法解析,上一张我们创建的工程项目结构图如下: models是不属于原工程项目结构,为了实现数据模型后添 ...
- nodejs学习笔记一：安装express框架并构建工程目录
偶遇node是在一个阳光明媚的上午,无意间打开博客看到一片关于nodejs的介绍,通读全篇后,心情跌宕起伏,哎呀,这么好的东西我竟然现在才知道,这是最气的,于是马上开始制定学习nodejs计划,好了, ...
- Express框架使用以及数据库公共操作类整理(Win7下的NodeJs)
具体步骤: 1.安装开发工具WebStorm: 2.安装node/npm(下载地址:https://nodejs.org/download/)选择适合你的xxx.mis安装: 3.安装express框 ...
- express 框架之session
一.什么是session? 最近在学习node.js 的express框架,接触到了关于session方面的内容.翻阅了一些的博客,学到了不少东西,发现一篇博文讲的很好,概念内容摘抄如下: Sessi ...
随机推荐
- C++中结构体与类的区别（结构不能被继承，默认是public，在堆栈中创建，是值类型，而类是引用类型）good
结构是一种用关键字struct声明的自定义数据类型.与类相似,也可以包含构造函数,常数,字段,方法,属性,索引器,运算符和嵌套类型等,不过,结构是值类型. 1.结构的构造函数和类的构造函数不同. a. ...
- 报表中的Excel操作之Aspose.Cells（Excel模板）
原文:报表中的Excel操作之Aspose.Cells(Excel模板) 本篇中将简单记录下Aspose.Cells这个强大的Excel操作组件.这个组件的强大之处,就不多说,对于我们的报表总是会有导 ...
- 如何在jasperreport自动生成序号
在导出报表时,有时候我们需要显示序号,有两种方法: 1.就是再加一个字段,就是说将序号也当做是要导出的字段来处理,然后用程序给这个字段赋值,这方面有点傻,就不说了. 2.利用jasperreport提 ...
- 【转】OpenGL相关函数库介绍
原文:http://blog.chinaunix.net/uid-20638550-id-1909182.html OpenGL 函数库相关的API有核心库(gl).实用库(glu).辅助库(aux) ...
- java基础（十三）常用类总结（三）
这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...
- Hibernate（九）一对多双向关联映射
上次的博文Hibernate从入门到精通(八)一对多单向关联映射中,我们讲解了一下一对多单向映射的相关 内容,这次我们讲解一下一对多双向映射的相关内容. 一对多双向关联映射 一对多双向关联映 射,即在 ...
- 乐视手机1S正式发售，乐视商城官网抽风遭网友吐槽
乐视手机1S正式发售,乐视商城官网抽风遭网友吐槽 10月27日,乐视召开的新品发布会上正式推出千元金属新机乐1s,售价1099元.今天11月3日上午10:00,乐1s在乐视商城.京东商城首发开卖,现货 ...
- Bzoj 1612: [Usaco2008 Jan]Cow Contest奶牛的比赛 传递闭包,bitset
1612: [Usaco2008 Jan]Cow Contest奶牛的比赛 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 891 Solved: 590 ...
- Space Ant - POJ 1696 (凸包)
题目大意:给一些散列点然后初始点是坐标最下面最左面的点,然后只能往左走,求出来最多可以经过多少个点,把序号输出出来. 分析:先求出来初始的点,然后不断排序找出来最近的凸点....复杂度是 n^2* ...
- sql宽字节注入，绕过单引号
参加下面: http://leapar.lofter.com/post/122a03_3028a9 http://huaidan.org/archives/2268.html https://ilia ...