MEAN堆栈,角度基本示例不起作用

时间:2014-06-15 22:16:04

标签: javascript html node.js angularjs mean-stack

我是MEAN堆栈的新手。我正在许多网站上做例子。

但我不能再进一步了。

这是问题所在。

我的网络服务器可以发送index.html和其他js文件。

但简单的角度应用程序无法正常工作。

这是代码。 的index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-,8">
<title>BTELI</title>
</head>
<body>

<div ng-app="testApp">
<ng-view></ng-view>
</div>

<script src="bower_components/angular/angular.min.js"></script>
<script src="javascripts/app.js"></script>
</body>
</html>

app.js

var app = angular.module("testApp",[]);

app.config(function ($routeProvider) {
$routeProvider.when('/', 
  {
    templateUrl: "view/main.html",
    controller: "MainCtrl"
  }
)
})

app.controller("MainCtrl", function ($scope) {
$scope.model = {
  message:"This is MY APP!!!"
}
})

最后,main.html

<h1>{{model.message}}</h1>

我真的不知道为什么它不会起作用。

因为,我可以访问html源代码中的那些js文件。

我能做什么?

我不确定它是否有帮助,我在这里附上我的服务器端代码。

app.js

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
app.enable('jsonp callback');
app.set('view engine', 'ejs');
app.set('views',__dirname+'/public/view');
app.use(favicon(__dirname+'/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(express.static(path.join(__dirname, '/public')));

require('./server/routes/index.js')(app);

app.use(function(req, res, next) {
    var err = new Error('Not Found'); 
    err.status = 404;
    next(err);
});

if (app.get('env') === 'development') {
    console.log('development mode');
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

app.listen(80,function(){
    console.log('Listening on Port 80');
});

module.exports = app;

和路由部分。

app.get('/', function(req, res) {
    res.sendfile('index.html');
});

1 个答案:

答案 0 :(得分:3)

您的应用不包含ngRoute服务,因此无法访问$routeProvider

var app = angular.module("testApp",['ngRoute']);

index.html中的

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular-route.js"></script>

https://docs.angularjs.org/api/ngRoute/service/%24route#example