使用ngInclude包含html文件(Including html files using ngInclude)

使用ngInclude包含html文件(Including html files using ngInclude)

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

尝试在ng-include中查找文件的404错误

的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() {})

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

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

的index.html

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

I'm trying to include an html file in to another html using ng-include. Followed this with no luck, maybe due to webpack version differences.

404 errors trying to find the file in the 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 (entry point to app)

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 file that needs to include navbar.html file

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

index.html

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

最满意答案

我发现了一个更好的方法来解决这个问题，而不是使用ng-include。 我为navbar创建了一个角度组件并将其注入到html中。

<navbar></navbar>

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

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

I found a better approach to solving this problem instead of using ng-include. I created an angular component for navbar and injected that in to html.

<navbar></navbar>

in the component definition, I use import statement to call the html template

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