如何避免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不同的方法，因為它根據應用程序的狀態更改應用程序視圖，而不是只是路線網址。”