博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
requirejs+anjularjs+express框架
阅读量:6825 次
发布时间:2019-06-26

本文共 4870 字,大约阅读时间需要 16 分钟。

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 setupapp.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 handlerapp.use(function(req, res, next) {  var err = new Error('Not Found');  err.status = 404;  next(err);});// error handlers// development error handler// will print stacktraceif (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 userapp.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;

 

转载于:https://www.cnblogs.com/bobo-show/p/5056608.html

你可能感兴趣的文章
停电,导致DC无法启动
查看>>
MariaDB七之双主复制
查看>>
Sencha touch实践(1)在ios,android上变web app为native app
查看>>
XNA游戏:重力感应
查看>>
DNS服务部署的那点事儿
查看>>
【云计算的1024种玩法】使用 MSMTP 实现底层环境的 阿里云·邮件推送服务 兼容...
查看>>
Varnish介绍,安装与配置详解。
查看>>
CentOS bash漏洞威胁恐比“心脏流血”更大
查看>>
LINUX总结
查看>>
SCOM 2016监控IIS 网页服务
查看>>
通用权限管理系统组件 (GPM - General Permissions Manager) 中最简单的例子程序,如何时间通讯录管理...
查看>>
Ajax
查看>>
端口基础常识大全贴
查看>>
Cisco交换机的经典配置(2)
查看>>
稳扎稳打Silverlight(24) - 2.0通信之Socket, 开发一个多人聊天室
查看>>
毕业论文一次性修改所有字母和数字的字体
查看>>
vsphere5.2.安装部署VMware ESXi 5 上 视频共享
查看>>
impala1.2.3 udf问题
查看>>
数据仓库专题23-原则!原则!原则!
查看>>
细节决定成败2: 链路负载均衡遇到IPS
查看>>