我需要创建一个可以处理不同模板的网络应用程序(相同的类,但具有附加字段/函数)。我使用 AngularJS。
对于所有 css 方面,我使用 SASS。 对于 HTML 部分,我使用 AngularJS 的 ng-include 。 但我不知道JS部分该用什么。我可以为每个模板使用相同的 js 文件并进行所有更改,但如果有更改,我将需要更改所有文件。我寻找的是一个框架/工具,它允许我拥有一个基本的 js 文件并从其他文件加载额外的内容(例如 AngularJS 中的 ng-include)。
提前致谢
最佳答案
我认为您正在寻找ngRoute
或ui-router
。它们是允许您在应用程序中创建路由的组件。这意味着您可以定义一个包含 HTML 文件和关联 Controller 的路由。
看一下两者的文档。
这是使用 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'
}
关于javascript - 具有不同模板的 Web 应用程序 (AngularJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36336825/