更简洁的定义Angular模板的方法

Question

考虑以下代码

my_app.run( [ '$templateCache' , function( $templateCache ) {
    var template = "" +
        "{{ item.name }}" +
        "<ul ng-if='item.sub'>" +
            "<li ng-repeat='item in item.sub' ng-include=\"'angular-multi-select-item.htm'\"></li>" +
        "</ul>" +
        "";
    $templateCache.put( 'angular-multi-select-item.htm' , template );
}]);

虽然这个方法能够正常工作，但是我认为它很丑（拼接的字符串内嵌有html代码）。是否有其他更加简洁的方式来定义Angular模板中的html呢？

- alexandernst

Answer 1

你觉得这个怎么样？只需在你的工作目录中创建一个视图html文件，并使用$http加载它即可。

$templateCache.put('angular-multi-select-item.htm', $http.get('views/template.html'));

您也可以尝试使用`ng-include`（文档）并在主视图中添加包含，例如：

<div ng-include="'views/template.html'"></div>

- lin

---

啊，确实如此。我知道那个，但是它有几个缺点。我无法控制模板将被放置在哪里（考虑使用npm/bower管理的大型项目）。此外，它将会为我拥有的每个模板产生额外的http调用。（这可能会轻易地增加到10个，而在我看来，这相当昂贵）。尽管如此，我会投赞成票 :) - alexandernst

好的，但是如果我不知道模板在哪里，我该如何加载它？ - alexandernst

让我再试一次。假设我正在使用一个管理NPM或Bower库的框架。现在假设我的库（包括视图）安装在 project_root/libraries/npm/my_library/view.html。我怎么知道我的视图是保存在那里的？ - alexandernst

你的回答不是我想要的，我认为我已经解释过了。我点赞是因为它可能会解决别人的问题。NPM和Bower包其实是完全相同的东西，这取决于包的代码是否可以在浏览器中使用。 - alexandernst

你开始混淆了很多东西。NPM是一个包管理器，恰好与Node一起提供。没有更多，也没有更少。尝试使用Bower和NPM安装软件包。你最终会得到完全相同的文件（很可能）。正如我所说，由Bower或NPM安装的软件包仅在软件包本身被设计为这样时才可在浏览器中使用。最后但同样重要的是，我没有使用Node（你从哪里冒出来的），我正在使用Yii2，它使用NPM和Bower来管理前端依赖项。 - alexandernst