Question

我一直在按照以下教程（http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application）尝试学习构建MEANapps。 Uppon设置应用程序我的视图不会显示在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);

}]);

我的服务器.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中，当我运行我的应用时控制台看起来像这样： http://imgur.com/GT1LiP8

有人知道为什么我的观点没有正确显示吗？我的设置有问题吗？

Answer 1

看看here。这似乎适合你的问题。显然，提供视图和来自同一目录的静态内容并不好。

Answer 2

我之前在Chrome中遇到过这样的结构错误：

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {...}])

尝试将以上行更改为：

angular.module(function($routeProvider, $locationProvider){...})

Answer 3

从https://i.imgur.com/GT1LiP8.png中的错误看起来就像你的app.js中有html（而不是javascript）一样

角度ng视图不起作用

3 个答案: