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;更多专业前端知识，请上 【猿2048】www.mk2048.com
