1
J'ai créé un projet en utilisant un générateur express. Puis j'ai installé la tondeuse pour obtenir le bootstrap et l'angulaire. J'utilise express pour les services Web REST. J'ai aussi défini des routes angulaires. Je peux aussi avoir ma page d'index mais mes routes angulaires ne fonctionnent pas.Projet angulaire utilisant un générateur express
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 (express 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 (Module angulaire et de la route)
var myApp = angular.module('LoginRegisterApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/login',{
templateUrl: 'views/login',
controller: 'LoginController'
});
}]);LoginCtrl.js (Controller angulaire)
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>
Il convient de noter que Bower n'est pas actuellement pris en charge - plus intelligent de passer à NPM pour tout. – SomeKittens