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

Question

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

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

Answer 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

Answer 2

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