使用快速生成器的 Angular 项目答案

【问题标题】：Angular project using express generator使用快速生成器的 Angular 项目
【发布时间】：2015-12-06 22:47:04
【问题描述】：

我使用快速生成器创建了一个项目。然后我安装了凉亭以获得引导程序和角度。我正在将 express 用于 REST Web 服务。我也定义了角度路线。我也可以获取我的索引页面，但我的角度路线不起作用。

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 mongoose = require('mongoose');
var fs = require('fs');

//load all models defined in .js files under models dir
fs.readdirSync(__dirname + '/models').forEach(function(filename){
  if(~filename.indexOf('.js')) require(__dirname + '/models/'+ filename);
})

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

// 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(require('less-middleware')(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/bower_components', express.static(path.join(__dirname, 'bower_components')));
//app.use('/bower_components',  express.static(__dirname + '/bower_components'));

app.use('/', routes);
app.use('/users', users);


// 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
    });
  });
  mongoose.connect('mongodb://localhost/mongo');
}

// 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;

Index.js（快速 REST）

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');

mongoose.model('donuts',{id:String, type:String, name:String});
//mongoose.model('users', {firstname: String, lastName: String, email: String});
//all models are now loaded from app.js file
router.get('/userlist', function(req, res){
  mongoose.model('users').find(function(err, users){
    res.send(users);
  });
});

router.get('/userlist/:userId', function(req, res){
  mongoose.model('users').find({_id: req.params.userId},function(err, users){
    res.send(users)
  });
});

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('*', function(req, res) {
  res.sendfile('./public/index.html'); // load our public/index.html file
});

module.exports = router;

MainModule.js（Angular 模块和路由）

var myApp = angular.module('LoginRegisterApp', ['ngRoute']);

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){

    $routeProvider.when('/login',{
        templateUrl: 'views/login',
        controller: 'LoginController'
    });
}]);

LoginCtrl.js（角度控制器）

myApp.controller('LoginController',['$scope', function($scope){

    $scope.hello = "Helloo world Sunil";
}]);

index.html

<!DOCTYPE html>
<html lang="en" ng-app='LoginRegisterApp'>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!-- CSS -->
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/style.css"> <!-- custom styles -->

    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
    <!--<script src="/bower_components/angular/angular.min.js"></script>
    <script src="/bower_components/angular-route/angular-route.min.js"></script> -->
    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="MainModule.js"></script>
    <script src="javascripts/controllers/LoginCtrl.js"></script>
</head>
<body ng-controller="LoginController">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">WebSiteName</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Page 1-1</a></li>
                        <li><a href="#">Page 1-2</a></li>
                        <li><a href="#">Page 1-3</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- ANGULAR DYNAMIC CONTENT -->
{{hello}}
<div ng-view></div>
</body>
</html>

【问题讨论】：

应该注意的是，目前不支持 Bower - 更聪明地切换到 npm 来处理所有事情。

标签： angularjs express

【解决方案1】：

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

Replace the code in app.js file and comment out the old code for setting the engine.

As well as keep the index.html file in public directory and add the following code in app.js file :

app.use(express.static("./public"));

app.get('/', function (req, res, next) {
    res.sendFile("./public/index.html");
});

【讨论】：