Angular JS 和部分

Posted 2023-03-07

【中文标题】Angular JS 和部分

【英文标题】：Angular JS and partials

【发布时间】：2012-11-24 08:10:35

【问题描述】：

是否可以在 Angular js 中将 html 页面嵌入到另一个页面中？

如果有，该怎么做？

Here 在他们的教程中，部分没有嵌入到页面中，但它就像您单击其中一个项目时进入的不同页面。 (see demo)

【参考方案1】：

是的，您可以使用 ngInclude 指令来实现。

在此处查看文档和示例：https://docs.angularjs.org/api/ng/directive/ngInclude

【讨论】：

这太糟糕了。有没有办法在不调用新请求的情况下包含部分内容，例如，作为初始 HTML 有效负载中的可重用片段？

正是我需要的。显然，这应该谨慎使用，但它可以完美地重新调整我的登录表单。

@davidgoli，据我所知，角度缓存加载的模板以避免后续请求。

@davidgoli 可以在同一个页面中用脚本标签定义模板，见docs.angularjs.org/api/ng.directive:script

@davidgoli，ngInclude 指令将向后端发出请求，但如果它已经存在于 $templateCache 中，它将首先从那里获取它。您可以像这样将 HTML 字符串添加到 $templateCache 中： $templateCache.put('templateId.html', 'This is the content of the template');这应该允许您向包含要用作模板的 HTML 的主 index.html 添加特殊标记，并且当 JS 启动时，您可以读取这些元素，将它们作为字符串拉入，并将它们添加到您的$templateCache 所以 Angular 可以渲染它们。

【参考方案2】：

@Wilt 是对的，但这里有一个更具体的链接和代码示例（来自https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view）

在您的根模板中：

<div ui-view></div>
<div ui-view="chart"></div> 
<div ui-view="data"></div> 

在你的 app.config 函数中

$stateProvider.state("home", 
    views: 
        "": 
            template: "<h1>Some HTML</h1>"
        ,
        "chart": 
            templateUrl: "templates/chart.html"
        ,
        "data": 
            template: "<data_thing/>"
        
        
)

【参考方案3】：

如果 ng-include 不是您需要的，您可能需要查看 angular-ui-router 模块。它允许您执行嵌套和并行视图......它很棒，灵活，易于使用并且有据可查。 https://github.com/angular-ui/ui-router