Question

我的特别提问是基金会的应用程序。到目前为止，如果我使用CommonJS代码或在我正在编写的应用程序的上下文中，Webpack一直都很棒，但是我很难引入包含自己的HTML的Foundation for Apps模板，SVG图标，JavaScript和SCSS。

我通过要求连接源（这不是理想的但它有效）包含了FfA的JavaScript。我还可以以更干净的方式包含SCSS，因为Webpack的sass加载器似乎知道如何处理@import语句。

当FfA的源（Angular）从Webpack之后不存在的路径请求HTML时，会出现关键问题。

例如，将发出请求以获取/components/modal/modal.html，但我的公共目录中唯一的内容是bundle.js。如何加载所有HTML模板并使用templateUrl语句替换FfA源中任何出现的require路径，这些语句将解析为加载的HTML的路径？我是走正确的道路还是有更好的方法？

Answer 1

F4A正在使用内置的Front Router插件，它允许您直接在视图模板中定义路径，从而简化了AngularJS中路径的创建。如图所示here，它意味着用于最基本的意义和快速原型设计。例如，即使它实现了Angular的 UI-Router 及其states，您也无法使用其解析属性。

我不熟悉 Webpack 以及它在哪个级别生成所需的模板，但如果您无法生成{{3}在由gulp生成之前的预期降价，然后您可以通过将F4A保留在其中并在AngularJs中解决它来禁用该插件并实现您的自定义$stateProvider实例：

.state('yourstate', {
    url: '/yoururl',
    templateUrl: 'templates/yourTemplate.html',
    //
    // or maybe something like :
    //    -- this is guessing. i'm not familiar with webpack :) --
    //
    // templateUrl: function (wabpack) {
    //     return '/partials/' +  wabpack.path + '.html';
    // }
    //
    controller: 'YourController',
    resolve: {
        // you may also use resolve here for extra logic before
        // loading your template
    }

关于如何禁用 F4A Front Rooter 以及如何实施您自己的$stateProvider实例，您可以查看以下内容：

Front Router

包含一个大型项目作为Webpack的依赖项

1 个答案: