无法让ngRoute使用我的meanstack应用程序

时间:2015-10-10 19:40:21

标签: angularjs ngroute

我注意到这是一个受欢迎的问题,我已经查看过所有以前的问题,但据我所知,这些问题似乎都没有帮助我解决问题。

当我访问URL localhost:3000 / about时,我无法让页面在partials下加载about页面。

当我尝试访问localhost:3000 / about时,这是我得到的消息: 无法获得/关于

我的文件夹结构是这样的:

enter image description here

这是我的app.js文件:

/*global angular:true */
angular.module('myApp', [
  'AppCtrl',
  'ngRoute'
]).config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when("/", {templateUrl: "index.html"}).
    when("/about", {templateUrl: "partials/about.html"});
}]);

这是我的index.html文件:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>New Meanstack APP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

 </head>
 <body>
    <div class="container" ng-controller="AppCtrl">
    <h1>MeanStack App</h1>
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Number</th>
                <th>Action</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input class="form-control" ng-model="contact.name"></input>
                </td>
                <td>
                    <input class="form-control" ng-model="contact.email"></input>
                </td>
                <td>
                    <input class="form-control" ng-model="contact.number"></input>
                </td>
                <td><button class="btn btn-primary" ng-click="addContact()">Add Contact</button></td>
                <td><button class="btn btn-primary" ng-click="update()">Update</button>&nbsp;&nbsp;<button class="btn btn-info" ng-click="deselect()">Clear</button></td>
            </tr>
            <tr ng-repeat="contact in contactlist">
                <td>{{contact.name}}</td>
                <td>{{contact.email}}</td>
                <td>{{contact.number}}</td>
                <td><button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button></td>
                <td><button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button></td>
            </tr>

        </tbody>
    </table>
</div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="scripts/angular-route.min.js"></script>
    <script src="controllers/controller.js"></script>

    <script src="scripts/jquery.min.js"></script>
</body>
</html>

这是我的server.js文件:

var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('contactlist', ['contactlist']);
var bodyParser = require('body-parser');

app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());

1 个答案:

答案 0 :(得分:0)

编辑: 您没有使用ng-view,路由提供程序正在寻找在ng-view中呈现视图。如果您需要帮助,我有一个迷你MEAN堆栈设置。 https://github.com/Kalevera/q

角度代码位于public / js中 视图模板在public / u中 请注意,登录只是为了说明如何传输数据和完成角度路由。登录不符合Oauth标准(我知道,尚未验证)