具有不同模板的 Web 应用程序 (AngularJS)

Question

我需要创建一个可以处理不同模板（相同类但具有附加字段/功能）的网络应用程序。我使用 AngularJS。

对于所有 css 方面，我使用 SASS。 对于 HTML 部分，我使用 AngularJS 的 ng-include。 但我不知道 JS 部分用什么。我可以为每个模板使用相同的 js 文件，但如果有更改，我需要更改所有文件。我寻找的是一个框架/工具，它允许我拥有一个基本的 js 文件并从其他文件中加载额外的内容（如 AngularJS 中的 ng-include）。

提前致谢

Answer 1

我认为您正在寻找ngRoute 或ui-router。它们是允许您在应用程序中创建路由的组件。这意味着您可以定义一个包含 HTML 文件和关联控制器的路由。

看看两者的文档。

这是一个使用 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'

}