Angular.js指令在Mean.js栈上找不到templateUrl。
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 }); };
我需要为模板添加一个路由吗?
我弄清楚为什么它找不到模板了。在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/'));
看起来很有效,目前没有任何问题。如果我遇到任何问题,我会在评论中说明。