[英]Angular component relative templateUrl
I'm developing a modular angular application with I defined I folder path (constant : BASE_PATH : "path/to/folder") in angular-module-1 module. 我正在使用angular-module-1模块中定义的I文件夹路径(常数:BASE_PATH:“路径/至/文件夹”)开发模块化的角度应用程序。 I want to re-used this constant in a angular component located in another module (angular-module-2)of my application. 我想在我的应用程序的另一个模块(angular-module-2)中的角度组件中重复使用此常数。 I want to use this constant many time in my project. 我想在我的项目中多次使用此常量。
module.component("relationshipSearch", {
templateUrl: BASE_PATH +'/link/to/other/folder',
witch is the best way to define this constant as a global variable visible in all the solution project Here is my project structure: 女巫是将此常量定义为在所有解决方案项目中都可见的全局变量的最佳方法。这是我的项目结构:
project
|-- angular-module-1
| |-- angular-module-1.js
| |-- angular-module-1.html
|-- angular-module-2
| |-- angular-module-2.js
| |-- angular-module-2.html
I'd say that create a common module named as angular-common
where you can place common
stuff like common service
, factory
, directive
, constants
, etc. 我想说的是,创建一个名为angular-common
的通用模块,您可以在其中放置诸如common service
, factory
, directive
, constants
等common
内容。
Then add the constant inside angular-common
(this would be completely independent and plug-able) module. 然后在恒定angular-common
(这将是完全独立且可插入)模块中添加常量。 like below 像下面
//assuming `angular-common` is already defined
angular.module('angular-common').constant('commmonSetting', {
'BASE_PATH': '/link/to/other/folder'
})
Next, inject this common module in app
(which is main module, going to be used in ng-app
/ bootstrap
) like below 接下来,将这个通用模块注入app
(这是主要模块,将在ng-app
/ bootstrap
),如下所示
angular.module('app', ['angular-common', 'ngRoute', ...other dependencies..])
When you wanted to use BASE_PATH
just inject commmonSetting
dependency in controller
/ component
wherever you want. 当您想使用BASE_PATH
只需将commmonSetting
依赖项注入到controller
/ component
。
app.component('myComponent', {
templateUrl: function(commmonSetting){
return commmonSetting.BASE_PATH +'/link/to/other/folder';
},
....
})
Sorry, for posting on an old thread with an accepted answer, but I wanted to say that the accepted answer is not minification safe. 抱歉,在带有接受答案的旧帖子上发布,但我想说的是,接受答案并不安全。 The minification safe way to write this is: 编写此代码的最小化安全方法是:
app.component('myComponent', {
templateUrl: function($injector){
var commmonSetting = $injector.get('namespace.CommmonSetting');
return commmonSetting.BASE_PATH +'/link/to/other/folder';
},
....
});
Perhaps a different approach might help. 也许其他方法可能会有所帮助。 Instead of setting the path why not just look to a file in the same directory. 除了设置路径之外,为什么不直接查找同一目录中的文件。
You could use require()
, for example: 您可以使用require()
,例如:
template: require('./template-in-same-dir.html')
Note the template
not templateUrl
. 注意template
不是templateUrl
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.