使用 ngInclude 包含 html 个文件

Question

我正在尝试使用 ng-include 将一个 html 文件包含到另一个 html 中。跟随没有运气，可能是由于 webpack 版本差异。

404 错误试图在 ng-include

中查找文件

package.json

"devDependencies": {
    ..//other dependencies
    "required-loader": "^1.3.15",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    ..//other dependencies
}

index.js（应用入口点）

import angular from 'angular'
import uirouter from 'angular-ui-router'
import routes from './routes'

//trying to require all files inside views/all dir/all html files
//@require "../views/**/*.html"

angular.module('app', [uirouter])
  .config(routes)
  .controller('LoginCtrl', function() {})

index.html 文件需要包含 navbar.html 文件

index.html
views
 --> common
     --> navbar.html

index.html

<div ng-include="'navbar.html'">

Answer 1

我找到了解决此问题的更好方法，而不是使用 ng-include。我为导航栏创建了一个 angular 组件并将其注入到 html.

<navbar></navbar>

在组件定义中，我使用导入语句调用html模板

import navbarTemplate from '../PATH';

angular.module('app')
    .component('navbar', {
        template: navbarTemplate,
        ...
});

使用 ngInclude 包含 html 个文件

Including html files using ngInclude

angularjs

angularjs-ng-include

webpack

html-webpack-plugin

webpack-3