Angular.js指令在Mean.js栈上找不到templateUrl。

16 浏览
0 Comments

Angular.js指令在Mean.js栈上找不到templateUrl。

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

当我使用\'template:\'属性时,该指令能够正确编译,但当我尝试将其内容移动到模板文件中并使用\'templateUrl:\'属性时,它会加载未编译的\'layout.server.view.html\'文件,而不是我的\'contact-form.client.template.html\'文件。无论我设置路径为何,似乎它都找不到我的模板文件(我已经尝试了所有路径)。

有没有人能看出我的错误所在。也许有人可以解释angular是如何解析相对路径的。

我的程序结构是这样的......我使用generator-mean的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.  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: 'hello world!', <--this works
    templateUrl: 'modules/contact-forms/client/views/contact-form.client.template.html'
};
}]);

而我的模板文件如下:

 

我看过几篇关于这种问题的帖子,但似乎没有一个与我的用例相匹配。我在运行本地express服务器,因此我不认为这篇文章是问题所在(Couldn\'t load template using templateUrl in Angularjs)。

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

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

我的node.js路由没有改变,是在mean.js堆栈的Yeoman安装中设置的:

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
    });
};

我需要为模板添加一个路由吗?

admin 更改状态以发布 2023年5月25日
0
0 Comments

我弄清楚为什么它找不到模板了。在mean.js 0.4.0中,express配置文件有一个静态路由函数,它会从路径中移除/client。

/**
 * 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'

这似乎有效。我不知道他们为什么要从路径中移除这个/client。在这个问题的参考文献中提到了它(https://github.com/meanjs/mean/issues/608),然而似乎并没有明确说明他们这么做的原因。

如果您想从mean.js中删除这个行为,您可以执行以下操作(警告:yeoman meanjs:vertical-module生成器创建的所有路径都没有客户端,因此请不要使用它,或在创建每个模块后更正其路径输出):

在express.js中删除replace()函数,使其看起来像这样:

/**
 * 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)));
    });
};

对于项目中的每个模块,在每个静态路径中在模块名称后添加/client。我是以一种蛮力方式来做的,不过我相信还有更聪明的方法。

在config.js文件中,将121行和124行中的/client屏蔽掉,使它们看起来像以下内容:

    // 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/'));

看起来很有效,目前没有任何问题。如果我遇到任何问题,我会在评论中说明。

0