如何避免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不同的方法，它基於應用程序的狀態，而不僅僅是路線網址更改您的應用程序的意見。」