我一直在遵循以下教程( http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application )尝试学习构建 MEANapps。设置应用程序后，我的 View 不会显示在 ng-view div 中。
我的应用程序的结构如下:
- app
----- routes.js
- config
----- db.js
- node_modules <!-- created by npm install -->
- public <!-- all frontend and angular stuff -->
----- css
----- js
---------- controllers <!-- angular controllers -->
---------- services <!-- angular services -->
---------- app.js <!-- angular application -->
---------- appRoutes.js <!-- angular routes -->
----- img
----- libs <!-- created by bower install -->
----- views
---------- home.html
---------- nerd.html
---------- geek.html
----- index.html
- .bowerrc <!-- tells bower where to put files (public/libs) -->
- bower.json <!-- tells bower which files we need -->
- package.json <!-- tells npm which packages we need -->
- server.js <!-- set up our node application -->
我的index.html看起来像这样:
<!DOCTYPE HTML>
<html ng-app="myApp" lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>Starter Node and Angular</title>
<!-- CSS -->
<link rel="stylesheet" href="css/sidebarindex.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oxygen:400,300,700">
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,700,900' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="libs/jquery/dist/jquery.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/controllers/GeekCtrl.js"></script>
<script src="js/services/GeekService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="NerdController">
<!-- ANGULAR DYNAMIC CONTENT -->
<div id="wrapper" ng-view>
</div>
</body>
</html>
我的app.js:
angular.module('myApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService', 'GeekCtrl', 'GeekService']);
我的appRoutes.js:
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
// nerds page that will use the NerdController
.when('/nerds', {
templateUrl: 'views/nerd.html',
controller: 'NerdController'
})
//
.when('/geeks', {
templateUrl: 'views/geek.html',
controller: 'GeekController'
});
$locationProvider.html5Mode(true);
}]);
我的 Server.js:
// server.js
// modules =================================================
var express = require('express');
var app = express();
var mongoose= require('mongoose');
// configuration ===========================================
// config files
var db = require('./config/db');
var port = process.env.PORT || 5000; // set our port
// mongoose.connect(db.url); // connect to our mongoDB database (uncomment after you enter in your own credentials in config/db.js)
app.configure(function() {
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users
app.use(express.logger('dev')); // log every request to the console
app.use(express.bodyParser()); // have the ability to pull information from html in POST
app.use(express.methodOverride()); // have the ability to simulate DELETE and PUT
});
// routes ==================================================
require('./app/routes')(app); // configure our routes
// start app ===============================================
app.listen(port); // startup our app at http://localhost:8080
console.log('Magic happens on port ' + port); // shoutout to the user
exports = module.exports = app; // expose app
在 Chrome 中，当我运行应用程序时，控制台看起来像这样: /image/jBdLa.jpg
有人知道为什么我的观点没有正确显示吗？我的设置有问题吗？
最佳答案
看看here 。这似乎适合你的问题。 显然，从同一目录提供 View 和静态内容是不好的。
关于javascript - Angular ng-view 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24480365/