如何避免 AngularJS 应用程序中模板之间的重复？

Posted 2023-02-26

【中文标题】如何避免 AngularJS 应用程序中模板之间的重复？

【英文标题】：How to avoid duplication between templates in an AngularJS app?

【发布时间】：2015-11-06 18:42:20

【问题描述】：

假设我网站中的所有视图都应包含一些共享内容，例如顶部的导航栏。如何在不跨所有视图复制导航栏标记的情况下实现这一点？

我正在寻找在 AngularJS 中执行此操作的最标准方法。

【参考方案1】：

你可以让你的索引页面有一个导航栏和页脚，然后有一个 ng-view div。

您需要包含 ngRoute 模块，以及链接到它的脚本标记。

你会有一个这样的 div。

<div ng-view=""></div>

您将有一个类似这样的 partialRoutes.js 文件。

myApp.config(function($routeProvider)
  $routeProvider
    .when('/',
        templateUrl: './partials/things.html'
    )
    .when('/stuff',
        templateUrl: './partials/stuff.html'
    )
    .when('/otherstuff',
        templateUrl: './partials/otherstuff.html'
    )
    .otherwise(
        redirectTo: '/',
    )
);

当你包含 ngRoute 时，它​​看起来像这样。

var myApp = angular.module('myApp', ['ngRoute']); 这是 ngRoute 的文档。希望我能帮上忙。

https://docs.angularjs.org/api/ngRoute

【参考方案2】：

您可能想检查一下： https://scotch.io/tutorials/angular-routing-using-ui-router “它提供了一种与 ngRoute 不同的方法，因为它会根据应用程序的状态更改应用程序视图，而不仅仅是路由 URL。”