Angularjs Nodejs外部控制器

时间:2016-04-18 20:03:04

标签: angularjs node.js

我正在使用完整的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}})

2 个答案:

答案 0 :(得分:0)

对于您的测试状态,您已将控制器的名称指定为包含它的javascript文件,而不是控制器函数的名称。

答案 1 :(得分:0)

我设法解决了。

我需要用

导入
<script src="controller/CustomCtrl.js"></script>
index.html 中的

,以

修复
angular.module('flapperNews').controller('CustomCtrl', CustomCtrl);

位于CustomCtrl的顶部。 一切都很顺利。