我在Angular中创建了我的第一个指令,运行在我用Yeoman自动生成的mean.js 0.4-dev堆栈垂直项目文件结构中。
当我使用'模板时,该指令正确编译:'但是,当我尝试将内容移动到模板文件并使用' 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)。
这篇文章谈到模板拼写错误但我觉得我的错了(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
});
};
我是否需要为模板添加路线?
答案 0 :(得分:3)
我弄清楚为什么它找不到模板。在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'
这似乎有效。不知道为什么他们从路径中删除此/客户端。在这个问题上有一个参考(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/'));
似乎工作,到目前为止似乎没有任何问题如果我遇到任何问题,我会发表评论。