Web App mit anderer Vorlage (AngularJS)

Question

Ich muss eine Webanwendung erstellen, die verschiedene Vorlage (gleiche Klasse aber mit Zusatzfeld/Funktionen) verarbeiten kann. Ich benutze AngularJS.

Für die CSS-Seite verwende ich SASS. Für den HTML-Teil verwende ich ng-include von AngularJS. Aber ich weiß nicht, was ich für den JS-Teil verwenden soll. Ich könnte die gleiche js-Datei für jede Vorlage mit allen Änderungen haben, aber wenn es eine Änderung würde ich alle Dateien ändern müssen. Was ich suche, ist ein Framework/Tool, das mir erlaubt, eine Basis-js-Datei zu haben und zusätzliche Inhalte von anderen Dateien zu laden (wie ng-include in AngularJS).

Vielen Dank im Voraus

Answer 1

Ich denke, dass Sie für ngRoute oder ui-router eine suchen. Sie sind Komponenten, mit denen Sie Routen in Ihrer Anwendung erstellen können. Dies bedeutet, dass Sie eine Route definieren können, die eine HTML-Datei und einen zugeordneten Controller enthält.

Werfen Sie einen Blick auf die Dokumentation der beiden.

Dies ist ein Beispiel unter Verwendung von ngRoute: https://jsfiddle.net/relferreira/t36xa01c/

HTML:

<div data-ng-app="app"> 

    <ul class="nav navbar-nav" id="subject"> 
    <li><a href="#/">Main</a></li> 
    <li><a href="#/detail">Detail</a></li> 
    </ul> 
    <div ng-view></div> 

</div> 

JS:

angular.module('app', ['ngRoute']); 

angular.module('app') 
    .config(config) 
    .controller('MainController', mainController) 
    .controller('DetailController', detailController); 


config.$inject = ['$routeProvider']; 
function config($routeProvider){ 

    $routeProvider.when('/',{ 
     template:'<h1>{{mainVm.title}}</h1>', 
     controller: 'MainController as mainVm' 
    }) 
    .when('/detail',{ 
     template:'<h1>{{detailVm.title}}</h1>', 
     controller: 'DetailController as detailVm' 
    }) 
    .otherwise({ 
     redirectTo:"/" 
    }); 
} 

mainController.$inject = ['$scope']; 

function mainController($scope){ 

    var vm = this; 

    vm.title = 'Main' 

} 

detailController.$inject = ['$scope']; 

function detailController($scope){ 

    var vm = this; 

    vm.title = 'Detail' 

}