Angular的ng视图不起作用

我一直遵循以下教程(http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application)试图学习构建MEANapps。在设置应用程序时，我的视图不会显示在ng-viewdiv中。

我的应用程序的结构是这样的:

- 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中，当我运行应用程序时，控制台看起来像这样:https://i.stack.imgur.com/jBdLa.jpg

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

请看这里。这似乎符合你的问题。显然，将视图和静态内容放在同一个目录中是不好的。

我以前在Chrome中遇到过这种结构抛出错误:

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

尝试将上面的行改为:

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

从https://i.stack.imgur.com/29Sui.png的错误来看，我觉得你有html(而不是javascript)在你的app.js

相关内容

最新更新

热门标签：