How to avoid duplication between templates in an AngularJS app?

Question

Suppose all the views in my site should include some shared content, for example a navbar at the top. How can this be acheived, without duplicating the navbar markup across all the views?

I'm looking for the most standard way to do this in AngularJS.

Answer 1

You can have your index page have a navbar, and footer, then have an ng-view div.

You'll need to include the ngRoute module, and the script tag linking to it.

You'll have a div like this.

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

You'll have a partialRoutes.js file looking something like this.

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

When you include ngRoute it will look something like this.

var myApp = angular.module('myApp', ['ngRoute']); Here are the docs for ngRoute. Hope I helped.

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

Answer 2

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