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;