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

Web App with different template (AngularJS)

本文关键字：应用程序 Web AngularJS      更新时间：2023-10-07

我需要创建一个web应用程序，它可以处理不同的模板（相同的类，但有添加的字段/函数）。我使用AngularJS。

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

提前感谢

我认为您正在寻找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'
}
相关文章：