angularjs – 在Mean.js堆栈上找不到Angular.js指令templateUrl

我在Angular中创建了我的第一个指令,运行在我用Yeoman自动生成的mean.js 0.4-dev堆栈垂直项目文件结构中.

当我使用’template：’属性时,该指令正确编译,但是当我尝试将内容移动到模板文件并使用’templateUrl：’属性时,它会加载未编译的’layout.server.view.html’文件我的’contact-form.client.template.html’文件.无论我设置路径是什么,它似乎无法找到我的模板文件(我尝试了树上的所有路径).

任何人都可以看到我做错了什么.也许有人可以解释角度如何解析相对路径.

我的程序结构是这样的…我使用生成器均值的0.4-dev为联系表单生成了一个模块.该模块包含我的指令.我的文件结构是这样的：

/app
  /config
  /modules
    /contact-forms
      /client
        /config
        /controllers  
          contact-forms.CLIENt.controller.js
        /views
          contact-form.client.template.html <- 2. should load this
        contact-forms.CLIENt.module.js
    /core
      /client
        /views
          home.client.view.html <- 1. <contact-form> directive here
      /server
        /controllers
        /routes
        /views
          layout.server.view.html <- 3. instead loads this
    /node_modules
    /public
    /uploads

我的指令代码是这样的：

contactForms.directive('contactForm',[function(){
return {
    reStrict: 'E',transclude: 'true',//template: '<div>Hello World!</div>',<--this works
    templateUrl: 'modules/contact-forms/client/views/contact-form.client.template.html'
};
}]);

我的模板文件是这样的：

<div>
<form class="row col-md-6 col-md-offset-3 text-left">
    <div class="form-group col-md-12">
        <label for="Name">Name</label>
        <input type="text" class="form-control" id="inputName">
    </div>
    <div class="form-group col-md-12">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="inputEmail">
    </div>
    <div class="form-group col-xs-12">
        <label for="emailSubject">Subject</label>
        <input type="text" class="form-control" id="inputSubject">
    </div>
    <div class="form-group col-xs-12">
        <label for="emailmessage">message</label>
        <input type="text" class="form-control" id="inputmessage">
    </div>
    <button type="submit" class="btn btn-priMary">Submit</button>
</form>
</div>

我在这类问题上看到了一些帖子,但它们似乎都与我的用例不符.我正在运行本地快递服务器,所以我不认为这篇文章是问题(Couldn’t load template using templateUrl in Angularjs).

这篇文章谈到templateUrl拼写错误,但我认为我的是正确的(Angular directive templateURL not being loaded. Why?)

我从角度github(https://github.com/angular/angular.js/issues/10965)上的这篇文章中了解到,angular.js的默认行为是在未找到模板的情况下加载索引文件. 2月4日的评论表明这是必须的.我的浏览器控制台没有错误,所以我不确定发生了什么.

我的node.js路由没有从mean.js堆栈的Yeoman安装中更改：

@H_949_13@module.exports = function(app) { // Root routIng var core = require('../controllers/core.server.controller'); // Define error pages app.route('/server-error').get(core.renderServerError); app.route('/not-found').get(core.renderNotFound); // Define application route app.route('/*').get(core.renderIndeX); };

和：

'use Strict';

/**
 * Render the main application page
 */
exports.renderIndex = function(req,res) {
    res.render('modules/core/server/views/index',{
        user: req.user || null
    });
};

/**
 * Render the server error page
 */
exports.renderServerError = function(req,res) {
    res.status(500).render('modules/core/server/views/500',{
        error: 'Oops! Something went wrong...'
    });
};

/**
 * Render the server not found page
 */
exports.renderNotFound = function(req,res) {
    res.status(404).render('modules/core/server/views/404',{
        url: req.originalUrl
    });
};

我是否需要为模板添加路线？

/**
 * Configure the modules static routes
 */
module.exports.initModulesClientRoutes = function (app) {
    // SetTing the app router and static folder
    app.use('/',express.static(path.resolve('./public')));

    // Globbing static routIng
    config.folders.CLIENt.forEach(function (staticPath) {
        app.use(staticPath.replace('/client',''),express.static(path.resolve('./' + staticPath)));
    });
};

templateUrl: 'modules/contact-forms/client/views/contact-form.client.template.html'

templateUrl: 'modules/contact-forms/views/contact-form.client.template.html'

/**
 * Configure the modules static routes
 */
module.exports.initModulesClientRoutes = function (app) {
    // SetTing the app router and static folder
    app.use('/',express.static(path.resolve('./public')));

    // Globbing static routIng
    config.folders.CLIENt.forEach(function (staticPath) {
        app.use(staticPath,express.static(path.resolve('./' + staticPath)));
    });
};

// SetTing Globbed js files
    config.files.CLIENt.js = getGlobbedPaths(assets.CLIENt.lib.js,'public/').concat(getGlobbedPaths(assets.CLIENt.js,'public/'));

    // SetTing Globbed css files
    config.files.CLIENt.css = getGlobbedPaths(assets.CLIENt.lib.css,'public/').concat(getGlobbedPaths(assets.CLIENt.css,'public/'));