我正在使用完整的MEAN堆栈尝试我的第一个应用程序但实际上我在第一页之外的控制器/模板定义中遇到了问题。
我能够访问我创建的各种模板,但是我无法找到绑定控制器的方法。
这是我的文件
app.js ,位于根目录
中var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var test = require('./routes/test');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/test', test);
module.exports = app;
位于public / javascripts /中的angularApp.js 我尝试了附加路径,没有路径,有扩展名,没有扩展名......
var app = angular.module('flapperNews', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl' })
.state('test', {
url: '/test',
templateUrl: 'presentation/test.html',
controller: 'controller/CustomCtrl.js'
});
$urlRouterProvider.otherwise('home'); }]);
CustomCtrl.js 这是我的控制器,位于public / controller /
app.controller('CustomCtrl', ['$scope',function($scope){
$scope.test = 'Hello world!';
}]);
test.html 这是我的"模板"
<div class="row">
<div class="col-md-6 col-md-offset-3">
{{test}}
</div>
</div>
的index.html
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="javascripts/angularApp.js"></script>
<script src="controller/CustomCtrl.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3" style="border: 1px solid black">
<ui-view></ui-view>
</div>
</div>
</div>
</div>
</body>
</html>
我只需要我的test.html有自己的控制器CustomCtrl(我试图打印Hello World!但它打印{{test}})
答案 0 :(得分:0)
对于您的测试状态,您已将控制器的名称指定为包含它的javascript文件,而不是控制器函数的名称。
答案 1 :(得分:0)
我设法解决了。
我需要用
导入<script src="controller/CustomCtrl.js"></script>
index.html 中的,以
修复angular.module('flapperNews').controller('CustomCtrl', CustomCtrl);
位于CustomCtrl的顶部。 一切都很顺利。