0

我的特别问题是关于应用程序的基础。到目前为止，如果我使用 CommonJS 代码或在我正在编写的应用程序的上下文中工作，Webpack 一直很棒，但我正在努力引入 Foundation for Apps，它包含自己的 HTML 模板、SVG 图标、JavaScript , 和 SCSS。

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

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

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

4

1 回答 1

0

F4A 使用内置的Front Router插件，它允许您直接在视图模板中定义路由，从而简化了 AngularJS 中路由的创建。如此处所示，它旨在用于最基本的意义和快速原型设计。例如，即使它实现了 Angular 的UI-Router和它的states，你也不能使用它们的resolve属性。

我不熟悉Webpack以及它在哪个级别生成所需的模板，但是如果您在生成之前无法将它们生成为Front Router的预期降价gulp，那么您可以禁用该插件并$stateProvider通过离开 F4A 来实现您的自定义实例摆脱它并在 AngularJs 中解决它：

.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实例，您可以查看以下内容：

应用基础：如何替换默认的动态路由插件？

于 2015-09-05T12:57:01.700 回答